/* Scoped stylesheet for the recreated requisition-scoring pages. This is the retired host's app.css with every selector prefixed with .fx-scope. The two stylesheets define 42 of the same class names - including .btn, .btn-secondary, .form-control and .cell-primary - so loading it unscoped would silently restyle all 57 ATS pages, because it loads after site.css and would win. The scope is applied by FillabilityLayout, which every page under Pages/Fillability inherits via that folder's _Imports.razor. Its :root block became a .fx-scope block so the custom properties it defines resolve inside the scope without leaking document-wide. Originally generated from that stylesheet, but NO LONGER a pure generated artefact: the palette block below was rewritten to derive from the platform theme variables so these pages follow the light/dark toggle, and the dark-only hexes throughout the body were replaced with those tokens. Re-generating over the top would reintroduce the hardcoded dark and put the whole scope back to unreadable-on-white. Port upstream changes in by hand, tokenising any colour they bring with them. */ .fx-scope h1:focus{ outline: none; }.fx-scope .valid.modified:not([type=checkbox]){ outline: 1px solid #26b050; }.fx-scope .invalid{ outline: 1px solid #e50000; }.fx-scope .validation-message{ color: #e50000; }.fx-scope .blazor-error-boundary{ background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }.fx-scope .blazor-error-boundary::after{ content: "An error has occurred." }.fx-scope .darker-border-checkbox.form-check-input{ border-color: #929292; }.fx-scope .form-floating > .form-control-plaintext::placeholder, .fx-scope .form-floating > .form-control::placeholder{ color: var(--bs-secondary-color); text-align: end; }.fx-scope .form-floating > .form-control-plaintext:focus::placeholder, .fx-scope .form-floating > .form-control:focus::placeholder{ text-align: start; }/* ---- CheckMyReq UI ---- */ /* The scope's palette is DERIVED, not fixed: every token below resolves to the platform theme variable site.css sets on , so these pages follow the light/dark toggle like the rest of the app instead of staying dark on a white page. site.css's dark values were already matched to this palette, so dark mode renders exactly as before; light mode is what this mapping buys. Rule for anything added here: NEVER write a raw surface/ink hex. Use the tokens — including the derived ones below, which exist precisely so the old hardcoded dark hexes (#14171d, #16263a, #102b21 …) have a theme-aware home. Only data-encoding colours (choropleth bins, the map's gold selection glow) stay literal, because they carry meaning rather than following the surface. --sunken a surface recessed BELOW --panel. Recessed means darker in dark and darker-grey in light, which is why it is set per-theme rather than mapped to --clr-bg-tertiary in both. --on-accent ink for text sitting ON --accent. The accent is a mid blue in light (needs white) and a pale blue in dark (needs near-black), so it cannot be one value. --*-bg/-line tinted fill + border for the good/tight/hard semantic states. Two mappings deliberately do NOT take the obvious ATS token in light mode, because these pages lean on both far harder than the ATS does and the obvious choice fails WCAG AA here: --muted is BODY COPY on this side — the page subtitle, every panel's explanation, the arithmetic lines — not the small labels --clr-text-muted was picked for. #8496a8 on white is 3.0:1. --clr-text-secondary gives 7.0:1, which is what the original dark pairing (#8b93a4 on #0f1115) also gave, so this preserves the design's intent rather than changing it. --accent is both link ink and the primary button's FILL. The brand blue #3B82F6 is 3.7:1 on white either way round. Its hover shade #2563EB is 5.2:1 both as text on the page and under the white button label — so the scope uses the darker step in light and the brand blue stays untouched everywhere else in the app. Dark keeps --clr-text-muted / --clr-primary, which are the values this palette always had. */ .fx-scope{ --bg: var(--clr-bg); --panel: var(--clr-bg-secondary); --line: var(--clr-border); --text: var(--clr-text); --muted: var(--clr-text-secondary); --good: var(--clr-success); --tight: var(--clr-warn); --hard: var(--clr-danger); --accent: var(--clr-primary-hover); --sunken: var(--clr-bg-tertiary); --accent-bg: color-mix(in srgb, var(--accent) 14%, var(--panel)); --good-bg: var(--clr-success-bg); --tight-bg: var(--clr-warn-bg); --hard-bg: var(--clr-danger-bg); --good-line: color-mix(in srgb, var(--good) 45%, var(--line)); --tight-line: color-mix(in srgb, var(--tight) 45%, var(--line)); --hard-line: color-mix(in srgb, var(--hard) 45%, var(--line)); --on-accent: #ffffff; --shadow: 0 8px 24px rgba(11,31,51,0.16); } [data-theme="dark"] .fx-scope{ --muted: var(--clr-text-muted); --accent: var(--clr-primary); --sunken: #12151c; --on-accent: #06101f; --shadow: 0 8px 24px rgba(0,0,0,0.5); }.fx-scope{ background: var(--bg); color: var(--text); font-family: -apple-system, Segoe UI, Roboto, sans-serif; }.fx-scope .wrap{ max-width: 900px; margin: 0 auto; padding: 32px 20px 80px; }.fx-scope .hero h1{ font-size: 2.4rem; margin: 0 0 6px; letter-spacing: -0.02em; }.fx-scope .hero .tag{ color: var(--muted); max-width: 640px; line-height: 1.5; margin: 0 0 24px; }.fx-scope .composer textarea{ width: 100%; box-sizing: border-box; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 0.95rem; resize: vertical; }.fx-scope .composer-row{ display: flex; gap: 10px; margin-top: 10px; }.fx-scope .composer-row .metro{ flex: 1; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }.fx-scope .composer-row .metro:disabled{ opacity: 0.5; cursor: not-allowed; }.fx-scope .remote-toggle{ display: flex; align-items: center; gap: 6px; padding: 0 12px; white-space: nowrap; color: var(--muted); font-size: 0.9rem; cursor: pointer; user-select: none; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }.fx-scope .remote-toggle input{ accent-color: var(--accent); cursor: pointer; }.fx-scope .hint-required{ margin-top: 8px; color: var(--muted); font-size: 0.85rem; }.fx-scope .admin-note{ margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }.fx-scope .admin-note label{ font-size: 0.8rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }.fx-scope .admin-note textarea{ background: var(--panel); color: var(--text); border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; font-size: 0.9rem; resize: vertical; }.fx-scope .admin-badge{ font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 1px 6px; }.fx-scope .admin-note-view{ margin-bottom: 12px; padding: 8px 12px; border: 1px dashed var(--accent); border-radius: 10px; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; }.fx-scope .admin-nav{ margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; }.fx-scope .admin-nav-label{ font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }.fx-scope .admin-arrow{ background: var(--panel); color: var(--text); border: 1px solid var(--accent); border-radius: 8px; width: 34px; height: 30px; font-size: 1rem; line-height: 1; cursor: pointer; }.fx-scope .admin-arrow:hover:not(:disabled){ background: var(--accent); color: var(--on-accent); }.fx-scope .admin-arrow:disabled{ opacity: 0.35; cursor: default; }.fx-scope .go{ background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; padding: 10px 22px; font-weight: 700; cursor: pointer; }.fx-scope .go:disabled{ opacity: 0.5; cursor: default; }.fx-scope .error{ margin-top: 12px; color: var(--hard); background: var(--hard-bg); border: 1px solid var(--hard-line); padding: 10px 12px; border-radius: 10px; font-size: 0.9rem; }/* ---- advisory banner (non-blocking caveat, e.g. not a tech role) ---- */ .fx-scope .advisory-banner{ display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--tight); background: var(--tight-bg); }.fx-scope .advisory-banner .advisory-icon{ font-size: 1.3rem; color: var(--tight); line-height: 1.3; }.fx-scope .advisory-banner .advisory-body strong{ display: block; font-size: 1.05rem; margin-bottom: 4px; }.fx-scope .advisory-banner .advisory-body p{ margin: 4px 0 0; font-size: 0.9rem; color: var(--muted); }/* ---- metro conflict notice (caller's metro won over the metro the posting named) ---- */ .fx-scope .metro-conflict{ display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunken); }.fx-scope .metro-conflict .metro-conflict-icon{ font-size: 1.1rem; line-height: 1.35; }.fx-scope .metro-conflict .metro-conflict-text{ font-size: 0.9rem; color: var(--muted); line-height: 1.45; }.fx-scope .metro-conflict .metro-conflict-text strong{ color: var(--text); font-weight: 600; }.fx-scope .metro-conflict .metro-conflict-rescore{ margin-left: auto; flex-shrink: 0; align-self: center; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 7px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }.fx-scope .metro-conflict .metro-conflict-rescore:hover:not(:disabled){ border-color: var(--accent); color: var(--accent); }.fx-scope .metro-conflict .metro-conflict-rescore:disabled{ opacity: 0.5; cursor: default; }/* ---- progress meter (shown while an analysis runs) ---- */ .fx-scope .meter{ margin-top: 14px; }.fx-scope .meter-track{ height: 8px; border-radius: 999px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; }.fx-scope .meter-fill{ height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--good)); /* Two-phase fill so a slower-than-expected run never visibly STALLS at the cap. The old single linear animation reached 92% at --meter-dur and then FROZE — very visible now that a cache-hit re-score (~2s) and a fresh extraction (~18s) differ ~10x, so the per-run estimate (last run's time) is often an underestimate. Phase 1: ease-out 4%→82% over --meter-dur — fast early, settling around the expected finish. Phase 2: a slow linear crawl 82%→99% over 60s, starting where phase 1 ends, so once the estimate elapses the bar keeps inching (~0.3%/s) instead of freezing. Any realistic run finishes mid-crawl. */ animation: meter-fill var(--meter-dur, 13s) cubic-bezier(0.25, 0.8, 0.35, 1) forwards, meter-crawl 60s var(--meter-dur, 13s) linear forwards; } @keyframes meter-fill { from { width: 4%; } to { width: 82%; } } @keyframes meter-crawl { from { width: 82%; } to { width: 99%; } }.fx-scope .meter-phrase{ margin-top: 8px; font-size: 0.85rem; font-style: italic; /* Same blue→green gradient as the fill bar, painted onto the text — far more legible than the muted grey. */ background: linear-gradient(90deg, var(--accent), var(--good)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: meter-pulse 1.9s ease-in-out infinite; } @keyframes meter-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }.fx-scope .result{ margin-top: 28px; }.fx-scope .scorecard{ display: flex; align-items: center; gap: 22px; padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }.fx-scope .scorecard .score{ font-size: 3.4rem; font-weight: 800; line-height: 1; }.fx-scope .scorecard .score span{ font-size: 1.1rem; color: var(--muted); font-weight: 500; }.fx-scope .scorecard.good .score{ color: var(--good); }.fx-scope .scorecard.tight .score{ color: var(--tight); }.fx-scope .scorecard.hard .score{ color: var(--hard); }.fx-scope .score-meta .confidence{ color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }.fx-scope .score-meta .headline{ font-size: 1.1rem; margin-top: 4px; }.fx-scope .score-meta .occupation{ margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }.fx-scope .score-meta .occ-title{ font-size: 0.9rem; color: var(--muted); }.fx-scope .soc-pill{ font-size: 0.7rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; border: 1px solid currentColor; }.fx-scope .soc-pill.soc-corroborated{ color: var(--good); }.fx-scope .soc-pill.soc-reclassified{ color: var(--tight); }.fx-scope .soc-pill.soc-inconclusive{ color: var(--muted); }/* All muted, and deliberately NOT --good: every one of these means "no O*NET verdict on the SOC", however different the reasons. The class name comes from the enum member, so a status with no rule here renders unstyled rather than wrong. */ .fx-scope .soc-pill.soc-notapplicable{ color: var(--muted); }.fx-scope .soc-pill.soc-nosignal{ color: var(--muted); }.fx-scope .soc-pill.soc-magnetrejected{ color: var(--muted); }.fx-scope .grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }.fx-scope .panel{ background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }.fx-scope .panel.wide{ grid-column: 1 / -1; }/* Space the contradictions panel (direct child of .result) off the scorecard above it. */ .fx-scope .result > .panel.wide{ margin-top: 14px; }.fx-scope .panel h3{ margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }.fx-scope .panel .big{ font-size: 2rem; font-weight: 800; }.fx-scope .panel .big.good{ color: var(--good); }.fx-scope .panel .big.bad{ color: var(--hard); }/* Pro-tier feature sections — a red outline + PRO badge flags which panels are premium (during the open beta these render for everyone, so the marker is the only cue that they're gated post-launch). */ .fx-scope .panel.pro-feature{ position: relative; border-color: var(--hard); box-shadow: 0 0 0 1px var(--hard) inset; }.fx-scope .panel.pro-feature::after{ content: "PRO"; position: absolute; top: 12px; right: 14px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; color: var(--hard); border: 1px solid var(--hard); border-radius: 6px; padding: 1px 6px; background: color-mix(in srgb, var(--hard) 14%, transparent); pointer-events: none; }.fx-scope .muted{ color: var(--muted); font-size: 0.9rem; }.fx-scope .arith{ margin-top: 8px; font-size: 0.82rem; color: var(--muted); font-family: ui-monospace, monospace; }.fx-scope .note{ margin-top: 6px; font-size: 0.8rem; color: var(--muted); }.fx-scope .geo{ margin-top: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--sunken); }.fx-scope .geo-top{ display: flex; justify-content: space-between; align-items: center; gap: 8px; }.fx-scope .geo-label{ font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }.fx-scope .geo-badge{ font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }.fx-scope .geo-detail{ margin-top: 5px; font-size: 0.82rem; }.fx-scope .geo-over .geo-badge{ background: var(--good-bg); color: var(--good); }.fx-scope .geo-under .geo-badge{ background: var(--tight-bg); color: var(--tight); }.fx-scope .geo-even .geo-badge{ background: var(--accent-bg); color: var(--accent); }/* Occupation-sensitivity panel — the pool under the classified SOC vs the plausible second choice. */ .fx-scope .alt-soc-panel .alt-soc-compare{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 4px; }/* Clickable occupation cards — reset the native