/* =========================================================================== /dc/mos-exposures , approved redesign (2026-09-11 handoff) PAGE-SCOPED ON PURPOSE. Every selector below starts at `.mos-page`, the class this one HTML file puts on . The shared MOS lookup widget also renders on the hearing-code pages (/dc/code/6260 and friends) as a noise-only root, and those must keep the exact chrome they have today, so nothing here may reach them. That is also why this is a NEW stylesheet and not an addition to /css/dc.css: dc.css is service-worker precached, so a byte change there costs a CACHE_NAME bump on every guide page. THEMING. The site runs TWO dark mechanisms: the `data-theme` attribute (localStorage `rmv_theme`, JS-applied) and a `prefers-color-scheme` mirror for readers who never touched the toggle. Bare `:root` therefore holds the LIGHT values and BOTH dark selectors are written out. A token defined only inside one of them is a half-themed token. =========================================================================== */ .mos-page { /* Raised inner surface: the band behind table headers, family hits and the listing-context body. --color-surface is the panel itself, so this has to be a step away from it in BOTH themes, not a transparent overlay that disappears on one of them. */ --mx-surface-2: #eef2f7; /* Gold INK. Learned on the VA Math rebuild and it holds here: --color-accent (#b07a1f light) is a BORDER colour on this palette, 3.72:1 as text on the white panel, and --color-accent-light (#d9a247) is 1.97:1. Gold WORDS get this token instead; the owner-locked 2px gold borders keep --color-accent. */ --mx-accent-ink: #8a5e12; /* The illustration mat. Fixed in both themes deliberately: these are ivory editorial illustrations on an ivory ground, and flipping the mat to navy in dark mode puts a hard bright rectangle in the middle of the card. */ --mx-art-bg: #f1ecdf; --mx-input-bg: #ffffff; --mx-level-low-bg: #e9eef3; --mx-level-low-ink: #40516a; --mx-level-mod-bg: #ffebd7; --mx-level-mod-ink: #884511; --mx-level-high-bg: #e0f2e9; --mx-level-high-ink: #225c45; /* Contextual-tip inks. Measured on --mx-surface-2, the ground the tip actually sits on here, not on the white card the controller's inline hex was written for. */ --mx-tip-moderate: #8a3d00; --mx-tip-high: #1b5e21; --mx-tip-notrated: #44536b; } :root[data-theme="dark"] .mos-page { --mx-surface-2: #13253a; --mx-accent-ink: #f5c862; --mx-input-bg: #101b28; --mx-level-low-bg: #273343; --mx-level-low-ink: #d0d9e5; --mx-level-mod-bg: #4b3524; --mx-level-mod-ink: #ffc58c; --mx-level-high-bg: #1b423a; --mx-level-high-ink: #a9e8d2; --mx-tip-moderate: #ffb066; --mx-tip-high: #7fd6a0; --mx-tip-notrated: #b7c4d8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mos-page { --mx-surface-2: #13253a; --mx-accent-ink: #f5c862; --mx-input-bg: #101b28; --mx-level-low-bg: #273343; --mx-level-low-ink: #d0d9e5; --mx-level-mod-bg: #4b3524; --mx-level-mod-ink: #ffc58c; --mx-level-high-bg: #1b423a; --mx-level-high-ink: #a9e8d2; --mx-tip-moderate: #ffb066; --mx-tip-high: #7fd6a0; --mx-tip-notrated: #b7c4d8; } } /* --- Opening: intro beside the tool ------------------------------------- */ .mos-page .mx-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 2.75rem; align-items: start; margin: 0 0 2.5rem; } .mos-page .mx-eyebrow { display: block; font-size: .75rem; /* 12px floor: .72rem computed to 11.56px */ font-weight: 800; letter-spacing: .14em; color: var(--mx-accent-ink); margin-bottom: .65rem; } .mos-page .mx-intro h1 { margin: 0; } .mos-page .mx-lede { font-size: 1.02rem; line-height: 1.75; color: var(--color-text-muted); margin: 1.1rem 0 0; max-width: var(--prose-measure); } .mos-page .mx-intro-links { display: grid; gap: 0; margin-top: 1.1rem; max-width: 24rem; } .mos-page .mx-intro-links a { display: flex; justify-content: space-between; gap: .75rem; align-items: center; min-height: 44px; padding: .6rem 0; border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: .88rem; color: var(--color-primary); text-decoration: none; } .mos-page .mx-intro-links a:hover, .mos-page .mx-intro-links a:focus-visible { text-decoration: underline; } .mos-page .mx-intro-note { color: var(--color-text-muted); font-size: .82rem; line-height: 1.6; margin-top: 1.2rem; max-width: 24rem; } /* --- The lookup panel ---------------------------------------------------- */ .mos-page .mx-lookup-panel { border: 2px solid var(--color-accent); border-radius: var(--radius-lg); background: var(--color-surface); padding: 1.75rem; min-width: 0; box-shadow: var(--shadow-md); scroll-margin-top: 84px; } .mos-page .mx-tool-heading { display: flex; gap: .65rem; justify-content: space-between; align-items: flex-start; margin-bottom: 1.4rem; } .mos-page .mx-tool-heading .mx-eyebrow { margin-bottom: .45rem; } /* keeps the 12px floor */ .mos-page .mx-tool-heading h2 { font-size: 1.6rem; margin: 0; border-bottom: none; padding-bottom: 0; color: var(--color-primary); } .mos-page .mx-step-mark { font-family: var(--font-serif, 'Source Serif 4', Georgia, serif); font-size: 2.3rem; line-height: 1; color: var(--color-accent); opacity: .55; } .mos-page .mx-field-caption { display: block; font-size: .85rem; font-weight: 700; color: var(--color-text); margin-bottom: .4rem; } .mos-page #mos-noise select, .mos-page #mos-noise .mos-search-input { width: 100%; font-size: 1rem !important; background: var(--mx-input-bg); color: var(--color-text); padding: .7rem .8rem !important; min-height: 50px !important; border: 1px solid var(--color-control-border) !important; border-radius: var(--radius-sm) !important; } .mos-page #mos-noise .mos-branch-hint { font-size: .78rem; line-height: 1.5; color: var(--color-text-muted); margin: .5rem 0 1.1rem; } .mos-page #mos-noise fieldset { display: grid !important; grid-template-columns: 1fr 1fr; gap: .5rem !important; border: 0 !important; padding: 0 !important; margin: 0 0 1.25rem !important; } .mos-page #mos-noise legend { font-size: .85rem !important; padding: 0 !important; font-weight: 700; margin-bottom: .5rem; color: var(--color-text) !important; } .mos-page #mos-noise fieldset label { position: relative; gap: .5rem !important; align-items: flex-start !important; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: .65rem .75rem; min-height: 64px !important; background: var(--mx-input-bg); font-size: .88rem !important; font-weight: 600; line-height: 1.4; } .mos-page #mos-noise fieldset label:has(input:checked) { background: var(--mx-surface-2); border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); } .mos-page #mos-noise fieldset label small { display: block; font-size: .72rem; font-weight: 400; margin-top: .2rem; color: var(--color-text-muted); } .mos-page #mos-noise fieldset input { accent-color: var(--color-primary); margin: .15rem 0 0; flex: none; } .mos-page #mos-noise fieldset label:has(input:disabled) { opacity: .62; } .mos-page #mos-noise .mos-search-row { flex-wrap: nowrap !important; margin-bottom: .5rem !important; } .mos-page #mos-noise .mos-search-input { min-width: 0 !important; } .mos-page #mos-noise .mos-search-btn { background: var(--color-primary) !important; color: var(--color-on-primary) !important; min-height: 50px !important; padding: .6rem 1.05rem !important; font-size: .88rem !important; flex: none; } .mos-page #mos-noise .mos-search-btn:disabled { opacity: .45; } .mos-page #mos-noise input:disabled, .mos-page #mos-noise select:disabled { opacity: .6; } .mos-page #mos-noise .mos-suggest-status { font-size: .78rem; color: var(--color-text-muted); margin: 0 0 .85rem; } .mos-page .mos-suggest-list { max-height: 280px; overflow: auto; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--mx-input-bg); } .mos-page .mos-suggest-option { min-height: 44px; font-size: .84rem; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .6rem; align-items: center; } .mos-page .mos-suggest-option .mos-suggest-code { min-width: 0; } .mos-page .mos-suggest-option[aria-selected="true"], .mos-page .mos-suggest-option.is-active, .mos-page .mos-suggest-option:hover { background: var(--mx-surface-2); color: var(--color-text); } /* Related tools under the opening (2026-09-15, owner request). */ .mos-page .mx-next { display: grid; gap: .7rem; margin-top: 1.4rem; } .mos-page .mx-next-card { display: flex; align-items: center; gap: .9rem; padding: .7rem .85rem; background: var(--color-surface); border: 2px solid var(--color-accent); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; transition: border-color .15s, transform .15s; } .mos-page .mx-next-card:hover, .mos-page .mx-next-card:focus-visible { border-color: var(--color-primary); transform: translateY(-2px); } .mos-page .mx-next-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--mx-surface-2); } .mos-page .mx-next-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .mos-page .mx-next-copy { display: block; min-width: 0; } .mos-page .mx-next-title { display: block; font-weight: 700; font-size: .95rem; color: var(--color-primary); line-height: 1.3; } .mos-page .mx-next-desc { display: block; margin-top: .2rem; font-size: .82rem; line-height: 1.45; color: var(--color-text-muted); } @media (prefers-reduced-motion: reduce) { .mos-page .mx-next-card:hover { transform: none; } } .mos-page #mos-noise > .mos-source-note { font-size: .76rem !important; font-style: normal !important; line-height: 1.55; color: var(--color-text-muted) !important; margin: 1rem 0 0 !important; } .mos-page .mx-tool-boundary { font-size: .78rem; color: var(--color-text-muted); line-height: 1.6; border-top: 1px solid var(--color-border); padding-top: .9rem; margin: 1rem 0 0; } /* --- What the answer is -------------------------------------------------- */ .mos-page .mx-result-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1.5rem 0 .8rem; padding-top: 1.35rem; border-top: 1px solid var(--color-border); } .mos-page .mx-result-title h3 { font-size: 1.25rem; margin: 0; color: var(--color-primary); } .mos-page .mx-result-title span { font-size: .72rem; color: var(--color-text-muted); text-align: right; } .mos-page .mx-match-warning { border-left: 3px solid var(--color-accent); background: var(--mx-surface-2); font-size: .84rem !important; color: var(--color-text) !important; padding: .75rem .9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 .9rem !important; } .mos-page .mos-results-wrap { max-height: 410px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .mos-page .mos-results th { position: sticky; top: 0; z-index: 1; background: var(--mx-surface-2); color: var(--color-text-muted); font-size: .72rem; font-weight: 500; text-align: left; padding: .6rem .75rem; } .mos-page .mos-results td { padding: .85rem .75rem; border-top: 1px solid var(--color-border); vertical-align: top; } .mos-page .mos-results td.col-mos { font-weight: 800; white-space: nowrap; color: var(--color-primary); } /* The level badge carries a meaning, so it may not be colour-only: the level WORD is always inside it. These rules only replace the controller's inline hex, which was tuned for a white card and drops to ~2:1 in dark mode. */ .mos-page .mos-level-badge { border-radius: 5px; padding: .18rem .45rem; font-weight: 700; font-size: .72rem; min-width: 45px; display: inline-block; } .mos-page .mos-level-badge[data-level="Low"] { background: var(--mx-level-low-bg) !important; color: var(--mx-level-low-ink) !important; } .mos-page .mos-level-badge[data-level="Moderate"] { background: var(--mx-level-mod-bg) !important; color: var(--mx-level-mod-ink) !important; } .mos-page .mos-level-badge[data-level="Highly Probable"] { background: var(--mx-level-high-bg) !important; color: var(--mx-level-high-ink) !important; } .mos-page .mos-level-badge.not-rated { background: var(--mx-surface-2); color: var(--color-text-muted); border: 1px dashed var(--color-text-muted); } .mos-page .mx-listing-context { margin-top: .9rem; border-top: 1px solid var(--color-border); font-size: .84rem; } .mos-page .mx-listing-context > summary { padding: .75rem 0; color: var(--color-primary); font-weight: 600; min-height: 44px; display: flex; align-items: center; } .mos-page [data-mos-listing-context] { background: var(--mx-surface-2); color: var(--color-text); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-top: .75rem; font-size: .85rem; border-left: 4px solid var(--color-border); } /* The tone is a second, redundant signal: the level word is already in the badge and in the sentence, so a reader who cannot separate these hues loses nothing. */ .mos-page [data-mos-tone="moderate"] { border-left-color: var(--mx-tip-moderate); } .mos-page [data-mos-tone="high"] { border-left-color: var(--mx-tip-high); } .mos-page [data-mos-tone="notrated"] { border-left-color: var(--mx-tip-notrated); } .mos-page [data-mos-tone="moderate"] > strong:first-child { color: var(--mx-tip-moderate); } .mos-page [data-mos-tone="high"] > strong:first-child { color: var(--mx-tip-high); } .mos-page .mx-listing-qualification { font-size: .78rem; color: var(--color-text-muted); margin: .25rem 0 .5rem; } .mos-page .mos-fam-hit { border: 1px solid var(--color-accent) !important; border-left: 4px solid var(--color-accent) !important; border-radius: var(--radius-md) !important; padding: 1rem !important; background: var(--mx-surface-2); margin: .75rem 0 !important; } .mos-page .mx-family-topics { display: flex; flex-wrap: wrap; gap: .5rem; border-top: 1px solid var(--color-border); padding-top: .75rem; margin-top: .5rem; } .mos-page .mx-family-topics a { font-size: .78rem; background: var(--color-surface); border: 1px solid var(--color-border); padding: .45rem .7rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-primary); min-height: 44px; display: inline-flex; align-items: center; } .mos-page .mx-next-heading { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--color-text-muted); margin: 1.4rem 0 .55rem; } .mos-page .mx-next-link { display: flex; justify-content: space-between; gap: .9rem; align-items: center; padding: .8rem 0; text-decoration: none; border-top: 1px solid var(--color-border); font-size: .88rem; font-weight: 600; color: var(--color-primary); min-height: 48px; width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; } .mos-page .mx-next-link small { font-size: .78rem; font-weight: 400; display: block; color: var(--color-text-muted); margin-top: .18rem; } /* --- Browse: the ten job families --------------------------------------- */ .mos-page .mx-browse { border-top: 1px solid var(--color-border); padding-top: 2.25rem; scroll-margin-top: 84px; } .mos-page .mx-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 1.5rem; } .mos-page .mx-section-heading h2 { font-size: 1.9rem; margin: 0 0 .5rem; border-bottom: none; padding-bottom: 0; color: var(--color-primary); } .mos-page .mx-section-heading p { font-size: .95rem; color: var(--color-text-muted); max-width: var(--prose-measure); margin: 0; } .mos-page .mx-section-heading > a { white-space: nowrap; font-size: .8rem; color: var(--color-primary); display: inline-flex; align-items: center; min-height: 44px; } .mos-page .mx-family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } /* THE BUTTON LAW: a clickable card carries the 2px gold border and the cursor-following glow (class `cardfx-pop`, wired by card-fx.js, which re-scans on DOM mutation and therefore picks these up although they are built in script). Hover lifts and shifts the border to --color-primary. */ .mos-page .job-card { border: 2px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); padding: 1.3rem; display: flex; flex-direction: column; position: relative; overflow: hidden; min-height: 230px; text-decoration: none; color: var(--color-text); transition: transform .18s, border-color .18s, background .18s; } .mos-page .job-card:hover { transform: translateY(-3px); background: var(--color-surface-hover); border-color: var(--color-primary); } .mos-page .job-card .mx-card-top { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: 1.1rem; } .mos-page .job-card .mx-family-index { font-size: .72rem; letter-spacing: .12em; color: var(--color-text-muted); } .mos-page .job-card .mx-card-kicker { color: var(--mx-accent-ink); font-size: .72rem; letter-spacing: .04em; font-weight: 700; } .mos-page .job-card h3 { font-size: 1.35rem; margin: 0 0 .65rem; max-width: 15rem; color: var(--color-primary); } .mos-page .job-card p { font-size: .84rem; color: var(--color-text-muted); line-height: 1.65; max-width: 21rem; margin: 0 0 1.1rem; } .mos-page .job-card .mx-card-cta { color: var(--color-primary); font-size: .78rem; font-weight: 700; margin-top: auto; display: flex; justify-content: space-between; gap: .6rem; } /* The illustration is the full 3:2 scene inside a compact ivory box, never a crop: object-fit CONTAIN plus the mat colour. Artillery, Engineers and Vehicle carry equipment detail close to the upper edge, so a cover-crop would eat exactly the part that identifies the job. */ .mos-page .job-card.has-art { padding-top: 0; } .mos-page .job-card.has-art .mx-card-top { margin-bottom: .6rem; } .mos-page .job-card .job-art { /* The image spans the card edge to edge, which means bleeding through the card's own padding. main.css:303 sets a global `img { max-width: 100% }`, so without this override the bleed is silently clamped back inside the padding and the card renders a narrower inset picture than the approved comp. The card's `overflow: hidden` clips the bleed to the card box. */ width: calc(100% + 2.6rem); max-width: none; margin: 0 -1.3rem 1.1rem; display: block; height: auto; flex: none; aspect-ratio: 2.05; object-fit: contain; background: var(--mx-art-bg); } .mos-page .job-card.mx-featured { min-height: 360px; } .mos-page .mx-art-note { font-size: .78rem; color: var(--color-text-muted); margin: 1.1rem 0 2.5rem; } /* Ten cards in three columns leaves the tenth alone beside two empty cells. The approved comp gives that card (Medical / Dental) the whole row and its own horizontal layout: illustration on the left at a fixed 250px, heading and call to action in the middle, summary on the right. Only the 3-column range needs it; at two columns ten cards fill five rows exactly, and on phones every card stays stacked. */ @media (min-width: 1001px) { .mos-page .job-card:last-child { grid-column: span 3; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr; gap: 0 1.5rem; padding: 0 1.5rem 0 0; } .mos-page .job-card:last-child .job-art { grid-column: 1; grid-row: 1 / 4; width: 100%; max-width: none; height: 100%; aspect-ratio: auto; margin: 0; object-fit: contain; } .mos-page .job-card:last-child .mx-card-top { grid-column: 2 / 4; grid-row: 1; padding-top: 1.25rem; margin-bottom: .75rem; } .mos-page .job-card:last-child h3 { grid-column: 2; grid-row: 2; max-width: none; } .mos-page .job-card:last-child p { grid-column: 3; grid-row: 2 / 4; max-width: none; padding-top: .2rem; } .mos-page .job-card:last-child .mx-card-cta { grid-column: 2; grid-row: 3; margin: .75rem 0 1.4rem; } } /* --- The full research, collapsed by default ---------------------------- */ .mos-page .mx-research-shell { border: 2px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); margin: 1rem 0 2.75rem; overflow: hidden; scroll-margin-top: 84px; } /* The shell's own details is a `.guide-details` so that guide-nav.js's ancestor walk opens it for free on a pill click, a hashchange and a direct landing. That inherits dc.css's summary chrome, which is built for an inline heading row, so the parts that fight a full-width banner summary are turned off here rather than duplicated. */ .mos-page .mx-research-shell > details { margin-bottom: 0; } .mos-page .mx-research-shell > details > summary { padding: 1.5rem; display: flex; justify-content: space-between; gap: 1.25rem; align-items: center; min-height: 44px; } .mos-page .mx-research-shell > details > summary::before { content: none; } .mos-page .mx-research-shell > details > summary h2 { display: block; font-size: 1.55rem; margin: 0; border-bottom: none; padding-bottom: 0; color: var(--color-primary); } .mos-page .mx-research-summary { display: block; font-size: .86rem; color: var(--color-text-muted); margin-top: .5rem; max-width: var(--prose-measure); } .mos-page .mx-expand-label { font-size: .82rem; font-weight: 700; white-space: nowrap; color: var(--color-primary); } .mos-page .mx-research-content { padding: .5rem 1.5rem 1.75rem; border-top: 1px solid var(--color-border); } /* --- Closing ------------------------------------------------------------- */ .mos-page .mx-end-note { max-width: 48rem; margin: 3rem auto 3.5rem; text-align: center; } .mos-page .mx-end-note h2 { font-size: 1.7rem; margin: 0 0 .8rem; border-bottom: none; padding-bottom: 0; color: var(--color-primary); } .mos-page .mx-end-note p { font-size: .95rem; color: var(--color-text-muted); max-width: var(--prose-measure); margin: 0 auto; } .mos-page .mx-end-actions { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.4rem; } .mos-page .mx-end-actions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; } /* The reg-link rows are this page's own pre-existing chrome (the inline