| :root { |
| color-scheme: light; |
| --bg: #fff; |
| --surface: #fff; |
| --rail: #f6f7f8; |
| --sunk: #f1f3f4; |
| --ink: #202728; |
| --muted: #647075; |
| --line: #e1e6e7; |
| --accent: #126e60; |
| --accent-soft: #e8f3ef; |
| --link: #285e83; |
| --danger: #af403e; |
| --warning: #95651b; |
| --f-body: |
| -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", |
| "Microsoft YaHei", sans-serif; |
| --f-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; |
| font-family: var(--f-body); |
| font-size: 14px; |
| } |
| :root[data-theme="dark"] { |
| color-scheme: dark; |
| --bg: #171a1b; |
| --surface: #171a1b; |
| --rail: #121516; |
| --sunk: #222729; |
| --ink: #e6ebea; |
| --muted: #a2adad; |
| --line: #333b3d; |
| --accent: #83cbbb; |
| --accent-soft: #233b35; |
| --link: #94bfdc; |
| --danger: #f39791; |
| --warning: #d9b36b; |
| } |
| * { |
| box-sizing: border-box; |
| letter-spacing: 0; |
| } |
| [hidden] { |
| display: none !important; |
| } |
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--ink); |
| line-height: 1.65; |
| } |
| a { |
| color: var(--link); |
| text-underline-offset: 3px; |
| } |
| button, |
| input, |
| select { |
| font: inherit; |
| color: inherit; |
| } |
| button, |
| select { |
| cursor: pointer; |
| } |
| button { |
| background: var(--surface); |
| } |
| button:disabled { |
| cursor: default; |
| opacity: 0.45; |
| } |
| input, |
| select { |
| background: var(--surface); |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| min-width: 0; |
| padding: 7px 10px; |
| min-height: 36px; |
| } |
| input[type="checkbox"] { |
| width: 15px; |
| height: 15px; |
| min-height: 0; |
| accent-color: var(--accent); |
| margin: 0; |
| } |
| input[type="range"] { |
| accent-color: var(--accent); |
| min-height: 20px; |
| padding: 0; |
| } |
| input[type="search"]::-webkit-search-cancel-button { |
| cursor: pointer; |
| } |
| select { |
| max-width: 100%; |
| } |
| :focus-visible { |
| outline: 2px solid var(--accent); |
| outline-offset: 3px; |
| } |
| h1, |
| h2, |
| h3, |
| p, |
| figure, |
| dl { |
| margin: 0; |
| } |
| h1 { |
| font-size: 25px; |
| line-height: 1.4; |
| font-weight: 650; |
| overflow-wrap: anywhere; |
| } |
| h2 { |
| font-size: 17px; |
| line-height: 1.5; |
| font-weight: 600; |
| } |
| h3 { |
| font-size: 14px; |
| font-weight: 600; |
| } |
| h1:focus, |
| main:focus { |
| outline: none; |
| } |
| svg.lucide { |
| width: 17px; |
| height: 17px; |
| stroke-width: 1.65; |
| flex-shrink: 0; |
| vertical-align: middle; |
| } |
| .mono { |
| font-family: var(--f-mono); |
| font-variant-numeric: tabular-nums; |
| } |
| .muted, |
| .subtle { |
| color: var(--muted); |
| } |
| .skip-link { |
| position: fixed; |
| left: 12px; |
| top: -100px; |
| z-index: 20; |
| padding: 10px 16px; |
| background: var(--surface); |
| } |
| .skip-link:focus { |
| top: 12px; |
| } |
| .site-layout { |
| display: grid; |
| grid-template-columns: 208px minmax(0, 1fr); |
| max-width: 1680px; |
| margin: 0 auto; |
| min-height: 100svh; |
| } |
| .sidebar { |
| position: sticky; |
| top: 0; |
| height: 100svh; |
| padding: 30px 18px 18px; |
| background: var(--rail); |
| border-right: 1px solid var(--line); |
| display: flex; |
| flex-direction: column; |
| } |
| .brand { |
| display: flex; |
| gap: 11px; |
| align-items: center; |
| padding: 0 10px 34px; |
| color: var(--ink); |
| text-decoration: none; |
| } |
| .brand strong { |
| font-size: 16px; |
| line-height: 1.3; |
| font-weight: 650; |
| } |
| .brand strong span { |
| display: block; |
| font-size: 14px; |
| font-weight: 450; |
| } |
| .brand-symbol { |
| color: var(--accent); |
| } |
| .brand-symbol svg { |
| width: 26px; |
| height: 26px; |
| } |
| .sidebar nav { |
| display: grid; |
| gap: 5px; |
| } |
| .sidebar nav > a { |
| display: flex; |
| align-items: center; |
| gap: 11px; |
| padding: 9px 12px; |
| color: var(--muted); |
| text-decoration: none; |
| border-radius: 4px; |
| font-size: 13px; |
| } |
| .sidebar nav > a:hover { |
| background: var(--sunk); |
| color: var(--ink); |
| } |
| .sidebar nav > a[aria-current="page"] { |
| background: var(--accent-soft); |
| color: var(--accent); |
| font-weight: 600; |
| } |
| .sidebar nav > a.production-nav { |
| margin-top: 22px; |
| border-top: 1px solid var(--line); |
| padding-top: 18px; |
| border-radius: 0; |
| } |
| .sidebar nav > a.production-nav[aria-current="page"] { |
| background: transparent; |
| } |
| .nav-count { |
| margin-left: auto; |
| font: 11px var(--f-mono); |
| } |
| .sidebar-bottom { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 8px; |
| margin-top: auto; |
| padding: 20px 7px 0; |
| color: var(--muted); |
| font-size: 11px; |
| } |
| #nav-toggle { |
| display: none; |
| } |
| #app { |
| padding: 35px 42px 72px; |
| min-width: 0; |
| } |
| .view { |
| display: grid; |
| gap: 26px; |
| min-width: 0; |
| } |
| .view > *, |
| .section > *, |
| .synth-section > * { |
| min-width: 0; |
| } |
| .page-heading, |
| .section-heading { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 14px; |
| flex-wrap: wrap; |
| } |
| .heading-count { |
| font: 400 17px var(--f-mono); |
| margin-left: 9px; |
| color: var(--muted); |
| } |
| .heading-actions, |
| .button-group { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .icon-button, |
| .synth-icon { |
| width: 34px; |
| height: 34px; |
| border: 1px solid var(--line); |
| border-radius: 4px; |
| display: inline-grid; |
| place-items: center; |
| color: var(--muted); |
| padding: 0; |
| flex: 0 0 34px; |
| } |
| .icon-button:hover:not(:disabled), |
| .synth-icon:hover:not(:disabled) { |
| background: var(--sunk); |
| color: var(--ink); |
| } |
| .text-button { |
| border: 0; |
| color: var(--link); |
| padding: 0; |
| text-decoration: underline; |
| text-underline-offset: 3px; |
| } |
| .text-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| text-decoration: none; |
| font-size: 12px; |
| } |
| .text-link:hover { |
| text-decoration: underline; |
| } |
| .section { |
| border-top: 1px solid var(--line); |
| padding-top: 25px; |
| display: grid; |
| gap: 18px; |
| scroll-margin-top: 24px; |
| } |
| .section-tabs { |
| display: flex; |
| gap: 24px; |
| border-bottom: 1px solid var(--line); |
| overflow-x: auto; |
| scrollbar-width: thin; |
| } |
| .section-tabs a { |
| color: var(--muted); |
| text-decoration: none; |
| white-space: nowrap; |
| padding: 7px 0 11px; |
| border-bottom: 2px solid transparent; |
| font-size: 13px; |
| } |
| .section-tabs a[aria-current="page"], |
| .section-tabs a:hover { |
| color: var(--ink); |
| border-bottom-color: var(--accent); |
| } |
| .catalog-view { |
| gap: 0; |
| } |
| .catalog-view .page-heading { |
| margin-bottom: 25px; |
| } |
| .catalog-filters { |
| display: grid; |
| gap: 12px; |
| padding-bottom: 16px; |
| border-bottom: 1px solid var(--line); |
| } |
| .search-field { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| max-width: 520px; |
| color: var(--muted); |
| } |
| .search-field input { |
| width: 100%; |
| border: 0; |
| outline-offset: 1px; |
| padding-left: 0; |
| font-size: 14px; |
| min-height: 35px; |
| } |
| .filter-row { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| align-items: center; |
| } |
| .filter-row select { |
| font-size: 12px; |
| max-width: 200px; |
| } |
| .checkbox { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 12px; |
| white-space: nowrap; |
| padding: 6px; |
| } |
| .filter-row .icon-button { |
| margin-left: auto; |
| } |
| .results-toolbar { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 13px 0 10px; |
| color: var(--muted); |
| font: 12px var(--f-mono); |
| } |
| .results-toolbar select { |
| border: 0; |
| font-family: var(--f-body); |
| font-size: 12px; |
| padding-right: 0; |
| } |
| .dataset-columns, |
| .dataset-row { |
| display: grid; |
| grid-template-columns: |
| minmax(240px, 1.6fr) minmax(112px, 0.85fr) minmax(136px, 1fr) |
| minmax(160px, 1.2fr) 84px; |
| gap: 16px; |
| align-items: center; |
| } |
| .dataset-columns { |
| border-bottom: 1px solid var(--line); |
| color: var(--muted); |
| font-size: 11px; |
| padding: 8px 0; |
| } |
| .dataset-row { |
| border-bottom: 1px solid var(--line); |
| padding: 14px 0; |
| text-decoration: none; |
| color: var(--ink); |
| font-size: 12px; |
| } |
| .dataset-row:hover { |
| background: var(--rail); |
| } |
| .dataset-row > * { |
| min-width: 0; |
| overflow-wrap: anywhere; |
| } |
| .dataset-name { |
| display: grid; |
| grid-template-columns: 72px minmax(0, 1fr); |
| gap: 13px; |
| align-items: center; |
| } |
| .dataset-name h2 { |
| font-size: 14px; |
| font-weight: 600; |
| line-height: 1.45; |
| } |
| .dataset-year { |
| color: var(--muted); |
| font-size: 11px; |
| display: block; |
| margin-top: 3px; |
| } |
| .dataset-thumb { |
| width: 72px; |
| aspect-ratio: 4 / 3; |
| border-radius: 3px; |
| object-fit: cover; |
| background: var(--sunk); |
| display: block; |
| } |
| .no-thumb { |
| display: grid; |
| place-items: center; |
| color: var(--muted); |
| } |
| .dataset-source, |
| .dataset-scale { |
| display: grid; |
| gap: 3px; |
| } |
| .dataset-scale { |
| font-size: 11px; |
| } |
| .dataset-annotation { |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 7px; |
| } |
| .status { |
| font-size: 11px; |
| display: inline-flex; |
| align-items: baseline; |
| gap: 5px; |
| } |
| .status::before { |
| content: ""; |
| width: 5px; |
| height: 5px; |
| border-radius: 50%; |
| background: var(--muted); |
| flex-shrink: 0; |
| align-self: center; |
| } |
| .status-used::before { |
| background: #2e8977; |
| } |
| .status-p0::before { |
| background: #bd514e; |
| } |
| .status-p1::before { |
| background: #a87833; |
| } |
| .status-p2::before { |
| background: #577da0; |
| } |
| .status-own::before { |
| background: #647cb6; |
| } |
| .status-no, |
| .status-retired { |
| color: var(--muted); |
| } |
| .tier { |
| padding: 1px 5px; |
| font: 10px/1.6 var(--f-mono); |
| border-radius: 3px; |
| background: var(--sunk); |
| color: var(--muted); |
| white-space: nowrap; |
| } |
| .tier-S1, |
| .tier-S2 { |
| background: var(--accent-soft); |
| color: var(--accent); |
| } |
| .tier-S3, |
| .tier-S4 { |
| color: var(--link); |
| } |
| .tier-S5 { |
| color: var(--warning); |
| } |
| .tier-SY { |
| color: #9761a4; |
| } |
| .empty-state { |
| display: grid; |
| justify-items: center; |
| gap: 13px; |
| padding: 80px 16px; |
| color: var(--muted); |
| text-align: center; |
| } |
| .empty-state > svg { |
| width: 25px; |
| height: 25px; |
| } |
| .empty-state h1 { |
| font-size: 20px; |
| } |
| .loading-state { |
| padding-top: 30px; |
| color: var(--muted); |
| } |
| .breadcrumb { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| width: fit-content; |
| text-decoration: none; |
| font-size: 12px; |
| color: var(--muted); |
| } |
| .detail-heading { |
| display: flex; |
| align-items: start; |
| gap: 20px; |
| justify-content: space-between; |
| } |
| .detail-heading p { |
| margin-top: 7px; |
| color: var(--muted); |
| font-size: 13px; |
| max-width: 72ch; |
| } |
| .detail-meta { |
| display: grid; |
| justify-items: end; |
| gap: 6px; |
| flex-shrink: 0; |
| font-size: 11px; |
| color: var(--muted); |
| } |
| .dataset-tools { |
| display: flex; |
| gap: 22px; |
| flex-wrap: wrap; |
| } |
| .dataset-tools a { |
| display: flex; |
| gap: 7px; |
| align-items: center; |
| text-decoration: none; |
| font-size: 12px; |
| } |
| .facts { |
| display: grid; |
| gap: 12px; |
| font-size: 13px; |
| } |
| .facts > div { |
| display: grid; |
| grid-template-columns: 112px minmax(0, 1fr); |
| gap: 20px; |
| } |
| .facts dt { |
| color: var(--muted); |
| } |
| .facts dd { |
| margin: 0; |
| overflow-wrap: anywhere; |
| } |
| .notice { |
| border-left: 2px solid var(--warning); |
| padding: 3px 0 3px 14px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
| .resource-links { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| } |
| .resource-links li { |
| border-bottom: 1px solid var(--line); |
| } |
| .resource-links a { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 14px 0; |
| text-decoration: none; |
| } |
| .resource-links a:hover { |
| color: var(--accent); |
| } |
| .link-list, |
| .dataset-links { |
| display: flex; |
| gap: 10px 20px; |
| flex-wrap: wrap; |
| font-size: 12px; |
| } |
| .link-list a { |
| display: inline-flex; |
| gap: 4px; |
| align-items: center; |
| text-decoration: none; |
| } |
| .link-list a:hover, |
| .dataset-links a:hover { |
| text-decoration: underline; |
| } |
| .link-list svg { |
| width: 13px; |
| height: 13px; |
| } |
| .dataset-links a { |
| background: var(--sunk); |
| padding: 4px 8px; |
| border-radius: 3px; |
| text-decoration: none; |
| } |
| .preview { |
| border: 1px solid var(--line); |
| border-radius: 6px; |
| overflow: hidden; |
| display: grid; |
| gap: 0; |
| } |
| .preview-toolbar { |
| padding: 11px; |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| } |
| .preview-toolbar select { |
| font-size: 12px; |
| } |
| .preview-toolbar [data-sample] { |
| flex: 1; |
| width: 100px; |
| border-color: transparent; |
| } |
| .preview-toolbar [data-mode] { |
| max-width: 220px; |
| } |
| .preview-pair { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
| } |
| .preview-pair figure { |
| min-width: 0; |
| border-top: 1px solid var(--line); |
| } |
| .preview-pair figure + figure { |
| border-left: 1px solid var(--line); |
| } |
| .preview-pair figcaption { |
| display: flex; |
| justify-content: space-between; |
| gap: 7px; |
| padding: 7px 12px; |
| font-size: 11px; |
| min-height: 34px; |
| } |
| .preview-pair [data-loading] { |
| color: var(--warning); |
| } |
| .preview-pair svg { |
| width: 100%; |
| height: 330px; |
| display: block; |
| background: #1d2325; |
| } |
| .preview-adjustments { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| padding: 11px 12px; |
| gap: 12px; |
| border-bottom: 1px solid var(--line); |
| font-size: 11px; |
| } |
| .preview-adjustments label { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
| .preview-adjustments input { |
| width: 110px; |
| } |
| .preview-adjustments output { |
| min-width: 34px; |
| font-family: var(--f-mono); |
| } |
| .preview-thumbs { |
| display: flex; |
| overflow: auto; |
| gap: 7px; |
| padding: 12px; |
| } |
| .preview-thumbs button { |
| position: relative; |
| width: 66px; |
| flex: 0 0 66px; |
| height: 48px; |
| padding: 0; |
| border: 2px solid transparent; |
| border-radius: 3px; |
| overflow: hidden; |
| } |
| .preview-thumbs button[aria-pressed="true"] { |
| border-color: var(--accent); |
| } |
| .preview-thumbs img { |
| width: 100%; |
| height: 100%; |
| object-fit: cover; |
| display: block; |
| } |
| .preview-thumbs span { |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| background: #202728d9; |
| color: white; |
| padding: 0 3px; |
| font: 10px/1.5 var(--f-mono); |
| } |
| .caption, |
| .preview > .source-note { |
| padding: 0 12px 10px; |
| font-size: 12px; |
| } |
| .source-note { |
| color: var(--muted); |
| font-size: 11px; |
| overflow-wrap: anywhere; |
| } |
| details > summary { |
| cursor: pointer; |
| font-size: 12px; |
| color: var(--muted); |
| } |
| details > summary:hover { |
| color: var(--ink); |
| } |
| details > p { |
| margin-top: 12px; |
| color: var(--muted); |
| font-size: 12px; |
| } |
| .provenance { |
| padding: 10px 12px; |
| border-top: 1px solid var(--line); |
| } |
| .source-content { |
| display: grid; |
| gap: 8px; |
| padding-top: 12px; |
| font-size: 11px; |
| color: var(--muted); |
| } |
| .provenance .facts { |
| margin-block: 14px; |
| font-size: 11px; |
| } |
| .official-figures { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 28px; |
| } |
| .official-figures > figure { |
| display: grid; |
| gap: 12px; |
| align-content: start; |
| min-width: 0; |
| } |
| .figure-images { |
| background: #fff; |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 8px; |
| padding: 8px; |
| } |
| .figure-images a { |
| flex: 1 1 160px; |
| min-width: 0; |
| } |
| .figure-images img { |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
| .official-figures figcaption { |
| font-size: 12px; |
| color: var(--muted); |
| } |
| .official-figures details { |
| font-size: 11px; |
| } |
| #clip-player { |
| width: 100%; |
| max-height: 560px; |
| background: #1d2325; |
| border-radius: 4px; |
| } |
| #clip-select { |
| width: 100%; |
| } |
| .table-scroll { |
| overflow: auto; |
| max-width: 100%; |
| min-width: 0; |
| } |
| table { |
| border-collapse: collapse; |
| width: 100%; |
| font-size: 12px; |
| } |
| th { |
| color: var(--muted); |
| font-size: 11px; |
| font-weight: 500; |
| text-align: left; |
| white-space: nowrap; |
| } |
| th, |
| td { |
| padding: 12px 16px 12px 0; |
| border-bottom: 1px solid var(--line); |
| vertical-align: top; |
| } |
| td { |
| overflow-wrap: anywhere; |
| } |
| th:last-child, |
| td:last-child { |
| padding-right: 0; |
| } |
| .matrix table { |
| min-width: 980px; |
| table-layout: fixed; |
| } |
| .matrix th, |
| .matrix td { |
| border-right: 1px solid var(--line); |
| padding: 12px; |
| } |
| .matrix th:last-child, |
| .matrix td:last-child { |
| border-right: 0; |
| } |
| .matrix th:first-child { |
| width: 130px; |
| } |
| .matrix-link { |
| display: block; |
| font-size: 11px; |
| margin-bottom: 6px; |
| text-decoration: none; |
| } |
| .matrix-link:hover { |
| text-decoration: underline; |
| } |
| .source-counts { |
| display: grid; |
| grid-template-columns: repeat(7, minmax(0, 1fr)); |
| border-block: 1px solid var(--line); |
| } |
| .source-counts a { |
| display: grid; |
| gap: 4px; |
| padding: 16px 6px; |
| color: var(--ink); |
| text-decoration: none; |
| } |
| .source-counts b { |
| font: 22px var(--f-mono); |
| font-weight: 500; |
| } |
| .source-counts span { |
| color: var(--muted); |
| font-size: 11px; |
| } |
| .tier-reference { |
| display: grid; |
| } |
| .tier-reference > div { |
| display: grid; |
| grid-template-columns: 220px 1fr 50px; |
| align-items: baseline; |
| gap: 15px; |
| padding: 12px 0; |
| border-bottom: 1px solid var(--line); |
| font-size: 12px; |
| } |
| .tier-reference dt { |
| display: flex; |
| align-items: baseline; |
| gap: 10px; |
| } |
| .tier-reference dd { |
| margin: 0; |
| color: var(--muted); |
| } |
| .tier-reference a { |
| text-decoration: none; |
| } |
| .tier-reference strong { |
| font-weight: 500; |
| } |
| .recommendations { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 22px; |
| } |
| .recommendations a { |
| text-decoration: none; |
| color: var(--ink); |
| display: grid; |
| gap: 9px; |
| } |
| .recommendations img { |
| width: 100%; |
| aspect-ratio: 16 / 9; |
| } |
| .recommendations p { |
| color: var(--muted); |
| font-size: 12px; |
| } |
| .flow { |
| display: flex; |
| padding: 0; |
| list-style: none; |
| counter-reset: step; |
| flex-wrap: wrap; |
| gap: 0; |
| border-block: 1px solid var(--line); |
| } |
| .flow li { |
| flex: 1 1 160px; |
| padding: 15px 18px 15px 0; |
| font-size: 12px; |
| counter-increment: step; |
| } |
| .flow li::before { |
| content: counter(step, decimal-leading-zero); |
| display: block; |
| color: var(--muted); |
| font: 10px var(--f-mono); |
| margin-bottom: 6px; |
| } |
| .intro { |
| font-size: 13px; |
| max-width: 85ch; |
| color: var(--muted); |
| } |
| .pipeline-steps { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 20px; |
| padding: 18px 0; |
| list-style: none; |
| border-block: 1px solid var(--line); |
| } |
| .pipeline-steps li { |
| display: grid; |
| gap: 7px; |
| font-size: 12px; |
| align-content: start; |
| } |
| .pipeline-steps b { |
| font-weight: 550; |
| } |
| .pipeline-steps span { |
| color: var(--muted); |
| } |
| .conversion-row { |
| display: grid; |
| grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2fr); |
| gap: 10px 30px; |
| padding: 22px 0; |
| border-bottom: 1px solid var(--line); |
| scroll-margin-top: 24px; |
| } |
| .conversion-row header { |
| display: flex; |
| align-items: baseline; |
| gap: 12px; |
| } |
| .conversion-row h2 { |
| font-size: 14px; |
| } |
| .route-id { |
| color: var(--accent); |
| font-size: 12px; |
| } |
| .conversion-row p { |
| font-size: 13px; |
| } |
| .conversion-meta { |
| grid-column: 2; |
| display: flex; |
| gap: 20px; |
| font-size: 11px; |
| color: var(--muted); |
| } |
| .body-list { |
| padding-left: 18px; |
| margin: 0; |
| display: grid; |
| gap: 10px; |
| font-size: 13px; |
| } |
| .sample-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 26px 22px; |
| } |
| .sample-tile { |
| min-width: 0; |
| color: var(--ink); |
| text-decoration: none; |
| } |
| .sample-tile .dataset-thumb { |
| width: 100%; |
| aspect-ratio: 16 / 10; |
| border-radius: 4px; |
| } |
| .sample-tile > div { |
| display: flex; |
| justify-content: space-between; |
| gap: 8px; |
| align-items: baseline; |
| padding-top: 10px; |
| flex-wrap: wrap; |
| } |
| .sample-tile h2 { |
| font-size: 14px; |
| } |
| .sample-tile span { |
| color: var(--muted); |
| font-size: 11px; |
| } |
| .reference-details { |
| border-top: 1px solid var(--line); |
| padding-top: 20px; |
| } |
| .reference-details .link-list { |
| margin-block: 16px; |
| } |
| @media (min-width: 1681px) { |
| .site-layout { |
| border-inline: 1px solid var(--line); |
| } |
| } |
| @media (max-width: 1230px) and (min-width: 901px) { |
| #app { |
| padding-inline: 28px; |
| } |
| .dataset-columns, |
| .dataset-row { |
| grid-template-columns: |
| minmax(190px, 1.6fr) minmax(110px, 1fr) minmax(110px, 1fr) |
| 75px; |
| gap: 12px; |
| } |
| .dataset-scale, |
| .dataset-columns span:nth-child(4) { |
| display: none; |
| } |
| .dataset-name { |
| grid-template-columns: 56px 1fr; |
| gap: 10px; |
| } |
| .dataset-thumb { |
| width: 56px; |
| } |
| } |
| @media (max-width: 900px) { |
| .site-layout { |
| display: block; |
| } |
| .sidebar { |
| position: sticky; |
| height: auto; |
| z-index: 10; |
| padding: 10px 20px; |
| border-right: 0; |
| border-bottom: 1px solid var(--line); |
| flex-direction: row; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| } |
| .brand { |
| padding: 0; |
| gap: 8px; |
| } |
| .brand strong { |
| display: flex; |
| gap: 5px; |
| font-size: 15px; |
| } |
| .brand strong span { |
| font-size: 15px; |
| font-weight: 450; |
| } |
| .brand-symbol svg { |
| width: 20px; |
| height: 20px; |
| } |
| #nav-toggle { |
| display: inline-grid; |
| margin-left: auto; |
| } |
| .sidebar-bottom { |
| margin: 0; |
| padding: 0; |
| } |
| .sidebar-bottom time { |
| display: none; |
| } |
| .sidebar nav { |
| display: none; |
| position: absolute; |
| top: 100%; |
| left: 0; |
| right: 0; |
| padding: 12px 20px; |
| background: var(--rail); |
| border-bottom: 1px solid var(--line); |
| } |
| .sidebar nav.is-open { |
| display: grid; |
| } |
| .sidebar nav > a.production-nav { |
| margin-top: 8px; |
| padding-top: 14px; |
| } |
| #app { |
| padding: 28px 24px 60px; |
| } |
| .dataset-columns, |
| .dataset-row { |
| grid-template-columns: |
| minmax(220px, 1.7fr) minmax(110px, 1fr) minmax(115px, 1fr) |
| 80px; |
| gap: 12px; |
| } |
| .dataset-scale, |
| .dataset-columns span:nth-child(4) { |
| display: none; |
| } |
| .preview-pair svg { |
| height: 280px; |
| } |
| } |
| @media (max-width: 650px) { |
| #app { |
| padding: 23px 16px 48px; |
| } |
| .sidebar { |
| padding-inline: 16px; |
| } |
| h1 { |
| font-size: 23px; |
| } |
| .view { |
| gap: 22px; |
| } |
| .page-heading { |
| gap: 8px; |
| } |
| .heading-actions .text-link { |
| font-size: 11px; |
| } |
| .catalog-view { |
| gap: 0; |
| } |
| .catalog-view .page-heading { |
| margin-bottom: 14px; |
| } |
| .filter-row { |
| gap: 7px; |
| } |
| .filter-row select { |
| flex: 1 1 40%; |
| max-width: none; |
| font-size: 12px; |
| } |
| .filter-row .icon-button { |
| margin-left: auto; |
| } |
| .dataset-columns { |
| display: none; |
| } |
| .results-toolbar { |
| border-bottom: 1px solid var(--line); |
| } |
| .dataset-row { |
| grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); |
| gap: 8px 16px; |
| padding-block: 16px; |
| position: relative; |
| } |
| .dataset-name { |
| grid-column: 1 / -1; |
| padding-right: 75px; |
| grid-template-columns: 62px minmax(0, 1fr); |
| gap: 12px; |
| } |
| .dataset-name h2 { |
| font-size: 14px; |
| } |
| .dataset-thumb { |
| width: 62px; |
| } |
| .dataset-status { |
| position: absolute; |
| right: 0; |
| top: 19px; |
| max-width: 80px; |
| } |
| .dataset-source, |
| .dataset-annotation, |
| .dataset-scale { |
| font-size: 11px; |
| } |
| .dataset-scale { |
| display: grid; |
| grid-column: 1 / -1; |
| grid-template-columns: minmax(0, 1fr); |
| gap: 2px; |
| } |
| .dataset-scale .muted { |
| display: none; |
| } |
| .detail-heading { |
| gap: 12px; |
| } |
| .detail-heading p { |
| font-size: 12px; |
| } |
| .detail-meta { |
| max-width: 85px; |
| font-size: 10px; |
| } |
| .section-tabs { |
| gap: 22px; |
| } |
| .section-tabs a { |
| font-size: 12px; |
| } |
| .facts > div { |
| grid-template-columns: 83px minmax(0, 1fr); |
| gap: 10px; |
| } |
| .facts { |
| font-size: 12px; |
| } |
| .preview-toolbar { |
| gap: 3px; |
| padding: 8px; |
| flex-wrap: wrap; |
| } |
| .preview-toolbar [data-sample] { |
| flex-basis: calc(100% - 82px); |
| } |
| .preview-toolbar [data-mode] { |
| max-width: 100%; |
| flex: 1; |
| } |
| .preview-pair svg { |
| height: 200px; |
| } |
| .preview-pair figcaption { |
| font-size: 10px; |
| padding: 6px; |
| min-height: 42px; |
| } |
| .preview-pair [data-loading] { |
| white-space: nowrap; |
| } |
| .preview-adjustments { |
| gap: 8px; |
| padding: 10px; |
| } |
| .preview-adjustments input { |
| width: 75px; |
| } |
| .preview-adjustments label { |
| gap: 5px; |
| } |
| .preview-adjustments .button-group { |
| margin-left: auto; |
| } |
| .official-figures { |
| grid-template-columns: 1fr; |
| } |
| .source-counts { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
| .source-counts a { |
| padding-block: 12px; |
| } |
| .tier-reference > div { |
| grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr) 35px; |
| gap: 8px; |
| font-size: 11px; |
| } |
| .tier-reference dt { |
| gap: 5px; |
| } |
| .recommendations, |
| .sample-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 20px 13px; |
| } |
| .sample-tile > div { |
| display: grid; |
| gap: 4px; |
| } |
| .sample-tile h2 { |
| font-size: 13px; |
| } |
| .pipeline-steps { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 20px; |
| } |
| .conversion-row { |
| grid-template-columns: 1fr; |
| gap: 10px; |
| } |
| .conversion-meta { |
| grid-column: 1; |
| } |
| .resource-links a { |
| font-size: 13px; |
| gap: 10px; |
| } |
| } |
| @media (prefers-reduced-motion: reduce) { |
| * { |
| scroll-behavior: auto !important; |
| } |
| } |
|
|
