/* =============================================================================
   SWU APR Dashboard v2.4 — Dark Theme
   ============================================================================= */

:root {
    --swu-bg-card:    #13132a;
    --swu-bg-alt:     #1a1a38;
    --swu-border:     rgba(255,255,255,0.08);
    --swu-text:       #f0f0ff;
    --swu-muted:      rgba(255,255,255,0.45);
    --swu-accent:     #4e9af1;
    --swu-glow:       rgba(78,154,241,0.15);
    --tier-s: #f4a623;
    --tier-a: #4e9af1;
    --tier-b: #7ed321;
    --tier-c: #9b59b6;
    --tier-d: #4a4a6a;
}

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */
.swu-apr-dashboard {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--swu-text);
    margin-bottom: 40px;
    background: var(--swu-bg, #060616) !important;
    padding: 20px !important;
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
/* Target common WPBakery / page-builder wrappers that add white bg */
.wpb_column .vc_column-inner > .wpb_wrapper .swu-apr-dashboard,
.vc_row .wpb_wrapper .swu-apr-dashboard,
.entry-content .swu-apr-dashboard {
    background: transparent !important;
}
/* Controls bar should be transparent so page/section bg shows through */
.swu-apr-controls {
    background: transparent !important;
}

/* ── Dashboard header row (badge + toggle side by side) ─────────────────────── */
.swu-apr-dashboard-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.swu-apr-season-badge {
    display: inline-block;
    background: linear-gradient(135deg,#1a1a38,#252550);
    color: var(--swu-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 4px;
    border: 1px solid rgba(78,154,241,0.3);
    box-shadow: 0 0 12px var(--swu-glow);
    white-space: nowrap;
}

/* ── Metric toggle (charts + table) ────────────────────────────────────────── */
.swu-apr-toggle {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    /* When inside dashboard-header, aligns to the right */
    margin-left: auto;
}

.swu-apr-table-section > .swu-apr-toggle {
    margin-left: 0;
    margin-bottom: 14px;
}

.swu-apr-toggle__btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: rgba(240,240,255,0.55);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 7px 16px;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

.swu-apr-toggle__btn:hover {
    background: rgba(78,154,241,0.12);
    border-color: rgba(78,154,241,0.35);
    color: rgba(240,240,255,0.85);
}

.swu-apr-toggle__btn--active {
    background: rgba(78,154,241,0.22);
    border-color: #4e9af1;
    color: #fff;
    box-shadow: 0 2px 12px rgba(78,154,241,0.35);
    font-weight: 800;
    position: relative;
}
.swu-apr-toggle__btn--active::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 2px;
    background: #4e9af1;
    border-radius: 2px;
}
/* Metric-specific colors */
.swu-apr-toggle__btn--active[data-metric="s1"] {
    background: rgba(116,192,240,0.22);
    border-color: #74c0f0;
    box-shadow: 0 2px 12px rgba(116,192,240,0.35);
}
.swu-apr-toggle__btn--active[data-metric="s1"]::after { background: #74c0f0; }
.swu-apr-toggle__btn--active[data-metric="s2"] {
    background: rgba(126,211,33,0.18);
    border-color: #7ed321;
    color: #7ed321;
    box-shadow: 0 2px 12px rgba(126,211,33,0.3);
}
.swu-apr-toggle__btn--active[data-metric="s2"]::after { background: #7ed321; }
.swu-apr-toggle__btn--active[data-metric="cb"] {
    background: rgba(78,154,241,0.22);
    border-color: #4e9af1;
    color: #fff;
    box-shadow: 0 2px 12px rgba(78,154,241,0.35);
}
.swu-apr-toggle__btn--active[data-metric="cb"]::after { background: #4e9af1; }

/* ── Metric label pill (inside chart title) ─────────────────────────────────── */
.swu-apr-metric-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    letter-spacing: 0.04em;
    vertical-align: middle;
    transition: background .2s, color .2s;
}
.swu-apr-metric-label--cb { background: rgba(78,154,241,0.15);  color: var(--swu-accent); border: 1px solid rgba(78,154,241,0.25);  }
.swu-apr-metric-label--s1 { background: rgba(126,211,33,0.15);  color: #7ed321;           border: 1px solid rgba(126,211,33,0.25);  }
.swu-apr-metric-label--s2 { background: rgba(244,166,35,0.15);  color: var(--tier-s);     border: 1px solid rgba(244,166,35,0.25);  }

/* ── Chart layout ───────────────────────────────────────────────────────────── */

/* Trend — full width */
.swu-apr-chart-box--trend {
    margin-bottom: 20px;
}

/* Bar + Scatter — 50/50 grid */
.swu-apr-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
    width: 100%;
    min-width: 0;
}
.swu-apr-charts-row--3col {
    /* CSS Grid's auto-fit still leaves empty tracks beside a lone trailing
       item once a row has already been established with more columns —
       flexbox is the right tool here: any leftover row-space is
       automatically redistributed to whatever items ARE present, so a lone
       4th donut on its own row stretches to the FULL row width instead of
       sitting at 1/3 width with visible gaps beside it. Stays correct
       regardless of item count or screen width, no manual math needed. */
    display: flex;
    flex-wrap: wrap;
}
.swu-apr-charts-row--3col > .swu-apr-chart-box {
    flex: 1 1 320px;
    min-width: 0;
}
@media (max-width: 860px) {
    .swu-apr-charts-row { grid-template-columns: 1fr; }
    .swu-apr-dashboard-header { flex-direction: column; align-items: flex-start; }
    .swu-apr-toggle { margin-left: 0; }
}

/* ── Chart cards ────────────────────────────────────────────────────────────── */
.swu-apr-chart-box {
    background: var(--swu-bg-card);
    border: 1px solid var(--swu-border);
    border-radius: 12px;
    padding: 22px 20px 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}

.swu-apr-chart-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--swu-text);
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.swu-apr-chart-sub {
    margin: 0 0 12px;
    font-size: 11px;
    color: var(--swu-muted);
}

.swu-apr-week-label {
    font-weight: 400;
    color: var(--swu-muted);
    font-size: 12px;
}

/* Canvas sizing */
.swu-apr-canvas-wrap          { position: relative; height: 340px; }
.swu-apr-canvas-wrap--trend   { height: 420px; }  /* default; HHI overrides to 200px */
.swu-apr-canvas-wrap--bar     { height: auto; min-height: 200px; }
.swu-apr-canvas-wrap--scatter { height: 360px; }
.swu-apr-canvas-wrap canvas   { max-width: 100%; }

/* ── Tier legend ────────────────────────────────────────────────────────────── */
.swu-apr-tier-legend { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.swu-apr-tier {
    font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 4px;
    color: #fff; letter-spacing: 0.05em; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.swu-apr-tier--s { background: var(--tier-s); }
.swu-apr-tier--a { background: var(--tier-a); }
.swu-apr-tier--b { background: var(--tier-b); }
.swu-apr-tier--c { background: var(--tier-c); }
.swu-apr-tier--d { background: var(--tier-d); border: 1px solid rgba(255,255,255,0.15); }

/* ── Attribution ────────────────────────────────────────────────────────────── */
.swu-apr-attribution { font-size: 11px; color: var(--swu-muted); text-align: right; margin: 10px 0 0; }
.swu-apr-attribution a { color: var(--swu-accent); text-decoration: none; opacity: .8; }
.swu-apr-attribution a:hover { opacity: 1; }

/* ── Table ──────────────────────────────────────────────────────────────────── */
.swu-apr-table-section { margin-bottom: 32px; }

.swu-apr-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--swu-border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    background: var(--swu-bg-card);
}

table.swu-apr-table.dataTable {
    border-collapse: collapse !important;
    font-size: 13px; width: 100% !important; margin: 0 !important;
    background: transparent !important;
}

table.swu-apr-table.dataTable thead th {
    background: rgba(78,154,241,0.1) !important;
    color: var(--swu-accent) !important;
    padding: 11px 14px !important;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.07em;
    border-bottom: 1px solid rgba(78,154,241,0.2) !important;
    white-space: nowrap;
}

table.swu-apr-table.dataTable thead th.sorting::after,
table.swu-apr-table.dataTable thead th.sorting_asc::after,
table.swu-apr-table.dataTable thead th.sorting_desc::after { color: rgba(78,154,241,0.4); }

table.swu-apr-table.dataTable tbody tr { background: transparent !important; transition: background .1s; }
table.swu-apr-table.dataTable tbody tr:nth-child(even) { background: rgba(255,255,255,0.03) !important; }
table.swu-apr-table.dataTable tbody tr:hover            { background: rgba(78,154,241,0.07) !important; }

table.swu-apr-table.dataTable tbody td {
    padding: 9px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    color: var(--swu-text); font-size: 13px;
}

.swu-apr-pos { color: #7ed321 !important; font-weight: 700; }
.swu-apr-neg { color: #e74c3c !important; font-weight: 700; }

/* DataTables chrome */
.dataTables_wrapper { padding: 0; }
.dataTables_filter, .dataTables_length { padding: 12px 16px !important; background: var(--swu-bg-alt); }
.dataTables_filter label, .dataTables_length label { color: var(--swu-muted); font-size: 12px; }

.dataTables_filter input {
    background: rgba(255,255,255,0.06); border: 1px solid var(--swu-border);
    border-radius: 6px; padding: 5px 10px; font-size: 12px; color: var(--swu-text); outline: none;
}
.dataTables_filter input:focus { border-color: var(--swu-accent); }

.dataTables_length select {
    background: rgba(255,255,255,0.06); border: 1px solid var(--swu-border);
    border-radius: 6px; padding: 3px 6px; font-size: 12px; color: var(--swu-text);
}

.dataTables_info, .dataTables_paginate {
    font-size: 12px; padding: 10px 16px !important;
    color: var(--swu-muted) !important; background: var(--swu-bg-alt);
}

.dataTables_paginate .paginate_button { color: var(--swu-muted) !important; border-radius: 5px !important; border: none !important; padding: 4px 10px !important; }
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover { background: var(--swu-accent) !important; color: #fff !important; border: none !important; }
.dataTables_paginate .paginate_button:hover:not(.current) { background: rgba(78,154,241,0.12) !important; color: var(--swu-accent) !important; }

/* ── Season nav ─────────────────────────────────────────────────────────────── */
.swu-apr-season-nav { margin-bottom: 28px; }
.swu-apr-season-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--swu-border); padding-bottom: 0; }
.swu-apr-season-nav__item a {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
    text-decoration: none; color: var(--swu-muted); font-size: 13px; font-weight: 600;
    border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0;
    transition: color .15s, border-color .15s, background .15s;
}
.swu-apr-season-nav__item a:hover { color: var(--swu-text); background: rgba(255,255,255,0.04); border-bottom-color: var(--swu-accent); }
.swu-apr-season-nav__item--active a { color: var(--swu-accent); border-bottom-color: var(--swu-accent); background: rgba(78,154,241,0.06); }
.swu-apr-season-nav__badge { font-size: 9px; font-weight: 800; background: var(--tier-s); color: #fff; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Error box ──────────────────────────────────────────────────────────────── */
.swu-apr-error {
    background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.3);
    border-radius: 10px; padding: 14px 18px; color: #e88; font-size: 14px; line-height: 1.5;
}

/* ---- Bar + Scatter side-by-side row --------------------------------------- */

.swu-apr-charts-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    width: 100%;
    min-width: 0;
    /* No overflow:hidden — that clips taller right columns (Meta Movers) */
}

@media (max-width: 860px) {
    .swu-apr-charts-row { grid-template-columns: 1fr; }
}

/* ---- Scatter canvas ------------------------------------------------------- */

.swu-apr-canvas-wrap--scatter {
    position: relative;
    height: 420px;
}

.swu-apr-chart-sub {
    font-size: 11px;
    color: var(--swu-text-muted);
    margin: -8px 0 12px;
    font-style: italic;
}

/* ---- Table outer wrapper (holds toggle + table) --------------------------- */

.swu-apr-table-outer {
    margin-bottom: 32px;
}

.swu-apr-toggle--table {
    margin-bottom: 12px;
}

/* ---- Three-column supplementary row --------------------------------------- */

.swu-apr-charts-row--three {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 1100px) {
    .swu-apr-charts-row--three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .swu-apr-charts-row--three { grid-template-columns: 1fr; }
}

/* ---- Horizontal supplementary canvases ------------------------------------ */

.swu-apr-canvas-wrap--horiz {
    position: relative;
    height: auto;
    min-height: 160px;
}

.swu-apr-canvas-wrap--stagegap {
    position: relative;
    height: auto;
    min-height: 200px;
}

/* ---- Quick Stats card ------------------------------------------------------ */

.swu-apr-quick-stats {
    display: flex;
    flex-direction: column;
}

.swu-apr-qs-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.swu-apr-qs-item {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    padding: 10px 14px;
    border-left: 3px solid transparent;
}

.swu-apr-qs-item--gold  { border-left-color: #f4a623; }
.swu-apr-qs-item--up    { border-left-color: #7ed321; }
.swu-apr-qs-item--down  { border-left-color: #e74c3c; }
.swu-apr-qs-item--cut   { border-left-color: #7ed321; }
.swu-apr-qs-item--close { border-left-color: #f4a623; }

.swu-apr-qs-item dt {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--swu-text-muted);
    margin-bottom: 3px;
}

.swu-apr-qs-item dt span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.swu-apr-qs-item dd {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--swu-text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.swu-apr-qs-val {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--swu-accent);
    flex-shrink: 0;
}

.swu-apr-qs-item--up   .swu-apr-qs-val { color: #7ed321; }
.swu-apr-qs-item--down .swu-apr-qs-val { color: #e74c3c; }
.swu-apr-qs-item--gold .swu-apr-qs-val { color: #f4a623; }

/* ---- Three-column trio row ------------------------------------------------ */

.swu-apr-charts-trio {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

@media (max-width: 1024px) { .swu-apr-charts-trio { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px)  { .swu-apr-charts-trio { grid-template-columns: 1fr; } }

/* ---- Compact canvas (trio charts — JS sets explicit height) --------------- */

.swu-apr-canvas-wrap--compact {
    position: relative;
    height: auto;
    min-height: 160px;
}

/* ---- Stage Gap full-width canvas ----------------------------------------- */

.swu-apr-canvas-wrap--stagegap {
    position: relative;
    height: auto;
    min-height: 200px;
}

/* ---- This Week's Movers card --------------------------------------------- */

.swu-apr-movers {
    display: flex;
    flex-direction: column;
}

.swu-apr-movers__section {
    flex: 1;
}

.swu-apr-movers__divider {
    height: 1px;
    background: var(--swu-border);
    margin: 14px 0;
}

.swu-apr-movers__heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.swu-apr-movers__heading--up   { color: #7ed321; }
.swu-apr-movers__heading--down { color: #e74c3c; }

.swu-apr-movers__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12px;
}

.swu-apr-movers__row:last-child { border-bottom: none; }

.swu-apr-movers__arch {
    color: var(--swu-text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swu-apr-movers__val {
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v2.6 additions: controls bar, tier filter, search, spotlight, H2H, tips
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Controls bar (metric toggle + tier filter + search in one row) ───────── */

.swu-apr-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.swu-apr-controls .swu-apr-toggle { margin-bottom: 0; }

/* ── Tier filter ─────────────────────────────────────────────────────────── */

.swu-apr-tier-filter {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.swu-apr-tier-filter__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--swu-text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-right: 2px;
}

.swu-apr-tier-filter__btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: var(--swu-text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.swu-apr-tier-filter__btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--swu-text-primary);
}

.swu-apr-tier-filter__btn--active { font-weight: 800; }

/* Tier-specific active colors matching the tier palette */
.swu-apr-tier-filter__btn--active[data-tier="ALL"] {
    background: rgba(78,154,241,0.22); border-color:#4e9af1; color:#4e9af1;
    box-shadow: 0 2px 10px rgba(78,154,241,0.3);
}
.swu-apr-tier-filter__btn--active[data-tier="S"] {
    background: rgba(255,200,0,0.18); border-color:var(--tier-s,#ffc800); color:var(--tier-s,#ffc800);
    box-shadow: 0 2px 10px rgba(255,200,0,0.3);
}
.swu-apr-tier-filter__btn--active[data-tier="A"] {
    background: rgba(126,211,33,0.18); border-color:var(--tier-a,#7ed321); color:var(--tier-a,#7ed321);
    box-shadow: 0 2px 10px rgba(126,211,33,0.3);
}
.swu-apr-tier-filter__btn--active[data-tier="B"] {
    background: rgba(78,154,241,0.18); border-color:var(--tier-b,#4e9af1); color:var(--tier-b,#4e9af1);
    box-shadow: 0 2px 10px rgba(78,154,241,0.3);
}
.swu-apr-tier-filter__btn--active[data-tier="C"] {
    background: rgba(192,112,224,0.18); border-color:var(--tier-c,#c070e0); color:var(--tier-c,#c070e0);
    box-shadow: 0 2px 10px rgba(192,112,224,0.3);
}
.swu-apr-tier-filter__btn--active[data-tier="D"] {
    background: rgba(130,130,150,0.18); border-color:rgba(180,180,200,.6); color:rgba(180,180,210,.8);
    box-shadow: 0 2px 8px rgba(130,130,150,0.2);
}

/* ── Search input ────────────────────────────────────────────────────────── */

.swu-apr-search {
    position: relative;
    margin-left: auto;
}

.swu-apr-search__input {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--swu-border);
    border-radius: 20px;
    color: var(--swu-text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    padding: 6px 14px 6px 30px;
    transition: border-color 0.15s, background 0.15s;
    width: 200px;
}

.swu-apr-search__input:focus {
    border-color: var(--swu-accent);
    background: rgba(78,154,241,0.06);
}

.swu-apr-search__input::placeholder { color: var(--swu-text-muted); }

.swu-apr-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--swu-text-muted);
    font-size: 14px;
    pointer-events: none;
}

/* ── Spotlight panel ─────────────────────────────────────────────────────── */

.swu-apr-spotlight {
    background: var(--swu-bg-card-alt);
    border: 1px solid rgba(78,154,241,0.25);
    border-radius: 12px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(78,154,241,0.1);
    padding: 20px 24px;
    animation: swuSlideIn 0.2s ease;
}

@keyframes swuSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.swu-apr-spotlight__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}
.swu-apr-h2h__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.swu-apr-spotlight__name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.swu-apr-spotlight__close {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--swu-border);
    border-radius: 50%;
    color: var(--swu-text-muted);
    cursor: pointer;
    font-size: 12px;
    height: 26px;
    width: 26px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.swu-apr-spotlight__close:hover {
    background: rgba(231,76,60,0.15);
    color: #e74c3c;
    border-color: rgba(231,76,60,0.3);
}

.swu-apr-spotlight__stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.swu-apr-spotlight__stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--swu-border);
    border-radius: 8px;
    padding: 10px 14px;
    text-align: center;
}

.swu-apr-spotlight__stat-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--swu-text-muted);
    margin-bottom: 5px;
}

.swu-apr-spotlight__stat-value {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--swu-text-primary);
    font-variant-numeric: tabular-nums;
}

.swu-apr-spotlight__stat--pos  { color: #7ed321; }
.swu-apr-spotlight__stat--neg  { color: #e74c3c; }
.swu-apr-spotlight__stat--tier-s { color: #f4a623; }
.swu-apr-spotlight__stat--tier-a { color: #4e9af1; }
.swu-apr-spotlight__stat--tier-b { color: #7ed321; }
.swu-apr-spotlight__stat--tier-c { color: #9b59b6; }
.swu-apr-spotlight__stat--tier-d { color: #6b6b8a; }

.swu-apr-spotlight__spark {
    height: 160px;
    position: relative;
}
.swu-apr-spotlight__chart-block {
    margin-top: 14px;
}
.swu-apr-spotlight__chart-block:first-of-type {
    margin-top: 6px;
}
.swu-apr-spotlight__chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.swu-apr-spotlight__chart-head span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(200,200,230,.5);
}
.swu-apr-spotlight__view-all {
    font-size: 10.5px;
    color: #4e9af1;
    text-decoration: none;
    font-weight: 600;
    opacity: 0.85;
    transition: opacity .15s;
}
.swu-apr-spotlight__view-all:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ── Head-to-Head panel ──────────────────────────────────────────────────── */

.swu-apr-h2h {
    margin-top: 0;
}

.swu-apr-h2h__selects {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.swu-apr-h2h__select-wrap { flex: 1; min-width: 200px; }

.swu-apr-h2h__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--swu-text-muted);
    margin-bottom: 6px;
}

.swu-apr-h2h__select {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--swu-border);
    border-radius: 8px;
    color: var(--swu-text-primary);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    padding: 8px 12px;
    transition: border-color 0.15s;
    cursor: pointer;
}

.swu-apr-h2h__select:focus { border-color: var(--swu-accent); }

.swu-apr-h2h__vs {
    font-size: 12px;
    font-weight: 800;
    color: var(--swu-text-muted);
    letter-spacing: 0.1em;
    padding-top: 18px;
    flex-shrink: 0;
}

.swu-apr-h2h__placeholder {
    color: var(--swu-text-muted);
    font-size: 13px;
    font-style: italic;
    text-align: center;
    padding: 24px 0;
}

.swu-apr-h2h__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 720px) { .swu-apr-h2h__content { grid-template-columns: 1fr; } }

.swu-apr-h2h__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.swu-apr-h2h__th {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    border-bottom: 1px solid rgba(78,154,241,0.2);
}

.swu-apr-h2h__th--mid {
    color: var(--swu-text-muted);
    font-size: 10px;
    width: 30%;
}

.swu-apr-h2h__cell {
    padding: 8px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-variant-numeric: tabular-nums;
    color: var(--swu-text-primary);
    font-size: 13px;
}

.swu-apr-h2h__cell--metric {
    color: var(--swu-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.swu-apr-h2h__cell--win {
    color: #f4a623;
    font-weight: 800;
}

.swu-apr-h2h__sparkwrap {
    height: 200px;
    position: relative;
}

/* ── Metric tooltip icon ─────────────────────────────────────────────────── */

.swu-tip {
    position: relative;
    display: inline-block;
    color: var(--swu-text-muted);
    cursor: help;
    font-size: 11px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.swu-tip:hover,
.swu-tip:focus { opacity: 1; outline: none; }

.swu-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,10,30,0.97);
    border: 1px solid rgba(78,154,241,0.3);
    border-radius: 8px;
    color: rgba(240,240,255,0.9);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    max-width: 280px;
    min-width: 180px;
    padding: 10px 13px;
    pointer-events: none;
    text-align: left;
    white-space: normal;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}

.swu-tip:hover::after,
.swu-tip:focus::after {
    opacity: 1;
    visibility: visible;
}

/* Arrow */
.swu-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(78,154,241,0.3);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 9999;
}

.swu-tip:hover::before,
.swu-tip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* ── v2.7: Heatmap ─────────────────────────────────────────────────────────── */
.swu-apr-heatmap-box { overflow: hidden; }
.swu-apr-heatmap-wrap { overflow: auto; }

.swu-apr-heatmap-tbl {
    border-collapse: collapse;
    font-size: 10px;
    font-family: var(--swu-mono, monospace);
    width: 100%;
}
.swu-apr-heatmap-tbl th {
    background: rgba(255,255,255,.06);
    color: rgba(240,240,255,.55);
    font-size: 9px;
    padding: 4px 5px;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.05);
    position: sticky;
    top: 0;
    z-index: 2;
}
.swu-apr-heatmap-tbl th.swu-apr-hm-rh {
    position: sticky;
    left: 0;
    z-index: 3;
    background: rgba(13,13,30,.95);
    text-align: right;
    min-width: 110px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
    font-size: 10px;
    color: rgba(240,240,255,.75);
}
.swu-apr-heatmap-tbl td {
    border: 1px solid rgba(255,255,255,.04);
    padding: 4px 5px;
    text-align: center;
    min-width: 42px;
    width: 42px;
    cursor: default;
    transition: filter .1s;
}
.swu-apr-heatmap-tbl td:hover { filter: brightness(1.35); }
.swu-apr-hm-diag { background: rgba(255,255,255,.04) !important; color: rgba(240,240,255,.3) !important; }

/* H2H matchup row highlight */
.swu-apr-h2h__matchup-row td {
    background: rgba(78,154,241,.08);
    border-top: 1px solid rgba(78,154,241,.25);
    border-bottom: 1px solid rgba(78,154,241,.25);
    font-weight: 700;
}
.swu-apr-h2h__cell--matchup {
    color: #4e9af1 !important;
    font-size: 11px;
}

/* Season sub-badge */
.swu-apr-season-badge--sub {
    background: rgba(126,211,33,.12);
    border-color: rgba(126,211,33,.25);
    color: #7ed321;
    font-size: 10px;
    margin-left: 8px;
}


/* ── Two-line heatmap headers ─────────────────────────────────────────────── */
.swu-apr-heatmap-tbl th {
    vertical-align: bottom;
    padding: 6px 4px 4px;
    line-height: 1.3;
    word-break: normal;
    white-space: normal;
}
.swu-apr-heatmap-tbl th.swu-apr-hm-rh {
    vertical-align: middle;
    text-align: right;
    min-width: 80px;
    white-space: normal;
    word-break: normal;
    line-height: 1.4;
}
.swu-apr-heatmap-tbl td {
    min-width: 38px;
    width: 38px;
}


/* ── Dropdown / select text visibility ────────────────────────────────────── */
.swu-apr-h2h__select,
.swu-apr-heatmap-standalone select,
.swu-apr select {
    color: #111 !important;
    background-color: #fff !important;
}
.swu-apr-h2h__select option,
.swu-apr-heatmap-standalone select option {
    color: #111;
    background-color: #fff;
}


/* ── Select dropdowns: force readable text ────────────────────────────────── */
.swu-apr-h2h__select,
.swu-apr-h2h__select option {
    color: #111111 !important;
    background-color: #ffffff !important;
}
.swu-apr-h2h__select {
    border: 1px solid rgba(78,154,241,0.4);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    width: 100%;
    cursor: pointer;
}


/* ── Force dark bg, remove padding from wrapping page-builder elements ─────── */
/* Targets WPBakery rows/columns and common theme wrappers around the plugin */
.swu-apr-dashboard ~ *,
.swu-apr-dashboard + * {
    background: transparent;
}
/* The white area above/below is likely a WPBakery column with white bg.
   Override it wherever our plugin lives. */
.wpb_column:has(.swu-apr-dashboard),
.vc_column_container:has(.swu-apr-dashboard),
.wpb_wrapper:has(.swu-apr-dashboard) {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Fallback for browsers without :has — make all wrappers use same bg */
.swu-apr-dashboard-root-wrap {
    background: var(--swu-bg, #060616) !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ── Penci theme boxed layout: remove white bg from content wrapper ─────────── */
.penci-enable-boxed {
    background: transparent !important;
}
/* Specifically target the Penci content area that wraps our plugin */
.penci-enable-boxed #content,
.penci-enable-boxed .site-content,
.penci-enable-boxed .penci-wrap-gprd,
.penci-enable-boxed .penci-wrap-gprd-law {
    background: transparent !important;
}
/* Remove any white padding sections immediately before/after our dashboard */
.swu-apr-dashboard {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.entry-content > p:empty,
.entry-content > div:empty {
    display: none;
}


/* ── H2H search-box design ────────────────────────────────────────────────── */
.swu-apr-h2h__search-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.swu-apr-h2h__search-wrap {
    flex: 1;
    min-width: 220px;
    position: relative;
}
.swu-apr-h2h__search {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 7px;
    color: rgba(240,240,255,0.9);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.swu-apr-h2h__search:focus {
    border-color: var(--swu-accent, #4e9af1);
    background: rgba(78,154,241,0.08);
}
.swu-apr-h2h__search--selected {
    border-color: rgba(126,211,33,0.6) !important;
    background: rgba(126,211,33,0.07) !important;
}
.swu-apr-h2h__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: #0d1535;
    border: 1px solid rgba(78,154,241,0.3);
    border-radius: 0 0 7px 7px;
    /* Cap height so it stays within visible viewport area */
    max-height: min(260px, 40vh);
    overflow-y: auto;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
/* H2H search wrap must be visible so dropdown escapes its container */
.swu-apr-h2h__search-wrap {
    overflow: visible;
}
.swu-apr-h2h__drop-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 12px;
    color: rgba(220,220,255,0.85);
    cursor: pointer;
    transition: background .1s;
    line-height: 1.4;
}
.swu-apr-h2h__drop-item > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.swu-apr-h2h__drop-item .swu-apr-name-box__dot {
    flex-shrink: 0;
}
.swu-apr-h2h__drop-item:hover {
    background: rgba(78,154,241,0.15);
    color: #fff;
}
.swu-apr-h2h__drop-item strong {
    color: var(--swu-accent, #4e9af1);
    font-weight: 700;
}
.swu-apr-h2h__btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.swu-apr-h2h__compare-btn {
    padding: 9px 24px;
    background: var(--swu-accent, #4e9af1);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    letter-spacing: 0.03em;
}
.swu-apr-h2h__compare-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.swu-apr-h2h__compare-btn:not(:disabled):hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
.swu-apr-h2h__btn-hint {
    font-size: 11px;
    color: rgba(200,200,230,0.45);
    font-style: italic;
}


/* ── Spotlight stat label tooltip indicator ──────────────────────────────── */
.swu-apr-spotlight__stat-label[title] {
    cursor: help;
    text-decoration: underline dotted rgba(200,200,230,0.3);
    text-underline-offset: 2px;
}


/* ── H2H Spotlight-style card layout ─────────────────────────────────────── */
.swu-apr-h2h__panel-inner {
    animation: swuFadeIn .25s ease;
}
@keyframes swuFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* Archetype name headers */
.swu-apr-h2h__names {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.swu-apr-h2h__name {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    flex: 1;
}
.swu-apr-h2h__name:last-child { text-align: right; }
.swu-apr-h2h__vs-mid {
    font-size: 11px;
    font-weight: 900;
    color: rgba(200,200,230,.35);
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* H2H matchup hero bar */
.swu-apr-h2h__matchup-hero {
    margin-bottom: 18px;
}
.swu-apr-h2h__matchup-bar-wrap {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.swu-apr-h2h__matchup-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}
.swu-apr-h2h__matchup-pcts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
}
.swu-apr-h2h__matchup-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200,200,230,.45);
    cursor: help;
}
.swu-apr-h2h__matchup-note {
    font-size: 10.5px;
    color: rgba(180,180,215,.5);
    text-align: center;
    margin-top: 6px;
    font-style: italic;
}

/* Column subheaders */
.swu-apr-h2h__col-heads {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Stat cards grid */
.swu-apr-h2h__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}
.swu-apr-h2h__card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    transition: border-color .15s;
}
.swu-apr-h2h__card:hover { border-color: rgba(255,255,255,0.16); }
.swu-apr-h2h__card-label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(200,200,230,.5);
    margin-bottom: 8px;
    cursor: help;
}
.swu-apr-h2h__card-vals {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6px;
}
.swu-apr-h2h__card-val {
    font-size: 18px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    flex: 1;
    text-align: center;
    padding: 4px 6px;
    border-radius: 5px;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.03);
    color: rgba(220,220,255,.7);
    line-height: 1.2;
}
.swu-apr-h2h__card-val.pos { color: #7ed321; }
.swu-apr-h2h__card-val.neg { color: #e05050; }
/* winner highlight now set via inline style using archetype color */
.swu-apr-h2h__card-val--win {
    font-weight: 800;
}

/* Sparkline */
.swu-apr-h2h__spark-wrap {
    height: 140px;
    margin-top: 4px;
}


/* ── H2H sparkline header + metric toggles ───────────────────────────────── */
.swu-apr-h2h__spark-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}
.swu-apr-h2h__spark-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(200,200,230,.4);
}
.swu-apr-h2h__spark-toggles {
    display: flex;
    gap: 6px;
}
.swu-apr-h2h__spark-btn {
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 5px;
    color: rgba(200,200,230,.5);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s;
}
.swu-apr-h2h__spark-btn:hover {
    background: rgba(78,154,241,0.10);
    border-color: rgba(78,154,241,0.3);
    color: rgba(240,240,255,.8);
}
.swu-apr-h2h__spark-btn--active {
    background: rgba(78,154,241,0.16);
    border-color: rgba(78,154,241,0.5);
    color: #4e9af1;
}
.swu-apr-h2h__spark-wrap { height: 150px; }


/* ── Top 3 / Bottom 3 Movers ─────────────────────────────────────────────── */
.swu-apr-movers-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
@media (max-width: 600px) { .swu-apr-movers-row { grid-template-columns: 1fr; } }
.swu-apr-movers-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 14px 16px;
}
.swu-apr-movers-box--rising  { border-left: 3px solid rgba(126,211,33,0.5); }
.swu-apr-movers-box--falling { border-left: 3px solid rgba(230,80,80,0.5); }
.swu-apr-movers-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(200,200,230,.45);
    margin: 0 0 10px;
}
.swu-apr-mover {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    gap: 8px;
}
.swu-apr-mover:last-child { border-bottom: none; }
.swu-apr-mover__name {
    font-size: 12px;
    color: rgba(220,220,255,.75);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.swu-apr-mover__val {
    font-size: 13px;
    font-weight: 800;
    font-family: monospace;
    white-space: nowrap;
}
.swu-apr-mover__val--pos { color: #7ed321; }
.swu-apr-mover__val--neg { color: #e05050; }


/* ── Movers inside charts-row ─────────────────────────────────────────────── */
.swu-apr-movers-col {
    display: flex;
    flex-direction: column;
}
.swu-apr-movers-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    flex: 1;
}
.swu-apr-movers-half { }
.swu-apr-movers-heading {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.swu-apr-movers-heading--up   { color: rgba(126,211,33,.7); }
.swu-apr-movers-heading--down { color: rgba(230,80,80,.7); }

.swu-apr-h2h__notice {
    background: rgba(78,154,241,0.08);
    border: 1px solid rgba(78,154,241,0.2);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 11px;
    color: rgba(200,200,230,.7);
    margin-bottom: 10px;
    line-height: 1.5;
}


/* ── charts-row right sub-column ─────────────────────────────────────────── */
/* (charts-row grid is defined above; just adding the right-column flex) */
.swu-apr-charts-row__right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;   /* prevents grid blowout */
}
/* Bar chart left col also needs min-width:0 */
.swu-apr-charts-row > .swu-apr-chart-box:first-child {
    min-width: 0;
}
/* Movers inside right col: compact, no extra padding */
.swu-apr-charts-row__right .swu-apr-movers-col {
    flex: 0 0 auto;
}

/* ── Compress HHI chart ──────────────────────────────────────────────────── */
/* APR Trend chart: comfortable reading height */
/* (base .swu-apr-canvas-wrap--trend is 600px — override to 420px) */
.swu-apr-chart-box:not(:has(canvas[id$="-hhi"])) .swu-apr-canvas-wrap--trend {
    height: 420px;
}

/* HHI chart only: compact single-line chart */
.swu-apr-chart-box:has(canvas[id$="-hhi"]) .swu-apr-canvas-wrap--trend {
    height: 200px !important;
    min-height: 160px;
}

/* Stage Gap chart: tall enough to show all 20 archetypes without crowding */
.swu-apr-canvas-wrap--stage-gap {
    height: 500px;
    min-height: 380px;
}

/* ── Responsive: stack on mobile ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .swu-apr-charts-row {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   Mobile responsive — prevent horizontal overflow
   ════════════════════════════════════════════════════════════════════════════ */

/* Root container: never wider than screen */
.swu-apr-dashboard {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}
.swu-apr-dashboard *,
.swu-apr-dashboard *::before,
.swu-apr-dashboard *::after {
    box-sizing: border-box;
}
/* Never constrain canvas - Chart.js manages its own sizing */
.swu-apr-dashboard canvas { max-width: none !important; }

@media (max-width: 860px) {

    /* Controls bar: wrap and shrink */
    .swu-apr-controls {
        flex-wrap: wrap;
        gap: 8px;
    }
    .swu-apr-toggle {
        margin-left: 0;
        flex-wrap: wrap;
    }
    .swu-apr-toggle__btn { padding: 6px 10px; font-size: 11px; }
    .swu-apr-tier-filter__btn { padding: 5px 8px; font-size: 10px; }

    /* Charts row: single column on mobile */
    .swu-apr-charts-row { grid-template-columns: 1fr; }
    .swu-apr-charts-row__right { width: 100%; min-width: 0; }

    /* Trend chart: more compact on mobile */
    .swu-apr-chart-box:not(:has(canvas[id$="-hhi"])) .swu-apr-canvas-wrap--trend {
        height: 280px;
    }

    /* Stage gap chart: shorter on mobile */
    .swu-apr-canvas-wrap--stage-gap { height: 380px; }

    /* Charts trio: single column */
    .swu-apr-charts-trio { grid-template-columns: 1fr !important; }

    /* Spotlight: full-width stats */
    .swu-apr-spotlight { width: calc(100vw - 32px); left: 16px; right: 16px; }
    .swu-apr-spotlight__stats { flex-wrap: wrap; }
    .swu-apr-spotlight__stat { flex: 1 1 calc(50% - 8px); min-width: 120px; }

    /* H2H: stack columns */
    .swu-apr-h2h__search-row { flex-direction: column; }
    .swu-apr-h2h__vs { display: none; }  /* hide VS on mobile */
    .swu-apr-h2h__cards { grid-template-columns: 1fr 1fr; }
    .swu-apr-h2h__matchup-pcts { font-size: 15px; }
    .swu-apr-h2h__names { flex-direction: column; gap: 4px; }
    .swu-apr-h2h__name:last-child { text-align: left; }

    /* Heatmap: horizontal scroll allowed */
    .swu-apr-heatmap-wrap { overflow-x: auto; }

    /* Movers: single column */
    .swu-apr-movers-split { grid-template-columns: 1fr; }

    /* Season nav badges: wrap */
    .swu-apr-season-nav { flex-wrap: wrap; }
}

@media (max-width: 500px) {
    .swu-apr-dashboard { padding: 12px !important; }
    .swu-apr-chart-box { padding: 12px; }
    .swu-apr-h2h__cards { grid-template-columns: 1fr; }
    .swu-apr-toggle__btn { padding: 5px 8px; font-size: 10px; }
    .swu-apr-h2h__card-val { font-size: 15px; }
    .swu-apr-h2h__matchup-pcts { font-size: 13px; }

    /* Trend chart: compact on small phones */
    .swu-apr-chart-box:not(:has(canvas[id$="-hhi"])) .swu-apr-canvas-wrap--trend {
        height: 220px;
    }
    .swu-apr-canvas-wrap--stage-gap { height: 300px; }
}

.swu-apr-chart-box {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    /* overflow:hidden set in main definition above — no override needed */
}


/* ── Controls row: let tip popups escape ────────────────────────────────────── */
.swu-apr-controls    { overflow: visible; }
.swu-apr-toggle      { overflow: visible; }
.swu-apr-tier-filter { overflow: visible; }
.swu-apr-dashboard-header { overflow: visible; }
/* H2H search: dropdown escapes its wrapper */
.swu-apr-h2h__search-wrap { overflow: visible; }
/* Inline chart explainer text */
.swu-apr-chart-explainer {
    font-size: 11px;
    color: rgba(180,180,220,.5);
    margin: 2px 0 10px;
    line-height: 1.5;
    font-style: italic;
}




/* ── New chart canvas wrappers: ensure height is applied ─────────────────── */
.swu-apr-charts-row .swu-apr-canvas-wrap[style*="height:320px"],
.swu-apr-charts-row .swu-apr-canvas-wrap[style*="height: 320px"] {
    height: 320px !important;
    min-height: 280px;
    display: block;
    position: relative;
}
/* Population vs Performance bubble: ensure height */
.swu-apr-charts-row + .swu-apr-chart-box .swu-apr-canvas-wrap--scatter,
.swu-apr-chart-box .swu-apr-canvas-wrap--scatter {
    height: 420px;
    min-height: 360px;
    display: block;
    position: relative;
}


/* ── Right column: three stacked charts ─────────────────────────────────── */
/* Meta Movers: natural height, not stretched */
.swu-apr-charts-row__right .swu-apr-movers-col {
    flex: 0 0 auto;
}
/* HHI mini: fixed compact height */
.swu-apr-hhi-mini-box {
    flex: 0 0 auto;
}
.swu-apr-canvas-wrap--hhi-mini {
    height: 110px;
    position: relative;
    display: block;
    width: 100%;
}
.swu-apr-hhi-top-arch {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.swu-apr-hhi-top-arch__row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 10.5px;
    flex-wrap: wrap;
}
.swu-apr-hhi-top-arch__tag {
    font-weight: 800;
    letter-spacing: 0.05em;
    color: rgba(200,200,230,.4);
    font-size: 9px;
    flex-shrink: 0;
}
.swu-apr-hhi-top-arch__name {
    color: rgba(230,230,255,.9);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.swu-apr-hhi-top-arch__pct {
    color: rgba(200,200,230,.75);
    font-weight: 700;
    flex-shrink: 0;
}
.swu-apr-hhi-top-arch__badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
/* Stage Analysis: takes remaining space, min height so it stays readable */
.swu-apr-charts-row__right .swu-apr-chart-box:last-child {
    flex: 1 1 auto;
    min-height: 0;
}
/* Scatter canvas inside right column: fixed sensible height */
.swu-apr-charts-row__right .swu-apr-canvas-wrap--scatter {
    height: 280px !important;
    min-height: 220px;
}
/* Tighten chart box padding in right column to save vertical space */
.swu-apr-charts-row__right .swu-apr-chart-box {
    padding: 14px 16px 12px;
}
/* HHI mini: reduce chart title margin */
.swu-apr-hhi-mini-box .swu-apr-chart-title {
    font-size: 13px;
    margin-bottom: 2px;
}
.swu-apr-hhi-mini-box .swu-apr-chart-sub {
    margin-bottom: 6px;
    font-size: 10px;
}


/* ── Sticky H2H prompt bar ─────────────────────────────────────────────────── */
.swu-apr-sticky-h2h {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, rgba(78,154,241,0.12) 0%, rgba(126,211,33,0.07) 100%);
    border: 1px solid rgba(78,154,241,0.3);
    border-radius: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 10;
}
.swu-apr-sticky-h2h__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4e9af1;
    white-space: nowrap;
    flex-shrink: 0;
}
.swu-apr-sticky-h2h__inputs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.swu-apr-sticky-h2h__field {
    flex: 1;
    min-width: 160px;
    position: relative;
    overflow: visible;
}
.swu-apr-sticky-h2h__input {
    width: 100%;
    padding: 7px 10px;
    background: rgba(5,5,20,0.6);
    border: 1px solid rgba(78,154,241,0.25);
    border-radius: 6px;
    color: rgba(230,230,255,0.9);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s;
}
.swu-apr-sticky-h2h__input:focus {
    border-color: rgba(78,154,241,0.6);
    background: rgba(78,154,241,0.06);
}
.swu-apr-sticky-h2h__vs {
    font-size: 10px;
    font-weight: 900;
    color: rgba(200,200,230,.35);
    letter-spacing: 0.12em;
    white-space: nowrap;
    flex-shrink: 0;
}
.swu-apr-sticky-h2h__btn {
    padding: 7px 18px;
    background: #4e9af1;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: opacity .15s, transform .1s;
}
.swu-apr-sticky-h2h__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.swu-apr-sticky-h2h__btn:not(:disabled):hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
.swu-apr-sticky-h2h__divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
    margin: 0 2px;
}
.swu-apr-sticky-h2h__label--spot {
    color: #7ed321;
}
.swu-apr-sticky-h2h__field--spot {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
}
@media (max-width: 900px) {
    .swu-apr-sticky-h2h__divider { display: none; }
    .swu-apr-sticky-h2h__field--spot { max-width: none; width: 100%; }
}
@media (max-width: 600px) {
    .swu-apr-sticky-h2h { flex-direction: column; align-items: stretch; }
    .swu-apr-sticky-h2h__inputs { flex-direction: column; }
    .swu-apr-sticky-h2h__vs { text-align: center; }
}


/* ── The Bounty Board ─────────────────────────────────────────────────────── */
.swu-apr-bounty-board {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.swu-apr-bounty-board__head,
.swu-apr-bounty-board__row {
    display: grid;
    grid-template-columns: 28px minmax(0,1.3fr) 56px minmax(0,2fr);
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
}
.swu-apr-bounty-board__head {
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 2px;
}
.swu-apr-bounty-board__head-main,
.swu-apr-bounty-board__head-components span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(200,200,230,.45);
    cursor: help;
    text-align: center;
}
.swu-apr-bounty-board__head-components {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.swu-apr-bounty-board__row {
    border-radius: 6px;
    background: rgba(255,255,255,0.015);
    cursor: pointer;
    transition: background .15s;
}
.swu-apr-bounty-board__row:hover {
    background: rgba(255,255,255,0.05);
}
.swu-apr-bounty-board__rank {
    font-size: 11px;
    font-weight: 800;
    color: rgba(200,200,230,.4);
    text-align: center;
}
.swu-apr-bounty-board__name {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.swu-apr-bounty-board__main {
    font-size: 19px;
    font-weight: 900;
    text-align: center;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.swu-apr-bounty-board__components {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.swu-apr-bounty-board__comp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 2px 2px;
    background: rgba(0,0,0,0.2);
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(220,220,255,.85);
    font-variant-numeric: tabular-nums;
}
.swu-apr-bounty-board__comp em {
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(180,180,215,.5);
    text-transform: uppercase;
}
.swu-apr-bounty-board__dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 5px;
    border: 1px solid rgba(255,255,255,0.25);
    vertical-align: middle;
}
.swu-apr-bounty-board__empty {
    padding: 20px;
    text-align: center;
    color: rgba(200,200,230,.5);
    font-size: 12px;
    font-style: italic;
}
@media (max-width: 760px) {
    .swu-apr-bounty-board__head,
    .swu-apr-bounty-board__row {
        grid-template-columns: 28px minmax(0,1fr) 56px;
        grid-template-areas: "rank name main" "components components components";
        row-gap: 6px;
    }
    .swu-apr-bounty-board__rank   { grid-area: rank; }
    .swu-apr-bounty-board__name   { grid-area: name; }
    .swu-apr-bounty-board__main   { grid-area: main; font-size: 20px; }
    .swu-apr-bounty-board__components,
    .swu-apr-bounty-board__head-components { grid-area: components; }
    .swu-apr-bounty-board__head-main { display: none; }
}


/* ── Current APR Rankings (HTML list, replaces the old Chart.js bar chart) ─── */
.swu-apr-apr-rankings {
    display: flex;
    flex-direction: column;
    gap: 1px;
    /* All 20 rows are meant to fit without scrolling — no max-height/overflow */
}
.swu-apr-apr-rankings__row {
    display: grid;
    grid-template-columns: 24px minmax(0,1.4fr) minmax(0,1.6fr);
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.swu-apr-apr-rankings__row:hover {
    background: rgba(255,255,255,0.04);
}
.swu-apr-apr-rankings__row--dim {
    opacity: 0.25;
}
.swu-apr-apr-rankings__rank {
    font-size: 11px;
    font-weight: 800;
    color: rgba(200,200,230,.4);
    text-align: center;
}
.swu-apr-apr-rankings__name-box {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px 2px 3px;
    border: 1.5px solid;
    border-radius: 20px;
    min-width: 0;
}
.swu-apr-apr-rankings__tier-badge {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    color: #0a0a1e;
}
.swu-apr-apr-rankings__name {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(230,230,255,.92);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.swu-apr-apr-rankings__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.25);
}
.swu-apr-apr-rankings__bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.swu-apr-apr-rankings__bar-track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
/* Diverging bar: fills are absolutely positioned from a center zero-line
   at 50%, growing right for positive values and left for negative ones —
   so direction alone communicates sign, not just a subtler opacity. */
.swu-apr-apr-rankings__bar-zero {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.18);
    z-index: 1;
}
.swu-apr-apr-rankings__bar-fill {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    transition: width .3s;
}
.swu-apr-apr-rankings__bar-fill--neg {
    opacity: 0.85;
}
.swu-apr-apr-rankings__value {
    flex-shrink: 0;
    width: 52px;
    text-align: right;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(126,211,33,.9);
}
.swu-apr-apr-rankings__value--neg {
    color: rgba(224,80,80,.9);
}
.swu-apr-apr-rankings__empty {
    padding: 24px;
    text-align: center;
    color: rgba(200,200,230,.5);
    font-size: 12px;
    font-style: italic;
}
@media (max-width: 640px) {
    .swu-apr-apr-rankings__row {
        grid-template-columns: 24px minmax(0,1fr);
        grid-template-areas: "rank name" "rank bar";
        row-gap: 4px;
    }
    .swu-apr-apr-rankings__rank { grid-area: rank; }
    .swu-apr-apr-rankings__name-box { grid-area: name; }
    .swu-apr-apr-rankings__bar-wrap { grid-area: bar; }
}


/* ── Shared archetype "name box" — tier border + tier badge + aspect dots.
   Used in Spotlight header, H2H headers. Two sizes: default (H2H, inline
   with other stat text) and --lg (Spotlight, the page's biggest header). ── */
.swu-apr-name-box {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 3px;
    border: 1.5px solid;
    border-radius: 20px;
    vertical-align: middle;
    max-width: 100%;
}
.swu-apr-name-box__tier {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8.5px;
    font-weight: 900;
    color: #0a0a1e;
}
.swu-apr-name-box__text {
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.swu-apr-name-box__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.3);
}
.swu-apr-name-box--lg {
    padding: 4px 14px 4px 5px;
    gap: 7px;
}
.swu-apr-name-box--lg .swu-apr-name-box__tier {
    width: 22px;
    height: 22px;
    font-size: 12px;
}
.swu-apr-name-box--lg .swu-apr-name-box__text {
    font-size: 16px;
}
.swu-apr-name-box--lg .swu-apr-name-box__dot {
    width: 10px;
    height: 10px;
}


/* ── Custom donut legend (replaces Chart.js's built-in legend) ─────────────── */
/* No fixed height / overflow on the row or legend — up to 13 rows (12 slices
   + Other) need to all fit without scrolling, and a fixed height forced
   scrolling right around that same row count. The canvas keeps its own
   fixed height for a consistent donut size; the legend grows to whatever
   height its content actually needs, and the row (donut-layout) grows to
   match, so nothing ever gets clipped or needs its own scrollbar. */
.swu-apr-donut-layout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.swu-apr-canvas-wrap--donut {
    flex: 0 0 auto;
    width: 50%;
    height: 240px;
    position: relative;
}
.swu-apr-donut-legend {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.swu-apr-donut-legend__row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
}
.swu-apr-donut-legend__row:hover {
    background: rgba(255,255,255,0.06);
}
.swu-apr-donut-legend__swatch {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 3px;
}
.swu-apr-donut-legend__name {
    flex: 1;
    min-width: 0;
    font-size: 10.5px;
    color: rgba(220,220,255,.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.swu-apr-donut-legend__dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
}
.swu-apr-donut-legend__pct {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: rgba(200,200,230,.6);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
    .swu-apr-donut-layout {
        flex-direction: column;
    }
    .swu-apr-canvas-wrap--donut {
        width: 100%;
        height: 220px;
    }
}


/* ── Custom HTML tooltip (replaces Chart.js's built-in canvas tooltip) ─────── */
.swu-apr-custom-tooltip {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity .1s;
    background: rgba(13,13,46,.97);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: rgba(220,220,255,.85);
    z-index: 20;
    min-width: 170px;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.swu-apr-custom-tooltip__title {
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.swu-apr-custom-tooltip__row {
    line-height: 1.6;
}
.swu-apr-custom-tooltip__row strong {
    color: rgba(240,240,255,.95);
}
.swu-apr-custom-tooltip__dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(255,255,255,.3);
}


/* ── Custom APR Trends legend (replaces Chart.js's built-in legend) ────────── */
.swu-apr-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.swu-apr-trend-legend__row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.swu-apr-trend-legend__row:hover {
    background: rgba(255,255,255,0.06);
}
.swu-apr-trend-legend__row--hidden {
    opacity: 0.35;
}
.swu-apr-trend-legend__row--hidden .swu-apr-donut-legend__name {
    text-decoration: line-through;
}
.swu-apr-trend-legend__row--static {
    cursor: default;
}
.swu-apr-trend-legend__row--static:hover {
    background: none;
}


/* ── Cut Efficiency Leaders (HTML list, replaces Chart.js bar chart) ───────── */
.swu-apr-cuteff-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.swu-apr-cuteff-list__row {
    display: grid;
    grid-template-columns: 24px minmax(0,1.3fr) minmax(0,1.4fr);
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: background .15s;
}
.swu-apr-cuteff-list__row:hover {
    background: rgba(255,255,255,0.05);
}
.swu-apr-cuteff-list__name-box {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border: 1.5px solid;
    border-radius: 20px;
    min-width: 0;
}
.swu-apr-cuteff-list__name {
    font-size: 11.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}


/* ── Stage Gap (HTML list, replaces the Chart.js grouped bar chart) ────────── */
.swu-apr-stagegap-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.swu-apr-stagegap-list__row {
    display: grid;
    grid-template-columns: 24px minmax(0,1.2fr) minmax(0,2.2fr);
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s;
}
.swu-apr-stagegap-list__row:hover {
    background: rgba(255,255,255,0.05);
}
.swu-apr-stagegap-list__bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.swu-apr-stagegap-list__bar-line {
    display: flex;
    align-items: center;
    gap: 6px;
}
.swu-apr-stagegap-list__bar-label {
    flex-shrink: 0;
    width: 34px;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(180,180,215,.55);
    text-align: right;
}
.swu-apr-stagegap-list__bar-track {
    flex: 1;
    height: 9px;
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.swu-apr-stagegap-list__bar-zero {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.18);
    z-index: 1;
}
.swu-apr-stagegap-list__bar-fill {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    transition: width .3s;
}
.swu-apr-stagegap-list__bar-fill--neg {
    opacity: 0.85;
}
.swu-apr-stagegap-list__bar-value {
    flex-shrink: 0;
    width: 48px;
    text-align: right;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(126,211,33,.9);
}
.swu-apr-stagegap-list__bar-value--neg {
    color: rgba(224,80,80,.9);
}
@media (max-width: 640px) {
    .swu-apr-stagegap-list__row {
        grid-template-columns: 22px minmax(0,1fr);
        grid-template-areas: "rank name" "rank bars";
        row-gap: 4px;
    }
    .swu-apr-stagegap-list__row > .swu-apr-apr-rankings__rank { grid-area: rank; }
    .swu-apr-stagegap-list__row > .swu-apr-cuteff-list__name-box { grid-area: name; }
    .swu-apr-stagegap-list__row > .swu-apr-stagegap-list__bars { grid-area: bars; }
}