/* Track record page. Builds on forecast-design.css tokens (greens on #f5f8f7). */
.tr-page .forecast-hero { padding-bottom:30px; }
.tr-switch { display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:22px; padding:5px; border:1px solid #2f5a4c; border-radius:14px; background:#0b2b2466; }
.tr-switch a { display:flex; flex-direction:column; justify-content:center; min-height:52px; padding:8px 18px; border-radius:10px; color:#cfe6dc; transition:background .15s,color .15s; }
.tr-switch a span { font-size:14px; font-weight:650; }
.tr-switch a small { font-size:11px; color:#8fb8a7; font-variant-numeric:tabular-nums; }
.tr-switch a:hover { background:#ffffff12; color:#fff; }
.tr-switch a[aria-current] { background:#fff; color:#123e34; box-shadow:0 3px 10px #04161230; }
.tr-switch a[aria-current] small { color:#4c7a67; }
.tr-switch a:focus-visible { outline:3px solid #72d8b5; outline-offset:2px; }
.tr-inline-link { color:#2c704a; font-weight:600; white-space:nowrap; }

.public-design #main-content .tr-filters form { align-items:flex-end; }
.public-design #main-content .tr-filters .tr-filter-actions { flex:0 0 auto; display:flex; align-items:center; gap:14px; min-height:48px; }
.tr-apply { min-height:48px; padding:0 20px; border-radius:10px; background:#123e34; color:#fff; font-size:14px; font-weight:600; }
.tr-apply:hover { background:#0c5a45; }
.tr-apply:focus-visible { outline:3px solid #a5d7c7; outline-offset:2px; }
.tr-filters form.is-enhanced .tr-apply { display:none; }
.public-design #main-content .tr-filters form.is-enhanced .tr-filter-actions:not(:has(a)) { display:none; }
.tr-filter-actions a { color:#2c704a; font-size:13px; font-weight:600; }

.tr-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tr-kpis > div { min-width:0; padding:20px 22px; border:1px solid #dfe8e2; border-radius:16px; background:#fff; box-shadow:0 3px 15px #153e2e04; }
.tr-kpis dt { color:#607a6c; font-size:12px; font-weight:600; }
.tr-kpis dd { margin:6px 0 4px; color:#1d4331; font-size:30px; font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.tr-kpis p { color:#7d9184; font-size:12px; line-height:1.5; }
.tr-kpis .tr-kpi-lead { background:linear-gradient(135deg,#eef8f3,#fff); border-color:#bcdcc8; }
.tr-kpis .tr-kpi-lead dd { color:#0f5c3f; }

.tr-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:4px; }
.tr-table { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.tr-table th, .tr-table td { padding:11px 12px; text-align:right; white-space:nowrap; border-bottom:1px solid #edf2ef; }
.tr-table thead th { color:#6b8275; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-bottom-color:#dfe8e2; }
.tr-table :is(thead th, tbody th):first-child { text-align:left; }
.tr-table tbody th { color:#1f4432; font-weight:600; }
.tr-table tbody td { color:#3d5f4b; }
.tr-table tbody tr:hover :is(th,td) { background:#f6faf8; }
.tr-table tbody tr.is-selected :is(th,td) { background:#eaf5ef; }
.tr-table a { color:inherit; }
.tr-table a:hover { color:#0c6b4b; text-decoration:underline; }
.tr-compact th, .tr-compact td { padding:10px 8px; }
.tr-league { display:flex; align-items:center; gap:10px; min-height:36px; }
.tr-league img { width:22px; height:22px; object-fit:contain; flex:none; }
.tr-league span { display:flex; flex-direction:column; line-height:1.3; }
.tr-league strong { font-weight:600; white-space:normal; }
.tr-league small { color:#86988c; font-size:11px; font-weight:400; }
.tr-leagues th:first-child { min-width:220px; }
.tr-search input { height:44px; width:240px; max-width:100%; padding:0 12px; border:1px solid #d9e3df; border-radius:10px; font-size:14px; color:#203d33; background:#fff; }
.tr-search input:focus-visible { outline:3px solid #a5d7c7; outline-offset:2px; }
.tr-more { display:inline-flex; align-items:center; min-height:44px; margin-top:14px; padding:0 18px; border:1px solid #cfe0d6; border-radius:10px; background:#f3f9f6; color:#1e5a41; font-size:13px; font-weight:600; }
.tr-more:hover { background:#e7f4ed; }

.tr-chart-wrap { overflow-x:auto; padding-bottom:4px; }
.tr-bars { display:block; width:100%; min-width:320px; height:auto; margin-inline:auto; }
.tr-grid { stroke:#e6eee9; stroke-width:1; }
.tr-axis { fill:#7d9184; font-size:11px; font-variant-numeric:tabular-nums; }
.tr-axis-title { fill:#607a6c; font-size:11px; font-weight:600; }
.tr-value { fill:#2c5a43; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }
.tr-bar { fill:#3f9170; }
.tr-bar.is-thin { fill:#a9d2bf; }
g:hover > .tr-bar { fill:#1f6e4f; }
.tr-details { margin-top:14px; }
.tr-details summary { display:inline-flex; align-items:center; min-height:44px; cursor:pointer; color:#2c704a; font-size:13px; font-weight:600; }

.tr-two { grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); }
.tr-two h2 { margin-bottom:10px; }
.tr-cal { display:block; width:100%; max-width:340px; height:auto; margin:8px auto 0; }
.tr-diagonal { stroke:#b7c9bf; stroke-width:1.2; stroke-dasharray:4 4; }
.tr-cal-line { fill:none; stroke:#3f9170; stroke-width:2; }
.tr-cal-dot { fill:#fff; stroke:#1f6e4f; stroke-width:2; }

.tr-book { border-color:#d8e3f0; }
.tr-glossary dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px; margin-top:16px; }
.tr-glossary dt { color:#1f4432; font-size:13px; font-weight:650; margin-bottom:4px; }
.tr-glossary dd { color:#607a6c; font-size:13px; line-height:1.7; }
.tr-links { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:12px; }

@media (max-width:900px) {
 .tr-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .tr-two { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:639px) {
 .tr-kpis > div { padding:16px; }
 .tr-kpis dd { font-size:24px; }
 .tr-glossary dl { grid-template-columns:minmax(0,1fr); }
 .tr-switch { display:flex; width:100%; }
 .tr-switch a { flex:1 1 0; padding:8px 12px; }
 .tr-search, .tr-search input { width:100%; }
 .public-design #main-content .tr-filters .tr-filter-actions { flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce) {
 .tr-switch a, .tr-bar { transition:none; }
}