/* QueueDex Analysis v2 */
.analysis-filters{margin:0 0 15px;padding:18px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.filter-heading,.analysis-heading,.visual-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.filter-heading h2,.analysis-heading h2{margin:6px 0 0}.section-kicker{color:var(--cyan);font:600 8px var(--mono);letter-spacing:.13em;text-transform:uppercase}.text-button,.info-button{border:0;background:none;color:#70cdbf;cursor:pointer;font:9px var(--mono)}.filter-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:16px}.filter-grid label{display:grid;gap:5px}.filter-grid label span{color:#788694;font:8px var(--mono);text-transform:uppercase}.filter-grid input,.filter-grid select,.visual-title select{width:100%;height:38px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:#11171d;color:#dbe2e7;font-size:10px}.scope-line{margin-top:12px;color:#8d9aa7;font:9px var(--mono)}.headline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:42px}.metric-card{min-height:108px;padding:15px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;text-align:left;cursor:pointer}.metric-card:hover{border-color:#4a625f}.metric-card span,.metric-card small{display:block}.metric-card span{color:#8b99a7;font:600 8px var(--mono);text-transform:uppercase;letter-spacing:.07em}.metric-card strong{display:block;margin:13px 0 6px;color:#edf1ef;font:600 20px var(--mono)}.metric-card small{color:#74818e;font:9px var(--mono)}.analysis-section{margin:0 0 54px}.analysis-heading{margin-bottom:14px}.analysis-heading p{max-width:520px;margin:0;color:#84919d;font-size:11px}.visual-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.visual-card{padding:17px;border:1px solid var(--line);border-radius:9px;background:var(--panel);overflow:hidden}.visual-title{align-items:flex-start;margin-bottom:15px}.visual-title h3{margin:0 0 5px;font:600 13px var(--mono)}.visual-title span{color:#788693;font-size:10px}.visual-title select{width:auto;max-width:190px}.bar-chart{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;min-height:220px;padding:12px;border:1px solid #29343e;border-radius:7px;background:#10161b}.chart-bar{display:grid;grid-template-rows:22px 1fr 25px;gap:5px;height:190px;padding:0;border:0;background:none;color:#dfe5e8;cursor:pointer}.chart-bar strong{font:600 10px var(--mono)}.chart-bar i{align-self:end;width:68%;max-height:100%;margin:auto;border-radius:4px 4px 1px 1px;background:linear-gradient(#58d9c8,#209b8d);box-shadow:0 0 14px #35d0bd2a}.chart-bar span{color:#7f8d9a;font:600 8px var(--mono);text-transform:uppercase}.chart-bar:hover i{filter:brightness(1.15)}.compact-bars{grid-template-columns:repeat(6,1fr);min-height:205px}.compact-bars .chart-bar{height:175px}.scatter-chart{position:relative;min-height:320px;padding:15px 15px 28px 55px;border:1px solid #29343e;border-radius:7px;background:#10161b}.scatter-field{position:absolute;left:58px;right:18px;top:16px;bottom:40px;background:repeating-linear-gradient(to bottom,#26313b 0 1px,transparent 1px 25%)}.scatter-dot{position:absolute;width:10px;height:10px;margin:-5px;border:2px solid #16201f;border-radius:50%;background:#45cfba;box-shadow:0 0 8px #35d0bd66;cursor:pointer}.scatter-y{position:absolute;left:10px;top:12px;bottom:34px;display:flex;flex-direction:column;justify-content:space-between;color:#647281;font:8px var(--mono)}.scatter-x{position:absolute;left:58px;right:18px;bottom:12px;display:flex;justify-content:space-between;color:#647281;font:8px var(--mono)}.comparison-panels{display:grid;grid-template-columns:1fr 1fr;gap:9px}.comparison-card{padding:19px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:inherit;text-align:left;cursor:pointer}.comparison-card>span{color:#72cebf;font:600 9px var(--mono);text-transform:uppercase}.comparison-card>strong{display:block;margin:14px 0 5px;font:600 27px var(--mono)}.comparison-card>small{color:#7b8995}.comparison-card dl{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:18px 0 0}.comparison-card dl div{padding:9px;border:1px solid #29333d;border-radius:5px;background:#12181e}.comparison-card dt{color:#75828e;font:7px var(--mono);text-transform:uppercase}.comparison-card dd{margin:6px 0 0;font:600 10px var(--mono)}.ranked-chart{display:grid;gap:5px}.rank-row{display:grid;grid-template-columns:150px 1fr 65px;grid-template-rows:auto auto;gap:5px 10px;align-items:center;padding:9px;border:1px solid #29333d;border-radius:6px;background:#12181e;color:inherit;text-align:left;cursor:pointer}.rank-row>span{font:500 9px var(--mono)}.rank-row em{display:block;margin-top:3px;color:#c99d4d;font:7px var(--mono)}.rank-row i{height:8px;border-radius:99px;background:#202a32;overflow:hidden}.rank-row i b{display:block;height:100%;background:#3bbca9}.rank-row>strong{text-align:right;font:600 9px var(--mono)}.rank-row>small{grid-column:1/-1;color:#6f7c88;font:7px var(--mono)}.limited-sets{padding:8px;border:1px solid #29333d;border-radius:6px}.limited-sets summary{cursor:pointer;color:#8d9aa6;font:8px var(--mono)}.limited-sets button{display:block;width:100%;padding:7px;border:0;background:none;color:#9faab4;text-align:left;font:8px var(--mono);cursor:pointer}.record-tabs{display:flex;gap:5px;margin-bottom:8px}.record-tabs button{padding:8px 11px;border:1px solid var(--line);border-radius:5px;background:#151b21;color:#929faa;font:9px var(--mono);cursor:pointer}.record-tabs button.active{color:#fff;border-color:#3c675f;background:#173029}.record-table{overflow:auto;border:1px solid var(--line);border-radius:8px}.record-table table{width:100%;min-width:1100px;border-collapse:collapse}.record-table th,.record-table td{padding:9px;border-bottom:1px solid #29333d;text-align:left;font-size:9px}.record-table th{color:#9ba8b5;background:#11171d;font:600 8px var(--mono);text-transform:uppercase}.drill-panel{margin-top:12px;padding:12px;border:1px solid #3a5b56;border-radius:7px;background:#121b19}.close-detail{float:right;border:0;background:none;color:#73cdbf;font:8px var(--mono);cursor:pointer}.detail-heading{display:flex;justify-content:space-between;gap:10px;margin:12px 0 7px;color:#9ca9b4;font:8px var(--mono);text-transform:uppercase}.methodology-v2{margin:40px 0 0;border:1px solid var(--line);border-radius:8px;background:#13191f}.methodology-v2 summary{padding:14px;cursor:pointer;font:500 10px var(--mono)}.methodology-v2>div{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;border-top:1px solid var(--line)}.methodology-v2 h3{font-size:10px}.methodology-v2 p{color:#8e9ba7;font-size:10px;line-height:1.6}.empty{padding:30px;text-align:center;color:#778592}
@media(max-width:1100px){.filter-grid{grid-template-columns:repeat(4,1fr)}.headline-grid{grid-template-columns:repeat(2,1fr)}.comparison-card dl{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.filter-grid{grid-template-columns:repeat(2,1fr)}.filter-heading,.analysis-heading{align-items:flex-start;flex-direction:column}.headline-grid,.visual-grid,.comparison-panels{grid-template-columns:1fr}.bar-chart{gap:4px;padding:8px}.chart-bar i{width:82%}.scatter-chart{min-height:290px}.comparison-card dl{grid-template-columns:repeat(2,1fr)}.methodology-v2>div{grid-template-columns:1fr}.rank-row{grid-template-columns:115px 1fr 55px}.record-table{margin:0 -8px}.analysis-filters{padding:14px}}
@media(max-width:430px){.filter-grid{grid-template-columns:1fr}.headline-grid{grid-template-columns:1fr}.compact-bars{overflow-x:auto;grid-template-columns:repeat(6,70px)}.weekday-chart{overflow-x:auto;grid-template-columns:repeat(7,55px)}}

/* QUEUEDEX ANALYSIS TIDY: GROUNDED BAR CHARTS */
.visual-grid > .visual-card.wide {
    grid-column: 1 / -1;
}

.bar-chart {
    position: relative;
    align-items: stretch;
    padding: 12px 12px 16px;
}

/* A single shared zero line stops short columns looking suspended. */
.bar-chart::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 12px;
    bottom: 40px;
    height: 1px;
    background: #34414b;
    pointer-events: none;
}

.chart-bar {
    position: relative;
    z-index: 2;
    grid-template-rows: 22px minmax(0, 1fr) 25px;
}

.chart-bar i {
    align-self: end;
    justify-self: center;
    margin: 0 auto;
    min-height: 0;
    box-shadow: none;
    border-bottom: 1px solid #6ee1d1;
}

.chart-bar span {
    align-self: end;
}

.compact-bars {
    min-height: 235px;
}

.compact-bars .chart-bar {
    height: 205px;
}

@media (max-width: 760px) {
    .visual-grid > .visual-card.wide {
        grid-column: auto;
    }
}


/* QUEUEDEX ANALYSIS COMPACT LAYOUT */
.queue-overview-grid,
.duration-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.queue-overview-grid .visual-card,
.duration-grid .visual-card {
    min-width: 0;
}

.queue-overview-grid .bar-chart,
.queue-overview-grid .scatter-chart {
    min-height: 285px;
}

/* Only rendered weekday categories receive a grid column. */
.weekday-chart {
    grid-template-columns: repeat(var(--weekday-count, 4), minmax(58px, 1fr));
}

.zero-day-note {
    min-height: 14px;
    margin: 9px 0 0;
    color: #65737f;
    font: 8px var(--mono);
    letter-spacing: .02em;
}

/* Zero-value bars elsewhere should not leave a glowing sliver. */
.chart-bar i[style*="height:0%"],
.chart-bar i[style*="height: 0%"] {
    display: none;
}

.duration-grid .compact-bars {
    grid-template-columns: repeat(6, minmax(48px, 1fr));
}

@media (max-width: 980px) {
    .queue-overview-grid,
    .duration-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .weekday-chart {
        grid-template-columns: repeat(var(--weekday-count, 4), minmax(54px, 1fr));
        overflow-x: auto;
    }
}


/* QUEUEDEX ANALYSIS CHART POLISH */
.bar-chart {
    grid-template-columns: repeat(var(--bar-count, 6), minmax(52px, 1fr));
    min-height: 220px;
    padding: 16px 12px 12px;
}

.chart-bar {
    display: grid;
    grid-template-rows: minmax(0, 1fr) 26px;
    height: 188px;
    gap: 7px;
}

.chart-bar i {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-self: end;
    width: min(72%, 120px);
    min-height: 0;
    padding-top: 8px;
    overflow: hidden;
    color: #07130f;
    text-shadow: 0 1px rgba(255,255,255,.22);
}

.chart-bar i strong {
    position: relative;
    z-index: 2;
    color: #07130f;
    font: 700 10px var(--mono);
}

.chart-bar > strong {
    display: none;
}

.chart-bar.is-zero i {
    display: none;
}

.chart-bar span {
    align-self: start;
    text-align: center;
}

/* The weekday visual no longer needs the depth of a full-width chart. */
.weekday-chart {
    min-height: 205px;
    padding-top: 12px;
}

.weekday-chart .chart-bar {
    height: 170px;
}

.weekday-chart .chart-bar i {
    width: min(64%, 105px);
}

.zero-day-note {
    margin-top: 6px;
}

.scatter-chart {
    min-height: 285px;
}

.scatter-field {
    background: repeating-linear-gradient(to bottom,#26313b 0 1px,transparent 1px 33.333%);
}

@media (max-width: 760px) {
    .bar-chart {
        grid-template-columns: repeat(var(--bar-count, 4), minmax(54px, 1fr));
    }
    .chart-bar i {
        width: 78%;
    }
}


/* QUEUEDEX ANALYSIS CHART REFINEMENT */
/* Stretch each category across the complete plot height so every column sits on
   the same visible zero line rather than ending above it. */
.bar-chart {
    align-items: stretch;
    padding-bottom: 12px;
}

.bar-chart::after {
    bottom: 37px;
    background: #43505a;
}

.chart-bar,
.compact-bars .chart-bar,
.weekday-chart .chart-bar {
    align-self: stretch;
    height: auto;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) 25px;
}

.chart-bar i {
    align-self: end;
    margin-bottom: 0;
    border-bottom: 0;
}

/* QueueDex's existing warm white is clearer than black against teal columns. */
.chart-bar i strong {
    color: #f2f1e8;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.weekday-chart {
    min-height: 200px;
}

/* Scatter references: 15:00–18:00 is always visible and visually identified as
   the prime queue window, while the outer scale still follows the data. */
.scatter-field {
    overflow: visible;
    background: none;
}

.scatter-field::before,
.scatter-field::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #26313b;
    pointer-events: none;
}

.scatter-field::before { top: 0; }
.scatter-field::after { bottom: 0; }

.scatter-dot {
    z-index: 3;
}

.scatter-y {
    display: block;
}

.scatter-y span {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
}


/* QUEUEDEX ANALYSIS FINAL CHART POLISH */
/* Compact, grounded weekday plot: the baseline is the floor of the plot rather
   than a line floating above a large empty footer. */
.weekday-chart {
    min-height: 0;
    height: 190px;
    padding: 12px 12px 0;
    align-items: stretch;
    border-bottom: 0;
}

.weekday-chart::after {
    left: 12px;
    right: 12px;
    bottom: 25px;
    background: #55616b;
}

.weekday-chart .chart-bar {
    height: 178px;
    grid-template-rows: minmax(0, 1fr) 25px;
}

.weekday-chart .chart-bar i {
    width: min(62%, 100px);
    margin-bottom: 0;
}

/* White labels inside all teal bars. */
.chart-bar i strong {
    color: #f2f1e8 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
}

/* Replace the shaded prime area with clean hourly guides. */
.scatter-field {
    overflow: visible;
    background: none !important;
}.scatter-field::before, .scatter-field::after{
    display: none !important;
}

.hour-grid {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #27323b;
    pointer-events: none;
}

.scatter-y {
    display: block;
}

.scatter-y span {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    color: #657583;
}

.scatter-dot {
    z-index: 2;
}

@media (max-width: 760px) {
    .weekday-chart {
        height: 180px;
    }
    .weekday-chart .chart-bar {
        height: 168px;
    }
}
.zero-day-note { margin:8px 0 0; }

/* Clean queue-time plot: crisp markers and subtle hourly guides. */
.scatter-chart { min-height:285px; }
.scatter-field { background:none !important; }
.hour-grid { background:#26323b !important; }
.scatter-dot {
    width: 8px;
    height: 8px;
    margin: -4px;
    border: 1px solid #8ce5d8;
    background: #42c8b5;
    box-shadow: none;
    opacity: .92;
}
.scatter-dot:hover,.scatter-dot:focus-visible { width:12px;height:12px;margin:-6px;background:#f2f1e8;border-color:#42c8b5;outline:none; }
.scatter-y span { color:#71808c; }

@media(max-width:760px){
}

.weekday-chart {
    display: grid;
    grid-template-columns: repeat(var(--bar-count, 4), minmax(58px, 1fr));
    align-items: stretch;
    min-height: 0;
    height: 205px;
    padding: 14px 12px 0;
    border: 1px solid #29343e;
    border-radius: 7px;
    background: #10161b;
}

.weekday-chart::after {
    bottom: 25px;
    background: #46535d;
}

.weekday-chart .chart-bar {
    height: 193px;
    grid-template-rows: minmax(0,1fr) 25px;
}

.weekday-chart .chart-bar i {
    width: min(58%, 96px);
    margin-bottom: 0;
}

/* A softer blue-grey works with the QueueDex palette without the harsh black or
   bright-white clash. Applies to all bar charts. */
.chart-bar i strong {
    color: #d7e1e5 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.62) !important;
}/* All scatter hours are neutral. 15:00 and 18:00 remain guaranteed ticks because
   of the JS scale, but are not highlighted in green. */
.hour-grid{
    height: 1px !important;
    background: #2b3740 !important;
}.scatter-y span{
    color: #71808c !important;
    font-weight: 400 !important;
}

.scatter-dot {
    width: 8px;
    height: 8px;
    margin: -4px;
    border: 1px solid #80d8cc;
    background: #43bbaa;
    box-shadow: none !important;
    opacity: .9;
}

.scatter-dot:hover,
.scatter-dot:focus-visible {
    width: 10px;
    height: 10px;
    margin: -5px;
    background: #d7e1e5;
    border-color: #43bbaa;
    box-shadow: none !important;
}

@media(max-width:760px){
 .weekday-chart{height:190px;grid-template-columns:repeat(var(--bar-count,4),minmax(52px,1fr));overflow-x:auto}
 .weekday-chart .chart-bar{height:178px}
}


/* QUEUEDEX WEEKDAY AXIS CHART */
.weekday-axis-chart {
    position: relative;
    min-height: 225px;
    padding: 14px 14px 30px 42px;
    border: 1px solid #29343e;
    border-radius: 7px;
    background: #10161b;
}

.weekday-y-axis {
    position: absolute;
    left: 8px;
    top: 14px;
    bottom: 52px;
    width: 26px;
}

.weekday-y-axis span {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    color: #71808c;
    font: 7px var(--mono);
}

.weekday-plot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--weekday-count,4), minmax(58px,1fr));
    gap: 14px;
    height: 181px;
}

.weekday-gridline {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #2a3640;
    pointer-events: none;
}

.weekday-gridlines {
    position: absolute;
    inset: 0 0 22px;
    pointer-events: none;
}

.weekday-gridline:last-of-type {
    background: #53606a;
}

.weekday-column {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(0,1fr) 22px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.weekday-column > i {
    position: relative;
    align-self: end;
    justify-self: center;
    display: flex;
    justify-content: center;
    width: min(62%,96px);
    min-height: 12px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg,#58d3c3,#2fa797);
}

.weekday-column > i strong,
.chart-bar i strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 22px;
    height: 17px;
    margin-top: 6px;
    padding: 0 5px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 8px;
    background: rgba(8,27,29,.82);
    color: #e8f0ef !important;
    text-shadow: none !important;
    font: 700 8px var(--mono);
}

.weekday-column > span {
    align-self: end;
    color: #7f98ad;
    text-align: center;
    font: 600 7px var(--mono);
    text-transform: uppercase;
}

.weekday-column:hover > i {
    filter: brightness(1.08);
}

/* Hide superseded generic weekday-chart decoration. */
.weekday-axis-chart::after { display: none; }

@media(max-width:760px){
 .weekday-axis-chart{padding-left:36px;overflow-x:auto}
 .weekday-plot{grid-template-columns:repeat(var(--weekday-count,4),minmax(58px,1fr));min-width:260px}
}


/* QUEUEDEX ANALYSIS DARK FILTERS AND DATES */
.analysis-filter-group {
    position: relative;
    display: grid;
    gap: 5px;
    min-width: 0;
}
.analysis-filter-group > span {
    color: #788694;
    font: 8px var(--mono);
    text-transform: uppercase;
}
.analysis-multiselect { position: relative; min-width: 0; }
.analysis-multiselect > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: #11171d;
    color: #dbe2e7;
    cursor: pointer;
    font-size: 10px;
    list-style: none;
}
.analysis-multiselect > summary::-webkit-details-marker { display:none; }
.analysis-multiselect > summary::after { content:'⌄'; color:#8fa0ae; font-size:12px; }
.analysis-multiselect[open] > summary { border-color:#49736d; }
.analysis-multiselect[open] > summary::after { content:'⌃'; }
.analysis-filter-popover {
    position: absolute;
    z-index: 80;
    top: calc(100% + 5px);
    left: 0;
    width: max(100%, 245px);
    max-height: 330px;
    overflow: hidden;
    border: 1px solid #3a4650;
    border-radius: 6px;
    background: #151c22;
    box-shadow: 0 14px 32px rgba(0,0,0,.42);
}
.analysis-filter-actions { display:flex; gap:5px; padding:8px; border-bottom:1px solid #2b3640; }
.analysis-filter-actions button { padding:5px 7px; border:1px solid #34414b; border-radius:4px; background:#10161b; color:#9fadb8; font:8px var(--mono); cursor:pointer; }
.analysis-filter-options { max-height:275px; overflow-y:auto; padding:6px; scrollbar-color:#687680 #151c22; }
.analysis-filter-options label { display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:4px; color:#d5dde3; cursor:pointer; font-size:10px; }
.analysis-filter-options label:hover { background:#1d2830; }
.analysis-filter-options input { width:14px; height:14px; margin:0; accent-color:#3dc8b5; }
.analysis-filter-options label span { color:inherit; font:10px var(--sans,system-ui); text-transform:none; }

/* Native date controls retain the accessible platform picker, but use dark UI. */
.analysis-filters input[type=date],
.analysis-filters input[type=time] {
    color-scheme: dark;
    appearance: auto;
    background:#11171d;
    color:#dbe2e7;
}
.analysis-filters input[type=date]::-webkit-calendar-picker-indicator,
.analysis-filters input[type=time]::-webkit-calendar-picker-indicator {
    filter: invert(.82) sepia(.08) saturate(.55) hue-rotate(160deg);
    opacity:.85;
    cursor:pointer;
}
.analysis-filters input[type=date]:focus,
.analysis-filters input[type=time]:focus,
.analysis-multiselect > summary:focus-visible {
    outline:2px solid rgba(61,200,181,.38);
    outline-offset:1px;
}

@media(max-width:760px){
 .analysis-filter-popover{position:fixed;z-index:200;left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:min(70vh,470px)}
 .analysis-filter-options{max-height:calc(min(70vh,470px) - 52px)}
}

/* Match the homepage's clearer card, filter, and table hierarchy. */
.analysis-filters {
    border-color: #3a4652;
    background: linear-gradient(145deg, #1a222a 0%, #151b22 76%);
    box-shadow: 0 10px 28px #0003;
}

.filter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.advanced-filter-group {
    grid-column: 1 / -1;
    min-width: 0;
    border-top: 1px solid #303b45;
}

.advanced-filter-group > summary {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #aebac4;
    cursor: pointer;
    font: 600 10px var(--mono);
    list-style: none;
}

.advanced-filter-group > summary::-webkit-details-marker {
    display: none;
}

.advanced-filter-group > summary::after {
    content: "⌄";
    margin-left: auto;
    color: #8fa0ae;
}

.advanced-filter-group[open] > summary::after {
    content: "⌃";
}

.advanced-filter-group > summary:hover,
.advanced-filter-group > summary:focus-visible {
    color: #d7fff7;
}

.advanced-filter-group > summary:focus-visible {
    outline: 2px solid #35c8b5;
    outline-offset: 2px;
}

.advanced-filter-count {
    margin-left: 0;
    padding: 4px 7px;
    border: 1px solid #365750;
    border-radius: 999px;
    background: #172722;
    color: #8ebdb8;
    font: 500 9px var(--mono);
}

.advanced-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 2px 0 4px;
}

.filter-grid label > span,
.analysis-filter-group > span {
    color: #8b9aa7;
    font-size: 9px;
    letter-spacing: .04em;
}

.filter-grid input,
.filter-grid select,
.analysis-multiselect > summary {
    box-sizing: border-box;
    height: 44px;
    border-color: #3b4854;
    background: #151c23;
    font-size: 11px;
}

.filter-grid input:focus,
.filter-grid select:focus,
.visual-title select:focus,
.analysis-multiselect > summary:focus-visible {
    outline: 2px solid #35c8b566;
    outline-offset: 1px;
    border-color: #35c8b5;
}

.analysis-multiselect > summary:hover,
.analysis-multiselect[open] > summary {
    border-color: #4d746f;
    background: #1a252b;
}

.analysis-filter-popover {
    border-color: #4a5a66;
    box-shadow: 0 16px 38px #000a;
}

.analysis-filter-actions button {
    min-height: 32px;
    padding: 0 10px;
    border-color: #35444e;
    border-radius: 5px;
    background: #1b252c;
    font-size: 10px;
}

.analysis-filter-actions button:hover,
.analysis-filter-actions button:focus-visible,
.text-button:hover,
.text-button:focus-visible {
    color: #b8fff3;
    outline-color: #35c8b5;
}

.scope-line {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid #303b45;
    color: #9baab6;
    line-height: 1.6;
}

.metric-card,
.comparison-card {
    border-color: #35434e;
    border-top: 2px solid #35c8b5;
    border-radius: 9px;
    background: linear-gradient(145deg, #1b242c 0%, #151b22 76%);
    box-shadow: 0 8px 22px #0003;
    transition: border-color 160ms ease, transform 160ms ease;
}

.metric-card:hover,
.comparison-card:hover {
    border-color: #4d6b70;
    transform: translateY(-2px);
}

.metric-card span,
.comparison-card > span {
    color: #8ebdb8;
}

.metric-card small,
.comparison-card > small {
    color: #9aa8b3;
}

.visual-card {
    border-color: #35434e;
    border-top: 2px solid #35c8b5;
    background: linear-gradient(145deg, #1b242c 0%, #151b22 76%);
    box-shadow: 0 8px 22px #0003;
}

.visual-title h3 {
    color: #eef2f4;
}

.analysis-section > .analysis-heading h2 {
    color: #eef2f4;
}

.analysis-section > .analysis-heading p {
    color: #9aa8b3;
}

.record-tabs button {
    min-height: 36px;
    padding: 0 13px;
    border-color: #35434e;
    background: #151c23;
}

.record-tabs button:hover,
.record-tabs button:focus-visible {
    border-color: #4d746f;
    color: #d7fff7;
}

.record-tabs button.active {
    border-color: #39756d;
    background: #173a35;
    color: #a4eee1;
}

.record-table {
    border-color: #3a4652;
    background: #11171d;
    box-shadow: 0 10px 28px #0003;
}

.record-table th {
    background: #1b252e;
    box-shadow: inset 0 -2px 0 #35c8b5;
    color: #e0e7ec;
}

.record-table tbody tr:nth-child(even) td {
    background: #182028;
}

.record-table tbody tr:hover td {
    background: #202d33;
}

.rank-row {
    border-color: #35414c;
    background: #171f26;
}

.rank-row:hover,
.rank-row:focus-visible,
.metric-card:focus-visible,
.comparison-card:focus-visible {
    outline: 2px solid #35c8b5;
    outline-offset: 2px;
}

@media(max-width:760px) {
    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .advanced-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .headline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media(max-width:430px) {
    .filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .advanced-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .headline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(prefers-reduced-motion: reduce) {
    .metric-card,
    .comparison-card {
        transition: none;
    }
}

/* Make chart values and selected drill-downs easier to read. */
.chart-bar {
    border-radius: 5px;
    transition: background-color 140ms ease;
}

.chart-bar:hover,
.chart-bar:focus-visible,
.chart-bar.is-selected {
    outline: none;
    background: #35c8b512;
}

.chart-bar:focus-visible,
.chart-bar.is-selected {
    box-shadow: inset 0 0 0 1px #35c8b580;
}

.chart-bar:disabled {
    cursor: default;
    opacity: .48;
}

.chart-bar i {
    position: relative;
    overflow: visible;
}

.chart-bar i strong {
    position: absolute;
    top: -18px;
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    color: #dbe8e8 !important;
    text-shadow: 0 1px 3px #0b1014 !important;
    font-size: 9px;
}

.chart-bar i {
    background: linear-gradient(180deg, #63dfce 0%, #259c8e 100%);
    box-shadow: 0 2px 10px #35d0bd22;
}

.weekday-column {
    border-radius: 5px;
    transition: background-color 140ms ease;
}

.weekday-column:hover,
.weekday-column:focus-visible,
.weekday-column.is-selected {
    outline: none;
    background: #35c8b512;
}

.weekday-column:focus-visible,
.weekday-column.is-selected {
    box-shadow: inset 0 0 0 1px #35c8b580;
}

.weekday-column > i {
    position: relative;
    overflow: visible;
}

.weekday-column > i strong {
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
    color: #dbe8e8 !important;
    text-shadow: 0 1px 3px #0b1014 !important;
    font-size: 9px;
}

.scatter-dot {
    width: 10px;
    height: 10px;
    margin: -5px;
    border: 1px solid #8ce5d9;
    background: #35c8b5;
    transition: transform 120ms ease, background-color 120ms ease;
}

.scatter-dot:hover,
.scatter-dot:focus-visible,
.scatter-dot.is-selected {
    z-index: 4;
    width: 14px;
    height: 14px;
    margin: -7px;
    outline: 2px solid #d3fff7;
    outline-offset: 2px;
    background: #f2f1e8;
    box-shadow: 0 0 0 5px #35c8b533;
}

.rank-row {
    transition: border-color 140ms ease, background-color 140ms ease;
}

.rank-row:hover,
.rank-row:focus-visible,
.rank-row.is-selected {
    border-color: #4d746f;
    background: #1a282a;
}

.drill-panel {
    position: relative;
    margin-top: 14px;
    padding: 12px;
    border-color: #3e665f;
    background: linear-gradient(145deg, #172320 0%, #121a1a 78%);
}

.detail-heading {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    color: #d4e0e0;
}

.detail-heading > div {
    display: grid;
    gap: 4px;
}

.detail-heading strong {
    color: #b8eee4;
    font: 600 10px var(--mono);
}

.detail-heading > div > span {
    color: #9eafb5;
    font-size: 9px;
}

.close-detail {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid #3c5d57;
    border-radius: 5px;
    background: #172522;
}

.close-detail:hover,
.close-detail:focus-visible {
    border-color: #61bbae;
    color: #c9fff6;
}

.drill-panel .record-table {
    max-height: min(55vh, 480px);
    border-color: #354b48;
}

.drill-panel .record-table th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.detail-empty {
    margin: 0;
    padding: 14px;
    border: 1px solid #354b48;
    border-radius: 6px;
    background: #121a1a;
    color: #a4b3b5;
    font-size: 11px;
}

@media(prefers-reduced-motion: reduce) {
    .chart-bar,
    .weekday-column,
    .scatter-dot,
    .rank-row {
        transition: none;
    }
}