| * { |
| box-sizing: border-box; |
| } |
|
|
| body { |
| margin: 0; |
| background: #f4f6f7; |
| color: #17202a; |
| font-family: Inter, Arial, sans-serif; |
| } |
|
|
| .app-shell { |
| min-height: 100vh; |
| padding: 18px 22px 28px; |
| } |
|
|
| .hero, |
| .toolbar, |
| .tabs { |
| max-width: 1560px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
|
|
| .hero { |
| padding: 8px 2px 14px; |
| border-bottom: 1px solid #d8e1e7; |
| } |
|
|
| .hero-copy { |
| min-width: 0; |
| } |
|
|
| .eyebrow { |
| margin-bottom: 7px; |
| color: #526171; |
| font-size: 12px; |
| font-weight: 800; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p { |
| margin-top: 0; |
| } |
|
|
| h1 { |
| margin-bottom: 8px; |
| font-size: 40px; |
| line-height: 1.05; |
| letter-spacing: 0; |
| } |
|
|
| h2 { |
| margin-bottom: 5px; |
| font-size: 20px; |
| letter-spacing: 0; |
| } |
|
|
| .lede { |
| max-width: 840px; |
| margin-bottom: 0; |
| color: #526171; |
| font-size: 15px; |
| line-height: 1.45; |
| } |
|
|
| .top-strip { |
| display: flex; |
| gap: 10px; |
| align-items: stretch; |
| flex-wrap: wrap; |
| } |
|
|
| .metric-card { |
| min-width: 145px; |
| padding: 12px 14px; |
| border: 1px solid #d8e1e7; |
| border-radius: 8px; |
| background: #ffffff; |
| } |
|
|
| .metric-label { |
| color: #607080; |
| font-size: 11px; |
| font-weight: 800; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .metric-value { |
| margin-top: 7px; |
| color: #101820; |
| font-size: 22px; |
| font-weight: 800; |
| line-height: 1.1; |
| } |
|
|
| .metric-detail { |
| margin-top: 6px; |
| color: #647383; |
| font-size: 12px; |
| line-height: 1.35; |
| } |
|
|
| .toolbar { |
| position: sticky; |
| top: 0; |
| z-index: 10; |
| display: grid; |
| grid-template-columns: minmax(230px, 310px); |
| gap: 16px; |
| margin-top: 14px; |
| margin-bottom: 14px; |
| padding: 12px; |
| border: 1px solid #d8e1e7; |
| border-radius: 8px; |
| background: rgba(255, 255, 255, 0.96); |
| box-shadow: 0 8px 24px rgba(18, 28, 38, 0.06); |
| backdrop-filter: blur(6px); |
| } |
|
|
| .control label { |
| display: block; |
| margin-bottom: 6px; |
| color: #344452; |
| font-size: 12px; |
| font-weight: 800; |
| letter-spacing: 0; |
| text-transform: uppercase; |
| } |
|
|
| .Select--multi .Select-value { |
| margin-top: 3px; |
| } |
|
|
| .Select-multi-value-wrapper { |
| max-height: 86px; |
| overflow-y: auto; |
| } |
|
|
| .tabs { |
| border: 0; |
| } |
|
|
| .tab { |
| display: flex !important; |
| align-items: center !important; |
| justify-content: center !important; |
| min-height: 44px; |
| padding: 11px 18px !important; |
| border: 0 !important; |
| border-bottom: 2px solid transparent !important; |
| background: transparent !important; |
| color: #637381 !important; |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| .tab-selected { |
| color: #12302f !important; |
| border-bottom-color: #1565C0 !important; |
| background: #ffffff !important; |
| } |
|
|
| .panel { |
| margin-top: 14px; |
| padding: 18px; |
| border: 1px solid #d8e1e7; |
| border-radius: 8px; |
| background: #ffffff; |
| } |
|
|
| .panel-heading { |
| margin-bottom: 14px; |
| } |
|
|
| .panel-subtitle { |
| max-width: 980px; |
| margin-bottom: 0; |
| color: #526171; |
| font-size: 13px; |
| line-height: 1.45; |
| } |
|
|
| .leaderboard-panel { |
| padding-top: 16px; |
| } |
|
|
| .top-strip { |
| margin-bottom: 14px; |
| } |
|
|
| .leaderboard-grid { |
| display: grid; |
| grid-template-columns: minmax(560px, 1.08fr) minmax(360px, 0.92fr); |
| gap: 16px; |
| align-items: start; |
| } |
|
|
| .leaderboard-table-wrap, |
| .consistency-table-wrap { |
| min-width: 0; |
| } |
|
|
| .sort-state { |
| display: inline-flex; |
| align-items: center; |
| min-height: 30px; |
| margin: 0 0 8px; |
| padding: 6px 10px; |
| border: 1px solid #cfd8df; |
| border-radius: 6px; |
| background: #f7fafb; |
| color: #344452; |
| font-size: 12px; |
| font-weight: 800; |
| line-height: 1.2; |
| } |
|
|
| .latent-grid { |
| display: grid; |
| grid-template-columns: minmax(360px, 0.42fr) minmax(620px, 1fr); |
| gap: 16px; |
| align-items: start; |
| } |
|
|
| .latent-panel { |
| min-width: 0; |
| } |
|
|
| .latent-color-control { |
| width: min(260px, 100%); |
| margin-bottom: 8px; |
| } |
|
|
| .chart-grid { |
| display: grid; |
| gap: 16px; |
| align-items: start; |
| } |
|
|
| .chart-grid.two { |
| grid-template-columns: repeat(2, minmax(320px, 1fr)); |
| } |
|
|
| .table-hint { |
| margin: 10px 2px 0; |
| color: #647383; |
| font-size: 12px; |
| } |
|
|
| .details-table { |
| margin-top: 12px; |
| border-top: 1px solid #e5ebef; |
| } |
|
|
| .details-table summary { |
| cursor: pointer; |
| padding: 12px 0 8px; |
| color: #344452; |
| font-size: 13px; |
| font-weight: 800; |
| } |
|
|
| .details-body { |
| padding-top: 4px; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { |
| background: #f3f6f8 !important; |
| padding: 0 !important; |
| border-right: 1px solid #d8e1e7 !important; |
| overflow: visible !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:last-child { |
| border-right: 0 !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header > div { |
| display: flex !important; |
| align-items: center !important; |
| justify-content: flex-start !important; |
| gap: 8px !important; |
| min-height: 43px; |
| padding: 10px 12px !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name { |
| flex: 1 1 auto !important; |
| min-width: 0; |
| color: #26323f; |
| line-height: 1.15; |
| white-space: normal; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-actions { |
| order: -1; |
| flex: 0 0 auto !important; |
| display: inline-flex !important; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort { |
| display: inline-flex !important; |
| align-items: center; |
| justify-content: center; |
| width: 22px; |
| height: 22px; |
| border: 1px solid #c7d3dc; |
| border-radius: 5px; |
| background: #ffffff; |
| color: #526171 !important; |
| font-size: 13px; |
| font-weight: 900; |
| line-height: 1; |
| opacity: 1 !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover .column-header--sort { |
| border-color: #1565C0; |
| background: #edf6ff; |
| color: #1565C0 !important; |
| } |
|
|
| .dash-table-container .previous-next-container { |
| margin-top: 8px; |
| color: #526171; |
| font-size: 12px; |
| } |
|
|
| @media (max-width: 1180px) { |
| .hero, |
| .toolbar, |
| .leaderboard-grid, |
| .latent-grid, |
| .chart-grid.two { |
| grid-template-columns: 1fr; |
| } |
|
|
| } |
|
|
| @media (max-width: 680px) { |
| .app-shell { |
| padding: 12px; |
| } |
|
|
| h1 { |
| font-size: 32px; |
| } |
|
|
| .panel { |
| padding: 14px; |
| } |
|
|
| .tab { |
| padding-left: 10px !important; |
| padding-right: 10px !important; |
| font-size: 13px; |
| } |
| } |
|
|
