.report-page { padding-bottom: 90px; }
.report-hero { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding-top: 48px; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.report-hero h1 { font-size: clamp(42px, 5vw, 68px); }
.report-lede { max-width: 510px; margin: 27px 0 32px; color: var(--muted); font-size: 17px; line-height: 1.55; }
.data-updated { margin: -18px 0 0; color: var(--muted); font: 10px var(--mono); }
.report-controls { display: flex; gap: 12px; }
.report-controls label, .player-selector { display: grid; gap: 7px; color: var(--muted); font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
select { min-width: 150px; border: 1px solid var(--line); border-radius: 0; padding: 11px 30px 11px 12px; background: var(--surface); color: var(--ink); font: 13px var(--sans); letter-spacing: 0; text-transform: none; }
.selection-section, .cards-section, .depth-section, .weekly-section, .stats-section { padding-top: 70px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.section-heading h2 { font-size: clamp(34px, 4vw, 54px); letter-spacing: -2px; }
.chart-overline { margin: 0 0 9px; color: var(--muted); }
.selection-status, .grade-key { max-width: 310px; margin: 0; color: var(--muted); font: 11px/1.5 var(--mono); text-align: right; }
.player-selectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.player-selector { position: relative; padding: 16px; border: 1px solid var(--line); background: var(--surface); }
.player-selector-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.player-remove { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; margin: -10px -10px 0 0; border: 1px solid #c7433d; border-radius: 50%; padding: 0 0 2px; background: #fff2f0; color: #b3312b; font: 700 23px/1 var(--sans); cursor: pointer; }
.player-remove:hover, .player-remove:focus-visible { border-color: #96251f; background: #f9d9d5; color: #96251f; outline: 2px solid #f0aaa4; outline-offset: 1px; }
.player-search { width: 100%; min-width: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 8px; outline: 0; background: transparent; color: var(--ink); font-family: var(--display); font-size: 16px; font-weight: 600; }
.player-search::placeholder { color: var(--muted); font: 13px var(--sans); font-weight: 400; }
.player-results { position: absolute; z-index: 3; top: 75px; left: 16px; right: 16px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 12px 25px #1723191a; }
.player-result { display: flex; width: 100%; flex-direction: column; gap: 3px; padding: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.player-result:last-child { border-bottom: 0; }.player-result:hover { background: var(--soft-green); }.player-result strong { font: 13px var(--display); }.player-result span { color: var(--muted); font: 10px var(--mono); }
.report-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.report-card { min-width: 0; border: 1px solid var(--line); background: var(--surface); }
.card-player { padding: 20px; border-bottom: 1px solid var(--line); }
.card-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.card-identity img, .headshot-placeholder { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 72px; object-fit: contain; background: var(--soft-green); color: var(--green); font: 20px var(--display); }
.card-identity h3 { overflow-wrap: anywhere; margin: 0 0 5px; font-size: 20px; }
.card-identity p, .sample-note { margin: 0; color: var(--muted); font: 10px var(--mono); }
.sample-note { display: block; margin-top: 17px; }
.grade-list { list-style: none; margin: 0; padding: 0; }
.grade-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 62px; padding: 11px 20px; border-bottom: 1px solid var(--line); }
.grade-list li:last-child { border-bottom: 0; }
.grade-list li span { display: block; font: 13px var(--display); }
.grade-list small { display: block; margin-top: 4px; color: var(--muted); font: 9px var(--mono); }
.grade-list strong { display: grid; place-items: center; width: 42px; height: 32px; flex: 0 0 42px; font: 700 16px var(--display); }
.grade-Aplus, .grade-A { background: #b7eac6; color: #0c5b38; }.grade-Aminus { background: #d7f4df; color: #0c5b38; }
.grade-Bplus, .grade-B, .grade-Bminus { background: #e7f0d2; color: #47612b; }.grade-Cplus, .grade-C, .grade-Cminus { background: #f6edc8; color: #78631b; }
.grade-Dplus, .grade-D, .grade-Dminus { background: #f5d9bd; color: #8b4d25; }.grade-F, .grade-NslashA { background: var(--paper); color: var(--muted); }
.chart-control { display: grid; gap: 7px; color: var(--muted); font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }.chart-control select { min-width: 190px; }
.weekly-chart-shell { border: 1px solid var(--line); background: var(--surface); }.weekly-chart { min-height: 330px; padding: 20px 20px 5px; overflow-x: auto; }.weekly-chart svg { display: block; width: 100%; min-width: 680px; height: 300px; }.chart-grid { stroke: var(--line); stroke-width: 1; }.chart-axis { fill: var(--muted); font: 10px var(--mono); }.weekly-chart .chart-line { fill: none; stroke-width: 3; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }.weekly-chart .chart-point { stroke: none; stroke-width: 0; }.weekly-chart .chart-headshot { pointer-events: none; }.empty-state { margin: 120px 20px; color: var(--muted); font: 12px var(--mono); text-align: center; }.weekly-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }.legend-item { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font: 11px var(--mono); }.legend-swatch { width: 20px; height: 3px; }.trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }.trend-item { border-top: 2px solid var(--green); padding: 12px 0 0; }.trend-item strong, .trend-item span { display: block; }.trend-item strong { color: var(--ink); font: 18px var(--display); }.trend-item span { margin-top: 5px; color: var(--muted); font: 10px var(--mono); }
.yearly-section { padding-top: 70px; }.yearly-chart-shell { border: 1px solid var(--line); background: var(--surface); }.yearly-chart { min-height: 330px; padding: 20px 20px 5px; overflow-x: auto; }.yearly-chart svg { display: block; width: 100%; min-width: 680px; height: 300px; }.yearly-chart .chart-line { fill: none; stroke-width: 3; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }.yearly-chart .chart-point { stroke: none; stroke-width: 0; }
.stats-controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }.stats-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 11px var(--mono); cursor: pointer; }.stats-toggle:has(input:checked) { border-color: var(--green); background: var(--soft-green); }.stats-toggle input { accent-color: var(--green); }.stats-table-shell { border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }.stats-table table { width: 100%; min-width: 680px; border-collapse: collapse; }.stats-table th, .stats-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }.stats-table th:first-child, .stats-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; }.stats-table thead th { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }.stats-table tbody th { color: var(--ink); font: 13px var(--display); }.stats-table tbody td { color: var(--ink); font: 13px var(--mono); }.stats-table .stats-category th { padding-top: 18px; border-bottom-color: var(--ink); color: var(--green); font: 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }.stats-table .stats-category th:not(:first-child) { color: transparent; }
.method-section { padding-top: 55px; }
.method-section details { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.method-section summary { cursor: pointer; padding: 20px 0; font: 600 17px var(--display); list-style-position: outside; }
.method-copy { padding: 0 0 25px 25px; max-width: 850px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.method-copy p { margin: 0 0 20px; }.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }.method-grid div { border-top: 2px solid var(--green); padding-top: 10px; }.method-grid strong, .method-grid span { display: block; }.method-grid strong { color: var(--ink); font: 12px var(--mono); text-transform: uppercase; }.method-grid span { margin-top: 7px; font-size: 12px; line-height: 1.45; }.method-note { font-size: 11px; }
@media (max-width: 800px) { .report-hero { align-items: start; flex-direction: column; gap: 26px; padding: 42px 20px 36px; }.report-controls { width: 100%; }.report-controls select { width: 100%; }.section-heading { align-items: start; flex-direction: column; gap: 12px; }.selection-section, .cards-section, .depth-section, .weekly-section, .yearly-section, .stats-section, .method-section { padding-left: 20px; padding-right: 20px; }.selection-status, .grade-key { text-align: left; }.player-selectors, .report-cards, .trend-grid { grid-template-columns: 1fr; }.chart-control, .chart-control select { width: 100%; }.method-grid { grid-template-columns: 1fr; gap: 16px; } }