/* =========================================================================== /dc/explorer , Condition Data Explorer, approved V1 redesign (2026-09-12) PAGE-SCOPED. Every selector starts at `.cdx-page`, the class explorer.html puts on . The printable layout (/dc/explorer-export) never carries that class and never loads this file, so nothing here can reach a PNG or a PDF: the shared builders (explorer-charts.js) and their base styles (explorer-charts.css) stay exactly as the export expects, and this file only restyles their markup for the reader page. THEMING. Two dark mechanisms are live on this site: the `data-theme` attribute (localStorage `rmv_theme`) and a `prefers-color-scheme` mirror for readers who never touched the toggle. Bare values are LIGHT; both dark selectors are written out. TYPE. Headings are the site's Source Serif 4 (main.css), at the approved mockup's own sizes and hierarchy, held in the --cdx-* size tokens below and stepped at the mockup's breakpoints (owner direction 2026-09-12: the comp's Lora was an older artifact, its heading SIZES are the approval). Body and UI text stay Inter on the site's --text-* scale and 17px root, and no label drops below --text-xs. UI labels that wear a heading tag say var(--font-sans) themselves. =========================================================================== */ .cdx-page { /* Headings and big numbers: navy in light, near-white in dark. */ --cdx-ink: var(--color-primary); /* Static panel borders: the lighter gold. Clickable controls keep the owner-locked 2px var(--color-accent) of THE BUTTON LAW. */ --cdx-gold: var(--color-accent-light); --cdx-soft: #efede4; --cdx-warm: #f3ede0; --cdx-art-bg: #efe9dc; /* Heading sizes, the approved mockup's pixels in rem on the 17px root. */ --cdx-h1: 2.706rem; /* 46px page title */ --cdx-h2: 1.765rem; /* 30px Start with a condition */ --cdx-h2-condition: 2.176rem; /* 37px selected condition */ --cdx-h2-section: 1.706rem; /* 29px section headings */ --cdx-h3: 1.294rem; /* 22px */ --cdx-h3-chart: 1.235rem; /* 21px chart titles */ --cdx-h3-slot: 1.176rem; /* 20px curated "coming" slots */ --cdx-card-name: 1.118rem; /* 19px catalogue card names */ --cdx-caption: 1.294rem; /* 22px pair caption */ --cdx-tagline: 1.176rem; /* 20px intro illustration line */ } :root[data-theme="dark"] .cdx-page { --cdx-ink: var(--color-text-strong); --cdx-gold: var(--color-accent); --cdx-soft: #232c3a; --cdx-warm: #28281f; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cdx-page { --cdx-ink: var(--color-text-strong); --cdx-gold: var(--color-accent); --cdx-soft: #232c3a; --cdx-warm: #28281f; } } .cdx-page [hidden] { display: none !important; } .cdx-page .cx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .cdx-page .cx-eyebrow, .cdx-page .ex-kicker { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 .55rem; } .cdx-page .cx-alert { color: var(--color-danger); font-weight: 600; } /* A generic bordered control (Browse all, Choose charts from an empty section). */ .cdx-page .cx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1rem; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: 8px; cursor: pointer; } .cdx-page .cx-btn:hover { border-color: var(--color-primary); } .cdx-page .cx-btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* --- Opening ------------------------------------------------------------------ */ /* The copy column IS the reading band, so the opening paragraph can take the shared --prose-measure with auto side margins and still start flush with the H1 (THE SYMMETRY LAW, without centring a left-aligned intro). */ .cdx-page .cx-intro { display: grid; grid-template-columns: minmax(0, var(--prose-measure)) 12rem; justify-content: space-between; align-items: center; gap: 2.5rem; margin: 0 0 2rem; } .cdx-page .cx-intro h1 { font-size: var(--cdx-h1); line-height: 1.25; letter-spacing: var(--tracking-display); color: var(--cdx-ink); margin: .6rem 0 1.25rem; } .cdx-page .cx-intro .lede { max-width: var(--prose-measure); margin: 0 auto; font-size: var(--text-md); line-height: 1.8; color: var(--color-text-muted); } .cdx-page .cx-intro-art { border-left: 1px solid var(--cdx-gold); padding-left: 1.5rem; } .cdx-page .cx-intro-art img { display: block; width: 174px; max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 0 0 .9rem; } .cdx-page .cx-intro-art p { font-family: var(--font-serif); font-size: var(--cdx-tagline); line-height: 1.45; color: var(--cdx-ink); margin: 0 0 .5rem; } .cdx-page .cx-intro-art p strong { font-weight: 600; } .cdx-page .cx-intro-art > span { display: block; font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); } /* --- Catalogue ---------------------------------------------------------------- */ .cdx-page .cx-discovery { border-top: 1px solid var(--color-border); padding-top: 2rem; } .cdx-page .cx-browse-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 1.5rem; } .cdx-page .cx-browse-top h2 { font-size: var(--cdx-h2); line-height: 1.25; letter-spacing: -.02em; color: var(--cdx-ink); margin: 0 0 .45rem; } .cdx-page .cx-browse-lede { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .cdx-page .cx-search-box { width: 46%; flex-shrink: 0; } .cdx-page .cx-search-box label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-bottom: .5rem; } .cdx-page .cx-search-field { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 .25rem 0 .9rem; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 9px; } .cdx-page .cx-search-field:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-search-field svg { flex: none; color: var(--color-primary); } .cdx-page .cx-search-field input { flex: 1; min-width: 0; min-height: 50px; padding: 0; font: inherit; font-size: var(--text-md); color: var(--color-text); background: transparent; border: 0; } /* The ring is drawn by .cx-search-field:focus-within above. */ .cdx-page .cx-search-field input:focus { outline: none; } .cdx-page .cx-search-field input::placeholder { color: var(--color-text-muted); } .cdx-page .cx-search-field input::-webkit-search-cancel-button { display: none; } .cdx-page .cx-search-clear { flex: none; min-width: 44px; min-height: 44px; font: inherit; font-size: var(--text-xl); line-height: 1; color: var(--color-text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; } .cdx-page .cx-search-clear:hover { color: var(--color-primary); } .cdx-page .cx-search-clear:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } .cdx-page .cx-catalogue-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0 0 1rem; font-size: var(--text-xs); color: var(--color-text-muted); } .cdx-page .cx-catalogue-meta p { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .cdx-page .cx-condition-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } /* THE BUTTON LAW: 2px accent border, border shift on hover; the lift and the gold cursor glow come from card-fx (class cardfx-pop). */ .cdx-page .cx-condition { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: stretch; width: 100%; min-height: 172px; padding: 0; overflow: hidden; font: inherit; text-align: left; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: 12px; cursor: pointer; } .cdx-page .cx-condition:hover { border-color: var(--color-primary); } .cdx-page .cx-condition:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-condition-text { grid-template-columns: minmax(0, 1fr); } /* Artwork is identity, not a finding. The source keeps its 320x240 attributes; the crop is layout (object-fit plus the approved object-position). */ .cdx-page .cx-art { display: block; position: relative; min-width: 0; overflow: hidden; background: var(--cdx-art-bg); } .cdx-page .cx-art img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .cdx-page .cx-condition > .cx-art { border-right: 1px solid var(--color-accent); } .cdx-page .cx-card-copy { display: flex; flex-direction: column; min-width: 0; padding: 1.1rem 1rem 1rem; } .cdx-page .cx-card-family { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: .5rem; } .cdx-page .cx-card-name { font-family: var(--font-serif); font-size: var(--cdx-card-name); font-weight: 600; line-height: 1.25; letter-spacing: -.016em; color: var(--cdx-ink); overflow-wrap: anywhere; margin-bottom: .3rem; } .cdx-page .cx-card-dc { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: .75rem; } .cdx-page .cx-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted); } .cdx-page .cx-card-bottom strong { font-weight: 600; color: var(--color-text); } .cdx-page .cx-card-arrow { font-size: var(--text-lg); line-height: 1; color: var(--color-primary); } /* Phone picker paging (Chunk 8D). The button only ever renders at 480px and below (explorer.js slices the catalogue there); 481px and above renders every match with no paging chrome. */ .cdx-page .ex-more { display: block; width: 100%; min-height: 44px; margin: 1rem 0 0; padding: .9rem 1rem; border: 2px solid var(--color-accent); border-radius: var(--radius-md); font: inherit; font-size: var(--text-md); font-weight: 700; color: var(--color-primary); background: var(--color-surface); cursor: pointer; } .cdx-page .ex-more:hover { border-color: var(--color-primary); } .cdx-page .ex-more:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-no-results { padding: 2rem; background: var(--color-surface); border: 1px solid var(--cdx-gold); border-radius: 12px; } .cdx-page .cx-no-results h3 { font-size: var(--cdx-h3); line-height: 1.25; color: var(--cdx-ink); margin: 0 0 .4rem; } .cdx-page .cx-no-results p { font-size: var(--text-md); color: var(--color-text-muted); margin: 0 0 1rem; } .cdx-page .cx-search-note { font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); margin: 1.25rem 0 0; } /* --- Selected condition ----------------------------------------------------------- */ .cdx-page .cx-dashboard { border-top: 1px solid var(--color-border); padding-top: 1.25rem; scroll-margin-top: calc(var(--nav-height) + 1rem); } .cdx-page .cx-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin: 0 0 .75rem; padding: 0; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); background: none; border: 0; cursor: pointer; } .cdx-page .cx-back:hover { text-decoration: underline; } .cdx-page .cx-back:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-condition-head { display: grid; grid-template-columns: 152px minmax(0, 1fr); align-items: center; gap: 1.6rem; margin-bottom: 1.6rem; } .cdx-page .cx-condition-head.cx-no-art { grid-template-columns: minmax(0, 1fr); } .cdx-page .cx-condition-head > .cx-art { width: 152px; height: 152px; border: 1px solid var(--cdx-gold); border-radius: 12px; } .cdx-page .cx-condition-head h2 { font-size: var(--cdx-h2-condition); line-height: 1.25; letter-spacing: -.027em; color: var(--cdx-ink); margin: 0 0 .5rem; } .cdx-page .cx-condition-head h2:focus { outline: none; } .cdx-page .cx-condition-head h2:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-official-name { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); margin: 0 0 .55rem; } .cdx-page .cx-counts { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .cdx-page .cx-counts strong { font-weight: 600; color: var(--color-text); } .cdx-page .cx-dashboard-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.25rem; margin: 0 0 .75rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .cdx-page .cx-section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.25rem; } .cdx-page .cx-section-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); text-decoration: none; border-bottom: 2px solid transparent; } .cdx-page .cx-section-nav a:hover { border-bottom-color: var(--color-accent); } .cdx-page .cx-section-nav a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Export buttons. THE BUTTON LAW: 2px accent border + card-fx gold cursor glow (cardfx-pop) + hover lift. PNG is the filled primary action. */ .cdx-page .cx-exports { display: flex; gap: .55rem; flex-shrink: 0; } .cdx-page .ex-export { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; padding: .55rem 1rem; border: 2px solid var(--color-accent); border-radius: 8px; font: inherit; font-size: var(--text-sm); font-weight: 700; color: var(--color-primary); background: var(--color-surface); cursor: pointer; } .cdx-page .ex-export[data-format="png"] { color: var(--color-on-primary); background: var(--color-primary); } .cdx-page .ex-export:hover:not(:disabled) { border-color: var(--color-primary); } .cdx-page .ex-export:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } /* Not colour alone: busy also changes the cursor and underlines the label. */ .cdx-page .ex-export:disabled { cursor: progress; opacity: .75; text-decoration: underline dotted; } .cdx-page .cx-export-config { margin: 0 0 1.25rem; } .cdx-page .ex-export-opt { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; } .cdx-page .ex-export-opt input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); cursor: pointer; } .cdx-page .cx-export-message { margin: .6rem 0 0; padding: .8rem 1.1rem; border-left: 3px solid var(--cdx-gold); background: var(--cdx-warm); font-size: var(--text-sm); color: var(--color-text); } /* Collapsed but still rendered while empty, so the live region keeps announcing. */ .cdx-page .cx-export-message:empty { margin: 0; padding: 0; border: 0; } /* Headline metric cards (shared .oc-* markup, restyled for this page only). */ .cdx-page .oc-cards { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .8rem; margin: 1.25rem 0; } .cdx-page .oc-card { padding: 1.05rem 1.2rem; background: var(--color-surface); border: 1px solid var(--cdx-gold); border-radius: var(--radius-md); } .cdx-page .oc-card-l { min-height: 1.1rem; margin-bottom: .5rem; font-size: var(--text-xs); color: var(--color-text-muted); } .cdx-page .oc-card-v { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--cdx-ink); font-variant-numeric: tabular-nums; } .cdx-page .oc-card-sub { margin-top: .5rem; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); } /* About this condition and Choose charts: native disclosures, closed at load. */ .cdx-page .cx-basics, .cdx-page .cx-customize { margin: 1rem 0; background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-md); } .cdx-page .cx-basics > summary, .cdx-page .cx-customize > summary { display: flex; align-items: center; justify-content: space-between; gap: .9rem; min-height: 54px; padding: .85rem 1.2rem; font-size: var(--text-md); font-weight: 600; color: var(--color-text); list-style: none; border-radius: 8px; cursor: pointer; } .cdx-page .cx-basics > summary::-webkit-details-marker, .cdx-page .cx-customize > summary::-webkit-details-marker { display: none; } .cdx-page .cx-basics > summary > span, .cdx-page .cx-customize > summary > span { font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); text-align: right; } .cdx-page .cx-basics > summary:hover, .cdx-page .cx-customize > summary:hover { background: var(--cdx-soft); } .cdx-page .cx-basics > summary:focus-visible, .cdx-page .cx-customize > summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-basics[open] > summary, .cdx-page .cx-customize[open] > summary { border-bottom: 1px solid var(--color-border); border-radius: 8px 8px 0 0; } .cdx-page .cx-customize-body { padding: 1.1rem 1.2rem; } .cdx-page .cx-customize-body > p { margin: 0 0 1rem; font-size: var(--text-sm); color: var(--color-text-muted); } .cdx-page .cx-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.3rem; } .cdx-page .cx-choice { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .55rem .7rem; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; } .cdx-page .cx-choice:has(input:checked) { background: var(--cdx-warm); border-color: var(--cdx-gold); } .cdx-page .cx-choice:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-choice input { flex: 0 0 18px; width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--color-primary); cursor: pointer; } .cdx-page .cx-zero-note { margin: 1.25rem 0; padding: 1.1rem 1.2rem; font-size: var(--text-md); color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 8px; } /* The basics blocks inside About this condition. */ .cdx-page .ex-basics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 0; padding: 1.25rem 1.2rem; } .cdx-page .ex-basic { padding: 0; background: transparent; border: 0; border-radius: 0; } .cdx-page .ex-basic h3 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 .6rem; } .cdx-page .ex-basic p { margin: 0; font-size: var(--text-sm); line-height: 1.7; color: var(--color-text); } .cdx-page .ex-pills { gap: .3rem; margin-bottom: .75rem; } .cdx-page .ex-pill { flex: 0 1 auto; min-width: 2.5rem; padding: .3rem .45rem; font-size: var(--text-xs); font-weight: 600; border-radius: 5px; } /* Darker fills than the export's so white text on them passes AA on screen. */ .cdx-page .ex-pill-b { background: #35638b; } .cdx-page .ex-pill-g { background: #357144; } .cdx-page .ex-pill-y { background: #85600e; } .cdx-page .ex-pill-r { background: #a64a32; } /* --- Chart sections ------------------------------------------------------------- */ .cdx-page .cx-chart-section, .cdx-page .cx-deep { margin: 2rem 0 0; scroll-margin-top: calc(var(--nav-height) + 1rem); } .cdx-page .cx-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem; margin-bottom: 1.1rem; } .cdx-page .cx-section-heading h2 { font-size: var(--cdx-h2-section); line-height: 1.25; letter-spacing: -.02em; color: var(--cdx-ink); margin: 0; } .cdx-page .cx-section-heading > a { flex-shrink: 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); } .cdx-page .cx-section-empty { margin: 0 0 1rem; padding-bottom: .85rem; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); } .cdx-page .cx-section-empty .cx-btn { margin-left: .5rem; } .cdx-page .cx-section-note { margin: -.4rem 0 1.1rem; font-size: var(--text-sm); color: var(--color-text-muted); } .cdx-page .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.05rem; margin-bottom: 0; } .cdx-page .ex-grid > .cx-fullchart, .cdx-page .ex-grid > .ex-span, .cdx-page .ex-grid > #chart-dockets { grid-column: 1 / -1; } .cdx-page .ex-chart { min-width: 0; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--cdx-gold); border-radius: 12px; } .cdx-page .ex-chart h3 { font-size: var(--cdx-h3-chart); line-height: 1.4; color: var(--cdx-ink); margin: 0 0 .6rem; } .cdx-page .ex-chart .note { margin: 0 0 1.35rem; font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-muted); } .cdx-page .ex-chart .src { margin: 1.2rem 0 0; padding-top: .75rem; border-top: 1px solid var(--color-border); font-size: var(--text-xs); line-height: 1.7; color: var(--color-text-muted); } .cdx-page .oc-bar { display: grid; grid-template-columns: minmax(7.5rem, 43%) minmax(1.25rem, 1fr) 3rem; align-items: center; gap: .85rem; margin: 1rem 0; } .cdx-page .oc-bar-l { width: auto; min-width: 0; font-size: var(--text-sm); line-height: 1.45; overflow-wrap: anywhere; } /* The builder writes a sample size as an inline-styled span; lift it to the floor. */ .cdx-page .oc-bar-l > span { display: block; margin-top: .15rem; font-size: var(--text-xs) !important; } .cdx-page .oc-bar-track { min-width: 0; height: 12px; border-radius: 3px; background: var(--cdx-soft); } .cdx-page .oc-bar-v { width: auto; font-size: var(--text-sm); font-weight: 600; text-align: right; color: var(--color-text); } .cdx-page .oc-accent { background: var(--cdx-gold); } .cdx-page .ex-donut-wrap { gap: 1.75rem; } .cdx-page .ex-donut { width: 174px; height: 174px; } .cdx-page .ex-donut-center { fill: var(--color-text); } .cdx-page .ex-legend { font-size: var(--text-sm); } .cdx-page .ex-legend li { flex-wrap: wrap; gap: .45rem; margin-bottom: .55rem; } .cdx-page .ex-legend .v { font-weight: 600; color: var(--color-text); } .cdx-page .oc-dockets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; } .cdx-page .oc-dk { min-width: 0; padding: .85rem; background: var(--color-bg); border: 0; border-radius: 8px; } .cdx-page .oc-dk-h { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .cdx-page .oc-dk-n { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); } .cdx-page .oc-dk-note { margin: .5rem 0; font-size: var(--text-xs); color: var(--color-text-muted); } /* The lane label column is never narrower than its word ("Remanded" broke mid-word in the three narrow lanes between 481 and 760px). */ .cdx-page .oc-dk .oc-bar { grid-template-columns: minmax(max-content, 1fr) 1fr 2.6rem; gap: .5rem; } .cdx-page .oc-dk .oc-bar-l, .cdx-page .oc-dk .oc-bar-v { width: auto; font-size: var(--text-xs); } .cdx-page .ex-lift { gap: 1.6rem; margin: 1.75rem 0 1.25rem; } .cdx-page .ex-lift-bar { width: 65%; margin: 0 auto .75rem; } .cdx-page .ex-lift-v { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--color-text); } .cdx-page .ex-lift-l { margin-top: .35rem; font-size: var(--text-xs); line-height: 1.6; } .cdx-page .ex-lift-callout { padding: .7rem; font-size: var(--text-sm); line-height: 1.6; background: var(--cdx-warm); border-radius: 7px; } /* --- Secondary deep dive ---------------------------------------------------------- */ .cdx-page .cx-deep { padding: 1.75rem; background: var(--cdx-soft); border: 2px solid var(--cdx-gold); border-radius: 14px; } .cdx-page .cx-pair-select { margin: 1.4rem 0 1.1rem; } .cdx-page .cx-pair-select label { display: block; margin-bottom: .5rem; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .cdx-page .cx-pair-select select { width: 100%; min-width: 0; min-height: 48px; padding: .7rem .8rem; font: inherit; font-size: var(--text-md); color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 8px; } .cdx-page .cx-pair-select select:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .cdx-page .cx-pair-help { margin: .5rem 0 0; font-size: var(--text-xs); color: var(--color-text-muted); } .cdx-page .cx-pair-caption { margin: 1rem 0; font-family: var(--font-serif); font-size: var(--cdx-caption); font-weight: 600; line-height: 1.5; color: var(--cdx-ink); } .cdx-page .ex-attr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .cdx-page .ex-attr-list li, .cdx-page .ex-attr-none { padding: .75rem .9rem; font-size: var(--text-sm); line-height: 1.7; background: var(--cdx-warm); border-left: 3px solid var(--cdx-gold); border-radius: 0 7px 7px 0; } .cdx-page .ex-quote { margin: 0 0 1.1rem; padding: .65rem 1rem; background: var(--color-bg); border-left: 3px solid var(--cdx-gold); border-radius: 0 6px 6px 0; } /* Board quotations are body text: Inter, keeping the shared italic (owner direction 2026-09-12: serif is for headings only). */ .cdx-page .ex-quote p { margin: 0 0 .7rem; font-size: var(--text-md); line-height: 1.8; } .cdx-page .ex-quote a { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } .cdx-page .ex-curated-slot { min-width: 0; padding: 1.4rem; background: var(--color-bg); border: 1px dashed var(--color-border-strong); border-radius: 10px; } .cdx-page .ex-curated-slot h3 { font-size: var(--cdx-h3-slot); color: var(--cdx-ink); } .cdx-page .ex-curated-slot .tag { display: inline-block; margin-left: .4rem; padding: .2rem .45rem; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; color: var(--color-text-muted); background: var(--cdx-soft); border-radius: 4px; } .cdx-page .ex-curated-slot p { margin: .4rem 0 0; font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-muted); } /* --- Related and source ------------------------------------------------------------ */ .cdx-page .cx-related { margin: 3rem 0 1.5rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .cdx-page .cx-related .rel-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cdx-page .cx-source-note { margin: 0; padding: .5rem 0 1.25rem; font-size: var(--text-xs); line-height: 1.8; color: var(--color-text-muted); } /* --- Widths ------------------------------------------------------------------------- */ @media (max-width: 1100px) { .cdx-page { --cdx-h1: 2.412rem; } /* 41px */ .cdx-page .cx-condition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cdx-page .cx-intro { grid-template-columns: minmax(0, var(--prose-measure)) 10.5rem; gap: 2rem; } .cdx-page .cx-dashboard-tools { flex-wrap: wrap; align-items: flex-start; } .cdx-page .cx-related .rel-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .cdx-page { --cdx-h1: 2.176rem; /* 37px */ --cdx-h2-condition: 1.647rem; /* 28px */ --cdx-h2-section: 1.588rem; /* 27px */ --cdx-card-name: 1.059rem; /* 18px */ --cdx-caption: 1.176rem; /* 20px */ } .cdx-page .cx-intro h1 { letter-spacing: -.027em; } .cdx-page .cx-intro { grid-template-columns: minmax(0, 1fr); gap: 0; } .cdx-page .cx-intro-art { display: none; } .cdx-page .cx-browse-top { display: block; margin-bottom: 1.25rem; } .cdx-page .cx-search-box { width: 100%; margin-top: 1.25rem; } .cdx-page .cx-condition { grid-template-columns: 90px minmax(0, 1fr); min-height: 166px; } .cdx-page .cx-condition-head { grid-template-columns: 100px minmax(0, 1fr); gap: 1.2rem; } .cdx-page .cx-condition-head > .cx-art { width: 100px; height: 115px; } .cdx-page .cx-counts { display: block; } .cdx-page .cx-counts > span { display: block; } .cdx-page .oc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cdx-page .ex-basics { grid-template-columns: minmax(0, 1fr); } .cdx-page .ex-grid { grid-template-columns: minmax(0, 1fr); } .cdx-page .ex-attr-list { grid-template-columns: minmax(0, 1fr); } .cdx-page .cx-deep { padding: 1.35rem; } } /* One comfortable illustrated column between the phone and two-column widths. */ @media (min-width: 481px) and (max-width: 650px) { .cdx-page { --cdx-card-name: 1.353rem; } /* 23px */ .cdx-page .cx-condition-grid { grid-template-columns: minmax(0, 1fr); } .cdx-page .cx-condition { grid-template-columns: 116px minmax(0, 1fr); } } @media (max-width: 640px) { .cdx-page .cx-related .rel-cards { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .cdx-page { --cdx-h1: 2rem; /* 34px */ --cdx-h2: 1.706rem; /* 29px */ --cdx-h2-condition: 1.706rem; /* 29px */ --cdx-h3-chart: 1.294rem; /* 22px */ --cdx-card-name: 1.235rem; /* 21px */ --cdx-caption: 1.118rem; /* 19px */ } .cdx-page .cx-intro h1 { line-height: 1.15; margin: .7rem 0 1.2rem; } .cdx-page .cx-condition-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; } .cdx-page .cx-condition { grid-template-columns: 106px minmax(0, 1fr); min-height: 160px; } .cdx-page .cx-card-copy { padding: 1.1rem 1rem 1rem; } .cdx-page .cx-condition-head { grid-template-columns: 75px minmax(0, 1fr); align-items: start; gap: .9rem; } .cdx-page .cx-condition-head > .cx-art { width: 75px; height: 90px; } /* One row of three: a long label wraps inside its own column instead of pushing a link onto a second row. */ .cdx-page .cx-section-nav { display: grid; grid-auto-flow: column; justify-content: space-between; width: 100%; gap: 0 .6rem; } .cdx-page .cx-section-nav a { font-size: var(--text-xs); line-height: 1.25; } .cdx-page .cx-exports { width: 100%; } .cdx-page .ex-export { flex: 1; padding: .6rem .5rem; } .cdx-page .cx-choices { grid-template-columns: minmax(0, 1fr); } .cdx-page .oc-card { padding: .95rem .8rem; } .cdx-page .oc-card-v { font-size: var(--text-xl); } .cdx-page .cx-section-heading { display: block; } .cdx-page .cx-section-heading > a { display: inline-block; margin-top: .75rem; } .cdx-page .ex-chart { padding: 1.2rem 1rem; } .cdx-page .ex-donut-wrap { justify-content: center; } .cdx-page .ex-legend { width: 100%; } .cdx-page .oc-bar { grid-template-columns: minmax(6.25rem, 44%) minmax(.9rem, 1fr) 2.75rem; gap: .6rem; margin: 1.15rem 0; } .cdx-page .oc-dockets { grid-template-columns: minmax(0, 1fr); } .cdx-page .cx-deep { padding: 1.2rem .85rem; } .cdx-page .cx-deep .ex-chart { padding: 1.2rem .85rem; } .cdx-page .cx-deep .oc-bar { grid-template-columns: minmax(6rem, 49%) minmax(.75rem, 1fr) 2.5rem; gap: .5rem; } .cdx-page .cx-no-results { padding: 1.5rem 1.2rem; } } @media (max-width: 350px) { .cdx-page { --cdx-h2-condition: 1.471rem; /* 25px */ --cdx-card-name: 1.176rem; /* 20px */ } .cdx-page .cx-condition { grid-template-columns: 89px minmax(0, 1fr); } .cdx-page .cx-card-copy { padding: 1rem .8rem; } .cdx-page .cx-condition-head { grid-template-columns: 62px minmax(0, 1fr); gap: .75rem; } .cdx-page .cx-condition-head > .cx-art { width: 62px; height: 80px; } .cdx-page .cx-section-nav { gap: 0 .5rem; } /* At 320 a long single word (Gastroesophageal, hypersomnolence) cannot fit a side label, so the label takes its own line above the bar and value. */ .cdx-page .oc-bar, .cdx-page .cx-deep .oc-bar { grid-template-columns: minmax(0, 1fr) 2.5rem; gap: .3rem .5rem; } .cdx-page .oc-bar > .oc-bar-l { grid-column: 1 / -1; } .cdx-page .oc-dk .oc-bar { grid-template-columns: minmax(max-content, 1fr) 1fr 2.4rem; } .cdx-page .oc-dk .oc-bar > .oc-bar-l { grid-column: auto; } /* The two download buttons keep one line each. */ .cdx-page .cx-exports { gap: .4rem; } .cdx-page .ex-export { padding: .6rem .3rem; font-size: var(--text-xs); } }