:root {
  --ink: #172b30;
  --muted: #586b70;
  /* B08 (axe color-contrast, WCAG 1.4.3): the same hue, darkened until small
     captions reach 4.5:1 on every background this token sits on (4.63:1 at
     worst, on --accent-wash). Still lighter than --muted. It was #77878a. */
  --subtle: #606d70;
  --line: #dce4e3;
  --line-strong: #b9cbc7;
  --wash: #f5f8f7;
  --panel: #fff;
  --surface-soft: #edf4f1;
  --accent: #176b59;
  --accent-strong: #115447;
  --accent-wash: #e5f1ed;
  --amber: #80580b;
  --amber-wash: #fff7e6;
  --danger: #a54036;
  --success: #28715e;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 6px;
  --radius: 8px;
  --nav-height: 64px;
  --content-max: 1360px;
  --layer-nav: 40;
  --layer-scrim: 60;
  --layer-dialog: 61;
  --layer-toast: 80;
  /* UXC-013: the one focus ring. Every :focus-visible outline in ui/public
     is this token; a control may set its own outline-offset, never its own
     ring. */
  --focus-ring: 3px solid #277c69;
}

/* GTJ-MANUAL-FIXES B21: Light and Dark. `data-theme` on <html> is what is
   drawn (theme-boot.js sets it before paint; theme.mjs keeps it current). Dark
   is the same tokens with dark values, so every rule that reads a token
   follows; the colours the shipped screens still write by hand are covered at
   the end of this file. Light is untouched. Contrast in dark is held to WCAG
   A/AA by axe-core on every V1 screen and overlay
   (ui/test/account-shell-theme-ux.test.mjs). */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e3ecea;
  --muted: #a8b8b5;
  --subtle: #9cada9;
  --line: #2b3c3f;
  --line-strong: #455a5d;
  --wash: #0f1719;
  --panel: #162124;
  --surface-soft: #1d2b2e;
  --accent: #5ec3a5;
  --accent-strong: #86d8bf;
  --accent-wash: #183933;
  --amber: #e2b45a;
  --amber-wash: #322810;
  --danger: #f1958b;
  --success: #6fcaa9;
  --shadow: none;
  --focus-ring: 3px solid #72d4b8;
}

html { background: var(--wash); scroll-padding-top: calc(var(--nav-height) + 16px); }
body { min-width: 0; background: var(--wash); color: var(--ink); font-size: 14px; line-height: 1.55; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
button, input, select, textarea { font: inherit; }
button, a, summary { touch-action: manipulation; }
button, summary { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.skip-link { position: fixed; z-index: 100; top: 12px; left: 16px; transform: translateY(-220%); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); }
.skip-link:focus { transform: translateY(0); }
.shell { display: block; min-height: 100dvh; }
.topbar { position: sticky; z-index: var(--layer-nav); top: 0; height: var(--nav-height); border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .97); }
/* UXC-025: the actions column is at least its old width and grows to fit a
   signed-in session, so the session group can never spill over the navigation. */
.topbar-inner { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(190px, auto); align-items: center; width: 100%; max-width: var(--content-max); height: 100%; margin: auto; padding: 0 32px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 720; cursor: pointer; }
.brand:hover { color: var(--accent); }
/* GTJ-BRAND B03: the Forward G lockup (ui/public/brand.mjs). The mark takes
   the accent and the words the text colour, so the theme tokens pick the kit's
   variant: green and ink in light, mint and #E3ECEA in dark. Its width follows
   its height, so it can never be stretched. */
.brand-logo { display: flex; flex: none; }
.brand-lockup { display: block; flex: none; width: auto; height: 28px; aspect-ratio: 387.02 / 80; }
.brand-glyph { stroke: var(--accent); }
/* The mark as the avatar fallback draws it fills the width of the circle it
   sits in (the account's avatar, the Profile's picture), and stays square. */
.brand-avatar-mark { display: block; width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 767px) { .brand-lockup { height: 24px; } }
/* Forced colours: one colour, the system's, for mark and words alike. */
@media (forced-colors: active) { .brand-glyph { stroke: currentColor; } }
.journey-nav { display: flex; align-self: stretch; justify-content: center; gap: 26px; min-width: 0; }
.journey-nav .nav-item { position: relative; display: flex; align-items: center; width: auto; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #506267; font-weight: 560; white-space: nowrap; }
/* `hidden` has to actually hide. The rule above sets `display`, which outranks
   the UA stylesheet's `[hidden]{display:none}` -- so a release-gated control
   would stay on screen and in the accessibility tree while every script
   correctly believed it was hidden. Specificity here must match the rule it
   is correcting, so it is scoped the same way rather than using !important. */
.journey-nav .nav-item[hidden] { display: none; }
.journey-nav .nav-item:hover { background: transparent; color: var(--ink); }
.journey-nav .nav-item.active, .journey-nav .nav-item[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 690; }
.journey-nav .nav-item.active::after, .journey-nav .nav-item[aria-current="page"]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--accent); content: "" !important; }
.topbar-actions { position: relative; display: flex; justify-self: end; align-items: center; gap: 9px; }
/* GTJ-MANUAL-FIXES B21: Light · Auto · Dark, one slider, always in the bar and
   to the right of the avatar. The thumb is a third of the track, so it sits
   over the stop it selects; the icons are drawn over it and take no pointer,
   so a click anywhere on the track reaches the slider itself. */
.theme-control { --theme-stop: 28px; position: relative; flex: none; width: calc(var(--theme-stop) * 3); height: 32px; }
/* Scoped above v2.css's rule for every text-like input (44 px, padding, its own border). */
.theme-control .theme-slider[type="range"] { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-soft); cursor: pointer; -webkit-appearance: none; appearance: none; }
.theme-slider::-webkit-slider-runnable-track { height: 30px; border: 0; background: transparent; }
.theme-slider::-webkit-slider-thumb { width: var(--theme-stop); height: 30px; border: 1px solid var(--accent); border-radius: 999px; background: var(--panel); box-shadow: 0 1px 3px rgb(23 43 48 / .18); -webkit-appearance: none; appearance: none; }
.theme-slider::-moz-range-track { height: 30px; border: 0; background: transparent; }
.theme-slider::-moz-range-thumb { box-sizing: border-box; width: var(--theme-stop); height: 30px; border: 1px solid var(--accent); border-radius: 999px; background: var(--panel); }
.theme-stops { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; color: var(--muted); pointer-events: none; }
.theme-stop svg { display: block; }
:root[data-theme-preference="light"] .theme-stop[data-theme-stop="light"],
:root[data-theme-preference="auto"] .theme-stop[data-theme-stop="auto"],
:root[data-theme-preference="dark"] .theme-stop[data-theme-stop="dark"] { color: var(--accent-strong); }
/* Below 1024 px the slider narrows so the navigation keeps its room beside the
   bell, the avatar and the slider (a stop stays at least 24 px, WCAG 2.5.8);
   below 360 px the bar's own spacing tightens so the brand and the three
   controls still share the first row. */
@media (max-width: 1023px) { .theme-control { --theme-stop: 24px; } }
@media (max-width: 359px) { .topbar-actions { gap: 6px; } }
.notification-button { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--accent); font-size: 20px; }
.notification-button strong { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 99px; background: var(--danger); color: #fff; font-size: 10px; line-height: 14px; }
/* A native auto popover in the top layer: fixed, and placed by app.js where
   `.topbar-actions` used to lay it out (48px below its top, right-aligned).
   The fallbacks match that placement at desktop widths. `inset`, `margin`,
   `padding` and `color` undo the UA popover defaults, nothing more. */
.notification-center { position: fixed; z-index: 50; inset: auto; top: 61px; right: 32px; margin: 0; padding: 0; color: inherit; width: min(390px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - var(--nav-height) - 24px)); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 16px 42px rgb(23 43 48 / .17); }
.notification-center header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.notification-item { display: grid; gap: 3px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.notification-item:hover { background: var(--surface-soft); }
.notification-item span, .notification-item small { color: var(--muted); }
/* GTJ-MANUAL-FIXES B20: unread is marked, read is not. The wash and the
   accent edge are the visual mark; "Unread" is also said to assistive
   technology, so the state is never carried by colour alone. */
.notification-item:not(.is-unread) strong { font-weight: 560; }
.notification-item.is-unread { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }
.notification-item.is-unread strong { font-weight: 720; }
.notification-item.is-unread:hover { background: var(--surface-soft); }
.main { width: 100%; min-width: 0; padding: 0; }
.page { width: 100%; max-width: var(--content-max); margin: auto; padding: 44px 32px 80px; }
.page > h1 { margin: 0; color: var(--ink); font-size: 32px; font-weight: 710; line-height: 1.15; letter-spacing: -.035em; }
.page > .subtitle { max-width: 72ch; margin: 8px 0 32px; color: var(--muted); font-size: 15px; }
.page > .eyebrow { display: none; }
.v3-eyebrow { margin: 0 0 6px; color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.v3-muted, .v2-muted { color: var(--muted); }
.v3-caption { color: var(--muted); font-size: 12px; }
.v3-panel, .v2-card, .resume-panel, .tailor-panel { min-width: 0; margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: none; overflow-wrap: anywhere; }
.v3-panel h2, .v3-panel h3 { margin-top: 0; }
.v3-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.v3-section-head h2 { margin: 0; font-size: 19px; letter-spacing: -.015em; }
.v3-section-head span { color: var(--muted); font-size: 12px; }
.v3-primary, .v2-primary, .action-enabled.v3-primary { min-height: 44px; padding: 10px 18px; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 680; }
.v3-primary:hover, .v2-primary:hover { background: var(--accent-strong); }
.v3-secondary, .action-enabled { min-height: 44px; padding: 10px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-weight: 620; }
.v3-secondary:hover, .action-enabled:hover { border-color: #7b9b94; background: var(--surface-soft); }
.v3-link, .v2-link { min-height: 44px; padding: 8px 2px; border: 0; background: transparent; color: var(--accent); font-weight: 650; text-decoration: none; }
.v3-overflow { position: relative; }
.v3-overflow > summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); font-size: 18px; font-weight: 760; list-style: none; }
.v3-overflow > summary::-webkit-details-marker { display: none; }
.v3-overflow[open] > .v3-menu { position: absolute; z-index: 5; right: 0; display: grid; width: min(250px, calc(100vw - 32px)); margin-top: 8px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 14px 34px rgb(23 43 48 / .14); }
.v3-menu button, .v3-menu a { display: block; width: 100%; min-height: 42px; padding: 9px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; }
.v3-menu button:hover, .v3-menu a:hover { background: var(--surface-soft); }

/* Dashboard */
.page-dashboard { padding-top: 28px; padding-bottom: 56px; }
.page-dashboard > h1 { font-size: 27px; }
.page-dashboard > .subtitle { margin: 5px 0 18px; font-size: 14px; }
.dash-goal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 16px; padding: 13px 18px; }
.dash-goal-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.dash-goal-main p { margin: 0; }
.dash-goal-eyebrow { margin: 0; }
.dash-goal-name { font-size: 16px; font-weight: 690; letter-spacing: -.012em; }
.dash-goal-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; color: var(--subtle); font-size: 12px; list-style: none; }
.dash-goal-meta li { padding: 1px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--wash); white-space: nowrap; }
.dash-goal > .v3-secondary { min-height: 38px; padding: 8px 14px; }
/* Metric cards are entry points, so each one is a real button. The visual
   design is unchanged: the button is reset to the card it already looked like,
   and only hover and focus are added. Focus is the outline v2.css gives every
   control -- the same indicator as everywhere else, not a bespoke one. */
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.metric-grid > li { display: grid; min-width: 0; }
.metric-card { display: grid; align-content: start; justify-items: start; gap: 5px; width: 100%; min-width: 0; padding: 14px 18px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: inherit; text-align: left; cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.metric-card:hover { border-color: var(--accent); background: var(--accent-wash); }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .015em; }
.metric-value { color: var(--ink); font-size: 32px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.08; }
.metric-caption { color: var(--subtle); font-size: 12px; }
.dash-panels { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.dash-panels > section { min-width: 0; }
.dash-section { margin-bottom: 18px; }
.dash-section:last-child { margin-bottom: 0; }
.dash-module { padding: 0; overflow: hidden; }
.dash-module-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.dash-module-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
.dash-module-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.dash-module-head .v3-link { min-height: 32px; padding: 4px 0; font-size: 13px; }
.dash-module-note { color: var(--subtle); font-size: 12px; }
.dash-module-body { min-width: 0; }
.dash-module-foot { display: block; margin: 0; padding: 11px 20px; border-top: 1px solid var(--line); background: var(--wash); }
.dash-module.is-emphasis .dash-module-head { border-bottom-color: var(--line-strong); background: var(--accent-wash); }
.dash-attention-count { padding: 3px 9px; border-radius: 99px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-weight: 680; white-space: nowrap; }
.dash-module.is-emphasis .dash-attention-count { background: var(--panel); color: var(--accent-strong); }
.progress-panel { padding: 18px 20px; }
.progress-panel.is-empty { padding: 0; }
.progress-visual { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 20px; }
.progress-donut-wrap { position: relative; width: 116px; height: 116px; }
.progress-donut { display: block; width: 116px; height: 116px; }
.progress-donut circle { fill: none; stroke-width: 13; }
.donut-track { stroke: var(--surface-soft); }
.donut-segment { stroke: var(--stage); }
.progress-total { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 1px; margin: 0; text-align: center; }
.progress-total strong { font-size: 23px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.progress-total span { color: var(--muted); font-size: 11px; }
.progress-legend { display: grid; max-width: 420px; margin: 0; padding: 0; list-style: none; }
.progress-legend li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0; color: var(--muted); font-size: 13px; }
.progress-legend strong { color: var(--ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.progress-dot { width: 9px; height: 9px; border-radius: 2px; background: var(--stage); }
.progress-panel .v3-caption { margin: 14px 0 0; }
.segment-evaluated { --stage: #9db9b1; } /* UXC-033: the stage is named for the lifecycle state */
.segment-applied { --stage: #4f9b88; }
.segment-interviewing { --stage: var(--accent); }
.segment-offer { --stage: var(--amber); }
.segment-closed { --stage: #d2d8d8; }
.dash-table { padding: 0; }
.dash-head { display: grid; align-items: center; gap: 14px; padding: 9px 20px; border-bottom: 1px solid var(--line); background: var(--wash); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dash-row { display: grid; align-items: center; gap: 14px; min-height: 56px; padding: 0 20px 0 0; border-bottom: 1px solid var(--line); }
.dash-row:last-child { border-bottom: 0; }
.dash-row:hover { background: #fafcfb; }
.dash-opportunity-head, .dash-opportunity-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 122px 84px 116px; }
.dash-application-head, .dash-application-row { grid-template-columns: minmax(0, 1.6fr) 152px 104px 92px; }
.dash-row-open { display: grid; gap: 1px; min-width: 0; min-height: 56px; padding: 10px 0 10px 20px; border: 0; background: transparent; color: inherit; text-align: left; }
.dash-row-open strong { font-size: 14px; font-weight: 660; }
.dash-row-open span { color: var(--muted); font-size: 12px; }
.dash-row-open[disabled] { cursor: default; }
.dash-cell { min-width: 0; color: var(--muted); font-size: 13px; }
.dash-cell-value { display: block; min-width: 0; overflow-wrap: anywhere; }
.dash-cell-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.dash-cell-action { justify-self: end; }
.dash-row .lifecycle-status { width: 100%; min-height: 38px; padding: 5px 8px; font-size: 12px; }
.dash-row-action { min-height: 38px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-size: 12px; font-weight: 640; white-space: nowrap; }
.dash-row-action:hover { border-color: #7b9b94; background: var(--surface-soft); }
.dash-empty-action { display: flex; justify-content: center; padding: 0 22px 22px; }
.attention-panel { padding: 0; overflow: hidden; }
.attention-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; min-height: 96px; padding: 0 14px 0 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.attention-row:last-child { border-bottom: 0; }
.attention-row:hover { background: #fafcfb; }
.attention-row h3 { margin: 2px 0 4px; font-size: 15px; }
.attention-row p { margin: 0; color: var(--muted); }
.attention-kind { color: var(--accent); font-size: 12px; font-weight: 720; }
.next-label { color: var(--accent); font-weight: 680; white-space: nowrap; }
.attention-open { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; min-height: inherit; padding: 18px 22px; border: 0; background: transparent; color: inherit; text-align: left; }
.lifecycle-control { display: grid; gap: 4px; min-width: 116px; color: var(--muted); font-size: 10px; font-weight: 680; letter-spacing: .03em; text-transform: uppercase; }
.lifecycle-control select { width: 100%; min-height: 38px; padding: 6px 8px; font-size: 12px; text-transform: none; }
.detail-lifecycle { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); color: var(--muted); font-size: 12px; }
.background-row-actions { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.warning-copy { margin-top: 8px !important; padding-left: 9px; border-left: 2px solid var(--amber); color: #6d4d0a !important; font-size: 12px; }
.background-list { padding: 0; overflow: hidden; }
.background-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.background-row:last-child { border-bottom: 0; }
.background-row > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 13px 18px; cursor: pointer; list-style: none; }
.background-row > summary::-webkit-details-marker { display: none; }
.background-row > summary:hover, .background-row > summary:focus-visible { background: var(--surface-soft); }
.background-row strong, .background-row small { display: block; }
.background-row small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.background-status { max-width: 240px; text-align: right; }
.background-status strong { color: var(--accent-strong); font-size: 13px; }
.background-progress-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; padding: 0 18px 16px; }
.background-progress-detail ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.background-progress-detail li { display: flex; gap: 7px; color: var(--muted); font-size: 12px; }
.background-progress-detail li.is-complete { color: var(--success); }
.background-progress-detail li.is-active { color: var(--accent-strong); font-weight: 650; }

/* Apply and AI Apply job collections */
.apply-header-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 18px; margin: -8px 0 20px; }
.apply-search { position: relative; display: block; max-width: 780px; }
.apply-search svg { position: absolute; top: 14px; left: 14px; color: var(--muted); pointer-events: none; }
/* The search field carries exactly ONE search affordance: the decorative,
   aria-hidden magnifier above.

   Two things had to be fixed for that to be true. First, the gutter it sits in
   was not being reserved: `.apply-search input` (0,1,1) loses to v2.css's
   `input:not([type="checkbox"]):not([type="hidden"])` (0,2,1), whose `padding`
   SHORTHAND reset padding-left to 12px -- so the icon was drawn on top of the
   placeholder and the typed text, which is what reads on screen as a second,
   malformed glyph. Matching that specificity with the type selector, in a
   sheet that loads later, is what makes 42px actually apply; it is not
   decoration. Second, `type="search"` is kept for its semantics but its native
   UA decorations are removed, because a browser that draws its own magnifier
   or clear control inside the field puts a real second glyph beside ours. */
.apply-search input[type="search"] { min-height: 46px; padding-left: 42px; appearance: none; -webkit-appearance: none; }
.apply-search input[type="search"]::-webkit-search-decoration,
.apply-search input[type="search"]::-webkit-search-results-decoration,
.apply-search input[type="search"]::-webkit-search-results-button,
.apply-search input[type="search"]::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; display: none; }
.scan-control { display: grid; justify-items: end; gap: 3px; }
.scan-control .v3-secondary { min-width: 130px; }
.search-goal-panel { margin: -8px 0 20px; padding: 18px; }
.search-goal-heading, .search-goal-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.search-goal-heading h2 { margin: 0 0 4px; font-size: 18px; }
.search-goal-heading p, .goal-coverage { margin: 0; color: var(--muted); }
.goal-revision { white-space: nowrap; color: var(--muted); font-size: 12px; }
.search-goal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; gap: 14px 16px; margin: 18px 0; }
.goal-field { min-width: 0; }
.search-goal-grid > label, .search-goal-grid fieldset { min-width: 0; }
.search-goal-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.search-goal-grid input[type="text"], .search-goal-grid input:not([type]), .search-goal-grid select { width: 100%; min-height: 44px; }
.search-goal-grid fieldset { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 12px; margin: 0; padding: 0; border: 0; }
.search-goal-grid legend { width: 100%; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.search-goal-grid fieldset label { display: flex; align-items: center; min-height: 44px; color: var(--ink); }
.search-goal-grid fieldset .wide { flex: 1 0 100%; }
.search-goal-actions { align-items: center; }
.search-goal-actions .scan-control { justify-items: end; }
.goal-coverage { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--amber); border-radius: var(--radius-sm); }
/* How GoalToJob searches the goal's role titles (GTJ-SCAN-V2-INTEGRATION I01). */
.role-interpretation { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.role-interpretation h3 { margin: 0 0 var(--space-1); font-size: 0.95rem; }
.role-interpretation .v3-caption { display: block; margin: var(--space-1) 0 0; }
.role-reading-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.role-reading p { margin: 0; overflow-wrap: anywhere; }
.role-reading-confirm { margin-top: var(--space-1); }
.role-reading-confirmed { color: var(--muted); }
.apply-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 14px; }
.segmented { display: flex; width: max-content; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: #edf2f0; }
.segmented button { min-height: 36px; padding: 7px 13px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); }
.segmented button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: 680; box-shadow: 0 1px 2px rgb(23 43 48 / .08); }
.apply-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.filter-disclosure { position: relative; }
.filter-disclosure > summary { display: flex; align-items: center; min-height: 40px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: #43565a; list-style: none; }
.filter-disclosure > summary::-webkit-details-marker { display: none; }
.filter-popover { position: absolute; z-index: 5; left: 0; right: auto; display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 14px; width: min(520px, calc(100vw - 32px)); margin-top: 8px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 14px 34px rgb(23 43 48 / .14); }
.filter-popover { max-height: min(420px, calc(100dvh - 140px)); overflow: auto; overscroll-behavior: contain; }
.filter-popover.popover-flipped { margin-top: 0; margin-bottom: 8px; }
.filter-popover label { display: grid; gap: 6px; font-weight: 620; }
.filter-popover-surface { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 14px 34px rgb(23 43 48 / .14); }
/* GTJ-MANUAL-FIXES B20: Apply's filters are in the headers of the columns
   they narrow. A header reads as its label with a caret; a set filter adds an
   accent dot. Its panel is placed in the viewport (popover.mjs), because the
   results scroll sideways and their overflow would clip it. Generated content
   only, so the header's text is still exactly the column's name. */
.column-filter > summary { display: inline-flex; align-items: center; gap: 5px; min-height: 0; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; list-style: none; cursor: pointer; }
.column-filter > summary::-webkit-details-marker { display: none; }
.column-filter > summary::after { content: ''; border-top: 5px solid currentColor; border-right: 4px solid transparent; border-left: 4px solid transparent; opacity: .7; }
.column-filter > summary:hover, .column-filter[open] > summary { background: var(--surface-soft); color: var(--ink); }
.column-filter.is-active > summary { color: var(--accent); }
.column-filter.is-active > summary::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.column-filter > .filter-popover { position: fixed; z-index: 55; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(380px, calc(100vw - 32px)); margin: 0; color: var(--ink); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.filter-popover .filter-check { display: flex; align-items: center; gap: 8px; }
/* The count and the one Sort share a line: no row of their own between the
   search and the results. Source diagnostics is a quiet link under them. */
.self-service-tools { margin-bottom: 12px; }
.apply-results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0 0 10px; }
.apply-results-bar .result-count { margin: 0; }
.apply-results-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.results-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 620; }
.results-sort select { min-height: 36px; padding: 5px 8px; font-size: 13px; }
/* B21: the word stays whole. Under the page's overflow-wrap rule its min-content
   is one letter, so beside a full-width select it broke as "Sor / t" (B20). */
.results-sort > span { flex: none; }

/* Multi-select */
.multi-select { position: relative; display: grid; gap: 4px; min-width: 0; }
.multi-select-title { color: var(--muted); font-size: 13px; }
.multi-select-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #9aaeb0; border-radius: var(--control-radius); background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.multi-select-toggle:hover { border-color: var(--accent); }
.multi-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select-caret { flex: none; color: var(--muted); }
.multi-select-panel:not([hidden]) { display: grid; }
.multi-select-panel { position: absolute; z-index: 40; top: calc(100% + 6px); gap: 8px; width: min(320px, calc(100vw - 32px)); max-height: min(340px, calc(100dvh - 160px)); padding: 12px; overflow: hidden; }
.multi-select-panel.popover-flipped { top: auto; }
.multi-select-search input { width: 100%; min-height: 40px; }
.multi-select-options { display: grid; gap: 2px; overflow: auto; overscroll-behavior: contain; }
.multi-select-group { position: sticky; top: 0; margin: 6px 0 2px; padding: 4px 0; background: var(--panel); color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.multi-select-option { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 2px 4px; border-radius: 6px; font-weight: 500; cursor: pointer; }
.multi-select-option:hover { background: var(--accent-wash); }
.multi-select-option input { flex: none; }
.multi-select-no-match { margin: 0; color: var(--muted); font-size: 13px; }
/* Selected-value chips.
   Three multi-selects sit side by side in the Search Goal card, and a customer
   who picks a few locations, every work style and every engagement type was
   given several stacked rows of chips per control -- the selection summary took
   more vertical space than the controls themselves.
   Compact, not smaller-to-the-point-of-unusable: the remove control keeps a
   full-size hit area through the ::after overlay below, so the target a finger
   or pointer meets is unchanged while the chip it sits in is ~40% shorter. */
.multi-select-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.multi-select-chips li { display: inline-flex; align-items: center; gap: 1px; padding: 0 2px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--accent-wash); font-size: 11px; line-height: 1.45; }
/* `min-height: 0` is the point of this rule, not the width/height.
   v2.css gives every `button` a 44px min-height, so the chip's remove control
   was 44px tall and each chip row was 46px -- taller than the select it
   summarised, which is the whole reason the Search Goal card felt oversized.
   The 44px target is preserved here by the ::after overlay, not by the box. */
.multi-select-remove { position: relative; width: 18px; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; }
/* The rendered circle is 18px; the hit area is 28px. Compact presentation must
   not shrink what a pointer, a finger or a switch device has to hit. */
.multi-select-remove::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.multi-select-remove:hover { background: var(--panel); color: var(--ink); }
.multi-select-remove:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }

/* Current-run result scope. Historical inventory is one click away, always. */
.scan-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.scan-scope-identity { display: grid; gap: 1px; min-width: 0; }
.scan-scope-name { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 640; font-size: 13px; }
.scan-scope-badge { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-weight: 550; font-size: 11px; }
.scan-scope-context { margin: 0; color: var(--muted); font-size: 12px; }
.scan-scope-options { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-scope-option { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.scan-scope-option[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); font-weight: 620; }
.scan-scope-note { flex: 1 1 100%; color: var(--muted); font-size: 12px; }
.scan-scope-unavailable { align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--wash); }

/* Saved goals */
.search-goal-actions { flex-wrap: wrap; align-items: flex-end; }
.goal-save-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.saved-goals { position: relative; }
.saved-goals > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: var(--control-radius); list-style: none; }
.saved-goals > summary::-webkit-details-marker { display: none; }
.saved-goals-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; display: grid; gap: 8px; width: min(320px, calc(100vw - 32px)); max-height: min(340px, calc(100dvh - 160px)); padding: 12px; overflow: auto; }
.saved-goals-title { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.saved-goals-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.saved-goal-item { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.saved-goal-item:hover { background: var(--accent-wash); }
.saved-goal-item.is-current { background: var(--accent-wash); font-weight: 650; }
.saved-goal-new { justify-self: start; }

/* Scan controls */
.scan-buttons { display: flex; align-items: center; gap: 8px; }
.scan-buttons button { min-height: 44px; }
#self-service-scan[aria-busy="true"] { display: inline-flex; align-items: center; gap: 8px; }
.scan-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: scan-spin .8s linear infinite; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scan-spinner { animation-duration: 2.4s; } }
/* A tailoring run in flight, and a result replayed after one finished while the
   customer was on another screen. Both reuse .resume-panel; only the heading
   row and the note need anything of their own. */
.tailor-running h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tailor-running .v3-caption { margin: .35rem 0 0; max-width: 62ch; }
.tailor-resumed { margin: 0 0 .5rem; }

/* Notification drawer */
.notification-drawer:popover-open { display: grid; align-content: start; gap: 0; }
/* A display rule on a panel must never out-specify the hidden attribute. */
.multi-select-panel[hidden], .multi-select-option[hidden], .multi-select-group[hidden], .multi-select-no-match[hidden] { display: none; }
.notification-detail-list { display: grid; gap: 8px 14px; margin: 12px 16px; }
.notification-detail-list > div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; }
.notification-detail-list dt { color: var(--muted); }
.notification-detail-list dd { margin: 0; overflow-wrap: anywhere; }
#notification-detail { padding: 14px 16px 18px; }
#notification-detail h3 { margin: 10px 0 4px; font-size: 16px; }
.notification-providers { margin-top: 12px; }
.notification-providers ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.filter-popover .wide { grid-column: 1 / -1; }
.result-count { margin: 12px 0; color: var(--muted); font-size: 12px; }
.apply-results { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; padding: 0; }
/* UXC-026: below about 1150 px Apply's results scroll sideways inside their
   region. A soft shadow on the side that has more columns says so. The two
   panel-coloured covers (solid for 20 px, wider than the 16 px shadows)
   scroll with the content and hide the shadows at an end, so a shadow shows only while there is more to see that way, and never
   where nothing scrolls (phones stack the rows). */
.self-service-results {
  background-color: var(--panel);
  background-image:
    linear-gradient(to right, var(--panel) 50%, rgb(255 255 255 / 0)),
    linear-gradient(to left, var(--panel) 50%, rgb(255 255 255 / 0)),
    radial-gradient(farthest-side at 0 50%, rgb(23 43 48 / .24), rgb(23 43 48 / 0)),
    radial-gradient(farthest-side at 100% 50%, rgb(23 43 48 / .24), rgb(23 43 48 / 0));
  background-position: left center, right center, left center, right center;
  background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.apply-job-head, .apply-job-main { display: grid; grid-template-columns: minmax(190px, 1.25fr) 84px minmax(140px, .8fr) 58px 92px 126px 112px; align-items: center; gap: 14px; }
.apply-job-head { grid-template-columns: 34px minmax(190px, 1.25fr) 84px minmax(140px, .8fr) 58px 92px 126px 112px; padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.apply-job-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 0; width: 100%; min-height: 78px; padding: 0 18px; border-bottom: 1px solid var(--line); background: transparent; }
.self-service-job-head, .self-service-job-main { grid-template-columns: minmax(180px, 1.15fr) 78px minmax(126px, .75fr) 74px 132px 122px 104px minmax(130px, auto) 82px; }
.self-service-job-row { grid-template-columns: minmax(0, 1fr); }
.self-service-job-head, .self-service-job-row { min-width: 1088px; }
/* Goal Fit sits beside Compatibility, never inside it: the two answer
   different questions and must not read as one verdict. State is carried by
   the words, never by colour alone. */
.job-goal-fit { display: grid; gap: 2px; align-content: center; font-size: 12px; font-weight: 600; line-height: 1.25; }
.job-goal-fit small { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.3; }
.job-goal-fit.state-match { color: #1c6b52; }
.job-goal-fit.state-partial { color: #7a5312; }
.job-goal-fit.state-mismatch { color: #8c3a30; }
.job-goal-fit.state-review, .job-goal-fit.state-unknown { color: var(--muted); }
/* "Not evaluated" is a state, not a bad score, and it must not look like one. */
.job-unscored { color: var(--muted); font-size: 11px; font-weight: 600; }
/* Application lifecycle: resume actions and manual apply, in each Applications
   List row's menu. B18: the three resume actions are one group in Apply's own
   resume-link style (`.tracker-resume-action`, above), and Apply is a compact
   button beside them at the row controls' 38 px. */
/* Pulled out by the links' own inline padding, so their text lines up with
   the form's labels. */
.tracker-resume-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; margin: 0 0 0 calc(-1 * var(--space-2)); }
.tracker-resume-state { margin: 0; color: var(--muted); font-size: 12px; }
.tracker-apply { min-height: 38px; padding: 7px 14px; font-size: 13px; }
.tailor-artifact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tailor-applied { color: #1c6b52; font-size: 12px; font-weight: 600; }
/* GTJ-RESUME-RENDERING B02: "Choose your resume template", between reviewing a
   tailored resume and downloading it. The active choice is shown by its border
   and wash as well as by the radio itself. */
.resume-template-step { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.resume-template-step h4 { margin: 0 0 4px; font-size: 14px; }
.resume-template-step > .v3-caption { margin: 0 0 12px; }
.template-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.template-option { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); font-weight: 400; cursor: pointer; }
.template-option:hover { border-color: var(--accent); }
.template-option:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.template-option input[type=radio] { flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; border: 0; accent-color: var(--accent); }
.template-option strong, .template-option small { display: block; }
.template-option small { color: var(--muted); font-size: 12px; }
.template-default { margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--wash); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 600; }
.template-preview { margin-top: 12px; }
.template-preview-status { min-height: 1.5em; margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.template-preview-status.is-error { color: #8c3a30; font-weight: 600; }
.template-preview-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 8px; }
.template-preview-error[hidden] { display: none; }
.template-preview-frame { display: block; width: 100%; height: min(70vh, 900px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.template-preview-frame[hidden] { display: none; }
@media (max-width: 767px) { .template-options { grid-template-columns: 1fr; } .template-preview-frame { height: 60vh; } }
.resume-compare-overlay { width: min(1100px, 100vw); }
.resume-compare-overlay .v2-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.resume-compare-overlay pre { max-height: 62vh; overflow: auto; padding: 14px; background: var(--wash); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.resume-compare-overlay h4 { margin: 0 0 8px; font-size: 13px; }
@media (max-width: 767px) { .resume-compare-overlay .v2-comparison { grid-template-columns: 1fr; } }
/* The Applied confirmation (UXD-5): one native modal in place of the browser's confirm. */
.confirm-dialog { width: min(440px, calc(100vw - 32px)); max-width: none; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); box-shadow: 0 18px 48px rgb(23 43 48 / .22); }
.confirm-dialog h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.confirm-dialog p { margin: 0; color: var(--muted); }
.confirm-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.apply-job-row:last-child { border-bottom: 0; }
.apply-job-row:hover { background: #fafcfb; }
.apply-job-main { width: 100%; min-height: 77px; padding: 12px 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.job-title-action { min-width: 0; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.job-title-action:hover h3 { color: var(--accent); }
.job-select { display: grid; place-items: center; width: 34px; height: 44px; }
.job-select input { width: 17px; height: 17px; accent-color: var(--accent); }
.apply-job-row h3 { margin: 0 0 3px; font-size: 15px; }
.apply-job-row p { margin: 0; color: var(--muted); }
.apply-job-row .job-next { justify-self: end; min-height: 38px; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--radius-sm); background: var(--panel); color: var(--accent); font: inherit; font-weight: 680; cursor: pointer; }
.apply-job-row .job-next:hover { background: var(--accent-wash); }
.apply-job-row .job-next:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.job-resume-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.job-resume-actions a, .job-resume-button, .tracker-resume-action { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--accent); font: inherit; font-size: 12px; font-weight: 680; line-height: 1.2; text-decoration: underline; text-underline-offset: 3px; }
.job-resume-button, .tracker-resume-action { cursor: pointer; }
.job-resume-button:hover, .job-resume-actions a:hover, .tracker-resume-action:hover { background: var(--accent-wash); }
.job-resume-button:disabled { color: var(--muted); cursor: wait; text-decoration: none; }
.job-posted, .job-score, .lifecycle-status, .preparation-status { color: var(--muted); font-size: 12px; }
.lifecycle-status { width: 100%; min-height: 38px; padding: 6px 8px; }
.job-score { color: var(--accent); font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.preparation-status { font-weight: 680; }
.state-ready-for-review { color: var(--success); }
.state-needs-input, .state-needs-manual-action, .state-needs-confirmation, .state-failed { color: var(--amber); }
.prepare-selection { position: sticky; z-index: 4; top: calc(var(--nav-height) + 8px); display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(255 255 255 / .98); }
.prepare-selection[hidden] { display: none; }
.auto-prepare-setting { display: grid; gap: 7px; margin-top: 20px; font-weight: 680; }
.apply-warning { display: block; margin-top: 6px; color: var(--amber); font-size: 11px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; color: var(--muted); }
.pagination-actions { display: flex; gap: 8px; }

/* Guided Apply journey */
.apply-flow-page { max-width: 1120px; scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }
.apply-flow-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--muted); font-size: 13px; }
.apply-flow-breadcrumb .v3-link { min-height: 32px; padding: 0; }
.apply-flow-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.apply-flow-header h1 { max-width: 760px; margin: 0; font-size: 34px; line-height: 1.15; letter-spacing: -.035em; }
.apply-preparing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: 22px; align-items: start; }
.apply-focus-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.apply-focus-card h2 { max-width: 650px; margin: 5px 0 12px; font-size: 24px; line-height: 1.28; letter-spacing: -.02em; }
.apply-focus-card > p:not(.v3-eyebrow) { max-width: 68ch; color: var(--muted); }
.preparing-orbit { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 26px; border: 1px solid var(--line); border-radius: 50%; background: var(--accent-wash); }
.preparing-orbit::before { width: 22px; height: 22px; border: 2px solid rgb(23 107 89 / .22); border-top-color: var(--accent); border-radius: 50%; content: ""; animation: apply-spin .9s linear infinite; }
.preparing-orbit span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@keyframes apply-spin { to { transform: rotate(360deg); } }
.apply-progress { margin: 0; padding: 8px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); list-style: none; }
.apply-progress li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 11px; min-height: 56px; padding: 14px 0; color: var(--muted); }
.apply-progress li:not(:last-child)::after { position: absolute; top: 42px; bottom: -14px; left: 11px; width: 1px; background: var(--line); content: ""; }
.progress-marker { z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel); }
.progress-complete { color: var(--ink) !important; }
.progress-complete .progress-marker { border-color: var(--accent); background: var(--accent); }
.progress-complete .progress-marker::after { color: #fff; font-size: 13px; font-weight: 800; content: "✓"; }
.progress-active { color: var(--ink) !important; }
.progress-active .progress-marker { border: 2px solid rgb(23 107 89 / .25); border-top-color: var(--accent); animation: apply-spin .9s linear infinite; }
.progress-failed .progress-marker, .progress-attention .progress-marker { border-color: var(--amber); background: var(--amber-wash); }
.progress-failed .progress-marker::after, .progress-attention .progress-marker::after { color: var(--amber); font-weight: 800; content: "!"; }
.apply-progress strong, .apply-progress small { display: block; }
.apply-progress small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.answer-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.answer-tally span { padding: 14px; background: var(--wash); color: var(--muted); font-size: 11px; text-transform: capitalize; }
.answer-tally strong { display: block; color: var(--ink); font-size: 19px; }
.review-card, .final-review, .outcome-card { max-width: 820px; margin: 0 auto; }
.flow-notice { margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--amber); background: var(--amber-wash); color: #624709; }
.flow-question-list { margin-top: 28px; }
.flow-question-list > h3 { margin-bottom: 12px; }
.flow-question { display: grid; gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); }
.flow-question > label { color: var(--ink); font-weight: 680; }
.flow-question > small { color: var(--muted); }
.flow-question.manual { padding: 16px; border: 1px solid #efd49d; border-radius: var(--radius); background: var(--amber-wash); }
.flow-question.manual p { margin: 0; color: #624709; }
.generated-review { margin-top: 22px; border-top: 1px solid var(--line); }
.generated-review > summary { min-height: 52px; padding: 15px 0; color: var(--accent); font-weight: 680; }
.flow-primary-row { display: flex; justify-content: flex-end; margin-top: 26px; }
.flow-primary-row .v3-primary { min-width: 148px; }
.ready-heading { display: flex; align-items: center; gap: 15px; }
.ready-check { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 20px; font-weight: 800; }
.review-resume { display: grid; gap: 4px; margin: 26px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.review-resume h3 { margin: 0 0 7px; }
.review-resume span { color: var(--muted); }
.review-sections > h3 { margin-bottom: 8px; }
.review-sections details { border-top: 1px solid var(--line); }
.review-sections summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 13px 0; }
.review-sections summary strong { color: var(--success); }
.review-answer { display: grid; grid-template-columns: minmax(160px, .7fr) minmax(0, 1.3fr); gap: 4px 18px; padding: 13px 0; }
.review-answer span { color: var(--muted); }
.review-answer small { grid-column: 2; color: var(--subtle); }
.final-safety-copy { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; }
.final-apply { min-width: 170px !important; }
.outcome-card { text-align: center; }
.outcome-card > p { margin-inline: auto; }
.outcome-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; font-size: 24px; font-weight: 800; }
.outcome-icon.success { background: var(--accent-wash); color: var(--success); }
.outcome-icon.attention { background: var(--amber-wash); color: var(--amber); }
.technical-details { margin-top: 24px; text-align: left; }
.technical-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); overflow: hidden; }
.technical-details dl div { min-width: 0; padding: 10px 12px; background: var(--wash); text-align: left; }
.technical-details dt { color: var(--muted); font-size: 11px; }
.technical-details dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Job detail and application flow */
/* The job detail and the resume comparison are native modal dialogs (B03).
   These undo the UA dialog box -- centring margin, max sizes, inline insets,
   CanvasText -- so the right-hand panel keeps its geometry; the scrim that was
   a separate element is the dialog's own ::backdrop. */
dialog.detail { inset: 0 0 auto auto; max-width: none; max-height: none; margin: 0; color: inherit; }
dialog.detail::backdrop, dialog.confirm-dialog::backdrop { background: rgb(18 35 39 / .43); }
.detail { position: fixed; z-index: var(--layer-dialog); top: 0; right: 0; width: min(660px, 100%); height: 100dvh; padding: 0 36px 116px; overflow: auto; overscroll-behavior: contain; border: 0; background: var(--panel); box-shadow: -12px 0 36px rgb(23 43 48 / .14); }
.detail .close { position: sticky; z-index: 3; top: 0; float: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 16px 0 18px auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgb(255 255 255 / .97); color: var(--ink); }
.detail > .eyebrow { display: block; margin: -52px 60px 28px 0; color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.detail h2 { margin: 0 0 3px; font-size: 28px; line-height: 1.2; letter-spacing: -.025em; }
.detail > .subtitle { margin: 0 0 12px; color: var(--muted); font-size: 16px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 22px; color: var(--muted); font-size: 13px; }
.match-summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.match-number { color: var(--accent); font-size: 26px; font-weight: 770; }
.match-copy strong, .match-copy span { display: block; }
.match-copy span { color: var(--muted); font-size: 12px; }
.detail-signals { padding: 22px 0; border-bottom: 1px solid var(--line); }
.detail-signals h3 { margin: 0 0 10px; font-size: 17px; }
.signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; }
.fit-signal, .watch-signal { display: flex; gap: 9px; }
.fit-signal::before { color: var(--success); font-weight: 800; content: "✓"; }
.watch-signal::before { color: var(--amber); font-weight: 800; content: "△"; }
.role-summary { margin: 20px 0; color: #405357; }
.detail-primary-row { position: fixed; z-index: 2; right: 0; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; width: min(660px, 100%); padding: 14px 28px; border-top: 1px solid var(--line); background: rgb(255 255 255 / .98); }
.detail-primary-row .v3-overflow { margin-right: auto; }
/* Here "•••" sits at the left end of a bar fixed to the viewport's bottom edge,
   so the menu opens upward and left-aligned with it; the generic dropdown
   opened below the viewport and past its left edge (UXC-042). */
.detail-primary-row .v3-overflow[open] > .v3-menu { top: auto; right: auto; bottom: 100%; left: 0; margin: 0 0 8px; }
.detail > .v2-section-details { margin: 16px 0; }
.detail > .v2-section-details > summary { min-height: 44px; padding: 10px 0; color: var(--accent); font-weight: 650; }
.detail .liveness-result, .detail .resume-panel { margin: 12px 0; }
.journey-status { margin: 18px 0; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.journey-status h3 { margin: 0 0 12px; font-size: 16px; }
.journey-checks { display: grid; gap: 8px; }
.journey-check { display: flex; gap: 9px; color: var(--muted); }
.journey-check.complete { color: var(--ink); }
.journey-check::before { color: var(--subtle); content: "○"; }
.journey-check.complete::before { color: var(--success); font-weight: 800; content: "✓"; }
.application-workspace { display: grid; gap: 14px; margin-top: 18px; }
.application-workspace .readiness-card { padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--accent-wash); }
.application-workspace .workspace-group { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.application-workspace .workspace-field { padding: 14px; border-left-width: 3px; background: var(--wash); }
.application-workspace .workspace-save { justify-self: start; }
.application-workspace .workspace-actions { display: grid; gap: 8px; }
.application-workspace .workspace-actions button { width: 100%; }
.application-workspace > .v2-section-details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.application-workspace > .v2-section-details > summary { padding: 14px 16px; }

/* Applications */
.tracker-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.tracker-stats { display: flex; flex-wrap: wrap; gap: 20px; color: var(--muted); }
.tracker-stats strong { color: var(--ink); font-size: 18px; }
.tracker-update-form { display: grid; gap: var(--space-3); }
.tracker-list { overflow: hidden; padding: 0; }
.tracker-list-head, .tracker-list-row { display: grid; grid-template-columns: 1fr 1.35fr 130px 130px 1.1fr 44px; align-items: center; gap: 16px; padding: 13px 18px; }
.tracker-list-head { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.tracker-list-row { position: relative; --tracker-pad-block: 13px; --tracker-pad-inline: 18px; padding: var(--tracker-pad-block) var(--tracker-pad-inline); border-bottom: 1px solid var(--line); }
.tracker-list-row:last-child { border-bottom: 0; }
.tracker-list-row > button { min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.tracker-list-row > button:hover { color: var(--accent); }
.tracker-list-row span { color: var(--muted); font-size: 13px; }
.tracker-list-update { align-self: start; }
.tracker-list-update > summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); list-style: none; }
.tracker-list-update > summary::-webkit-details-marker { display: none; }
/* B18: an open Application stays one row. Its details panel takes the next
   line under the row's own cells, and its ••• stays exactly where it was (the
   row's top-right corner, inside the row's padding) instead of dropping to the
   start of that line. The row is tinted and the form sits on it as a card, so
   the controls read as this row's. */
.tracker-list-row:has(> .tracker-list-update[open]) { background: var(--wash); }
.tracker-list-update[open] { grid-column: 1 / -1; grid-row: auto; }
.tracker-list-update[open] > summary { position: absolute; top: var(--tracker-pad-block); right: var(--tracker-pad-inline); border-color: var(--line-strong); background: var(--panel); }
/* The card only on an open row: Chromium still lays out a closed <details>'s
   content, in the 44 px ••• column, where the card's padding would spill. */
.tracker-list-update[open] > .tracker-update-form { margin-top: var(--space-1); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tracker-update-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.tracker-update-form label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 13px; }
/* The row's control height (38 px, the lifecycle select's) on desktop; IC-8's
   44 px at phone width, below. */
.tracker-update-form input:not([type="checkbox"]):not([type="hidden"]), .tracker-update-form textarea { min-height: 38px; padding: 7px 10px; }
.tracker-update-form textarea { resize: vertical; }
.tracker-update-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.tracker-update-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.tracker-update-actions [data-report] { margin-right: auto; min-height: 38px; padding: 7px 0; }
.tracker-update-actions .v3-primary { min-height: 38px; padding: 7px 16px; }
.tracker-search { width: min(360px, 100%); }

/* Resume Studio (the `tailor` screen): one form, Job details, open from the start.
   B18: one layout. The form, an evaluated resume above it and the Tailored
   Resumes list below share the content width (resume.css capped the form at
   980 px while the list ran the full width); the fields follow the Search Goal
   form's grid and label; the description opens short; and the panel ends at
   its actions. */
.tailor-workflow { margin-bottom: 0; }
.tailor-panel { max-width: none; margin-bottom: 16px; }
.tailor-fields { gap: 14px 16px; }
.tailor-fields label, .tailor-jd-field > label { gap: 6px; color: var(--muted); font-size: 13px; }
/* Three fields to a row on desktop (v2.css `.filters`): the URL takes two, so
   the second row has no empty cell beside the country format. */
@media (min-width: 1024px) { .tailor-fields > .tailor-url-field { grid-column: span 2; } }
.tailor-jd-field textarea { padding: 10px 12px; border-color: #9aaeb0; border-radius: var(--control-radius); font: inherit; }
/* The save option and the actions share the panel's last row. */
.tailor-panel:not(.evaluated-tailor) { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.tailor-panel:not(.evaluated-tailor) > * { grid-column: 1 / -1; }
.tailor-panel:not(.evaluated-tailor) > .tailor-save { grid-column: 1; align-self: center; justify-self: start; }
.tailor-panel:not(.evaluated-tailor) > .tailor-actions { grid-column: 2; }
/* Two regions exist before they have anything to say -- the run status is a
   live region and must -- and each took a grid row's gap below the actions.
   Empty, they take no space; the status stays in the accessibility tree. */
.tailor-panel > #tailor-result:empty { display: none; }
.tailor-panel > #tailor-run-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tailor-panel h2 { margin: 0 0 6px; font-size: 18px; }
.tailor-panel p { color: var(--muted); }
/* An evaluated job's own resume, shown only while one is carried over or chosen. */
.evaluated-tailor[hidden] { display: none; }
/* The job description: its label, then the helper it is described by, then the field. */
.tailor-jd-field { display: grid; gap: 6px; }
.tailor-jd-field p { margin: 0; }
.tailor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tailored-library { margin-top: var(--space-6); }
/* The Applications search's width. */
.tailored-search { display: block; width: min(360px, 100%); margin-bottom: 14px; }
.tailored-list { overflow: hidden; padding: 0; }
.tailored-head, .tailored-row { display: grid; grid-template-columns: 1fr 1.4fr 90px 110px 110px 28px; align-items: center; gap: 16px; padding: 13px 18px; }
.tailored-head { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.tailored-row { width: 100%; min-height: 68px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.tailored-row:last-child { border-bottom: 0; }
.tailored-row:hover { background: #fafcfb; }
.tailored-row strong { font-size: 13px; }
.tailored-row span { color: var(--muted); font-size: 13px; }
.tailored-row .verified { color: var(--success); font-weight: 650; }
.resume-panel .v2-statline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); overflow: hidden; }
.resume-panel .v2-statline > div { padding: 14px; background: var(--panel); text-align: center; }
.resume-panel .v2-statline strong, .resume-panel .v2-statline span { display: block; }
.resume-panel .v2-statline strong { font-size: 17px; }
.resume-panel .v2-statline span { color: var(--muted); font-size: 11px; }

/* Profile */
.profile-overview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin-bottom: 16px; padding: 24px; }
.v2-avatar { display: grid; flex: none; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); font-size: 22px; font-weight: 720; object-fit: cover; }
.profile-overview h2 { margin: 0 0 3px; font-size: 23px; }
.profile-overview p { margin: 0; color: var(--muted); }
.profile-readiness { margin-top: 10px !important; color: var(--ink) !important; }
.profile-review-details { margin-top: 8px; }
.profile-review-details > summary { color: var(--accent); cursor: pointer; font-size: 13px; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.profile-chips li { border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; background: var(--panel-muted, #f6f8f9); font-size: 12px; line-height: 1.6; }
.profile-conflicts { display: grid; gap: 12px; margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--control-radius); }
/* GTJ-BASELINE-ONBOARDING B05: the base-resume review (resume-review.mjs). Theme tokens only, so Light, Auto and Dark follow. */
#resume-review { min-width: 0; overflow-wrap: anywhere; }
.resume-review > h3 { margin: 16px 0 6px; font-size: 18px; scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }
.resume-review > p { margin: 0 0 8px; }
.resume-review h5 { margin: 12px 0 6px; color: var(--muted); font-size: 13px; font-weight: 650; }
.resume-review-section { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.resume-review-section h4 { margin: 0 0 8px; font-size: 15px; }
.resume-review-list { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
.resume-review-list small, .resume-removal small, .resume-review-diff small { display: block; color: var(--muted); font-size: 12px; }
.resume-review-label { font-weight: 650; }
.resume-review-look { color: var(--amber) !important; }
.resume-review-diff { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 4px 12px; margin: 6px 0; }
.resume-review-diff dt { color: var(--muted); }
.resume-review-diff dd { margin: 0; min-width: 0; }
.resume-review-choice { margin-top: 8px; font-weight: 550; }
.resume-review-choice select { max-width: 360px; }
.resume-removals { min-width: 0; margin: 16px 0; padding: 14px 16px; border: 1px solid var(--amber); border-radius: var(--control-radius); background: var(--amber-wash); color: var(--ink); }
.resume-removals legend { padding: 0 6px; font-weight: 680; }
.resume-removals > p { margin: 0 0 8px; }
.resume-removals .resume-review-list { padding-left: 0; list-style: none; }
label.resume-removal, label.resume-review-confirm { display: flex; align-items: flex-start; gap: 10px; font-weight: 550; }
label.resume-removal input, label.resume-review-confirm input { flex: none; margin: 3px 0 0; }
label.resume-removal span, label.resume-review-confirm span { min-width: 0; }
.resume-review-notice { margin: 12px 0; padding: 12px 14px; border-left: 3px solid var(--amber); background: var(--amber-wash); color: var(--ink); }
.resume-review-notice ul { margin: 6px 0; padding-left: 20px; }
.resume-review-notice p { margin: 0; }
.resume-review-unchanged { margin-top: 8px; }
.resume-review > .resume-review-untouched { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.resume-review-unchanged > summary { color: var(--accent); cursor: pointer; font-size: 13px; }
.resume-review-unchanged > ul { margin-top: 8px; }
.resume-review-text textarea { margin-bottom: 10px; }
.resume-review-status { margin: 12px 0 0; color: var(--muted); }
.resume-review-status:empty, #resume-review .inline-error:empty, #resume-upload-error:empty { display: none; }
#resume-review > label.resume-review-confirm { margin-top: 16px; }
.resume-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
@media (max-width: 520px) { .resume-review-diff { grid-template-columns: minmax(0, 1fr); } .resume-review-diff dd { margin-bottom: 6px; } }
.profile-section { margin: 0; padding: 20px; }
.profile-section#profile-answers { grid-column: 1 / -1; }
.profile-section h2 { margin: 0 0 14px; font-size: 16px; }
.profile-definition { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 9px 14px; margin: 0; }
.profile-definition dt { color: var(--muted); }
.profile-definition dd { margin: 0; overflow-wrap: anywhere; }
.profile-editor { margin: 16px 0; }
.profile-editor > summary { min-height: 48px; padding: 13px 18px; color: var(--accent); font-weight: 680; }
.profile-editor-body { display: grid; gap: 24px; padding: 4px 20px 20px; }
.profile-editor-body h3 { margin: 0 0 14px; font-size: 16px; }
.v2-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-form .wide { grid-column: 1 / -1; }
.profile-save-row { display: flex; justify-content: flex-end; gap: 10px; }
.profile-photo-tools { border-top: 1px solid var(--line); padding-top: 18px; }
.profile-document-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.answer-library article { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(180px, 1.4fr) minmax(170px, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.answer-library article:last-child { border-bottom: 0; }
.answer-library article > div small, .answer-library article > div strong { display: block; }
.answer-library article > span, .answer-library article > small { margin: 0; }
.answer-library .v2-section-details { margin: 0; }
.v2-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-comparison pre { max-height: 360px; overflow: auto; background: var(--wash); padding: 16px; }

.v3-empty { padding: 26px 22px; color: var(--muted); text-align: center; }
.toast { z-index: var(--layer-toast); }
/* B04 — one feedback host (feedback.mjs). The toast keeps its colours, radius,
   shadow and type; it now stacks inside the host instead of each toast being
   fixed to the same corner, so two never overlap. Errors sit nearest the
   corner. Inside the job detail the host sits above the dialog's action bar. */
.feedback-host { position: fixed; z-index: var(--layer-toast); right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-end; max-width: calc(100vw - 32px); pointer-events: none; }
.toast-lane { display: flex; flex-direction: column; align-items: flex-end; }
.feedback-host .toast { position: static; display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; pointer-events: auto; }
.toast-text { margin: 0; }
.toast-dismiss { flex: none; margin: -3px -6px -3px 0; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: 16px; line-height: 1.4; cursor: pointer; }
.toast-dismiss:hover { background: rgb(255 255 255 / .18); }
dialog.detail > .feedback-host { bottom: 88px; }
/* The sign-in gate has its own notices, and nothing is said before sign-in. */
body.auth-screen .feedback-host { display: none; }
.inline-error:not(:empty) { display: block; margin-top: 6px; color: var(--danger); font-size: 13px; }
.notification-status { margin: 0; padding: 0 16px; color: var(--muted); font-size: 13px; }
.notification-status:not(:empty) { padding: 12px 16px 4px; }
.notification-status.is-error { color: var(--danger); }
.notification-retry { justify-self: start; margin: 0 16px 8px; }
/* B05 — while a navigation waits for its screen, the screen the customer left
   is shown as waiting rather than passed off as the new one (UXC-017). The
   delay keeps a quick navigation from flickering; nothing animates. */
main[aria-busy="true"] > #app { opacity: .55; cursor: progress; transition: opacity 0s linear .2s; }
/* An empty list's next step (UXC-023, UXC-024). */
.v3-empty-action { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 0; }
/* A disabled action's reason, in visible text beside it (UXC-037). */
.action-reason { display: block; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.detail-primary-row .action-reason { flex: 1 1 0; min-width: 0; margin: 0; text-align: right; }
.detail-primary-row > .v3-overflow, .detail-primary-row > .v3-primary { flex: none; }
.v3-menu .action-reason { margin: -4px 0 4px; padding: 0 10px 6px; font-size: 12px; }
/* A request in flight (UXC-038). */
[aria-busy="true"] > [aria-disabled="true"], button[aria-busy="true"] { cursor: progress; }

@media (max-width: 1100px) {
  .topbar-inner { grid-template-columns: 150px minmax(0, 1fr) minmax(100px, auto); padding: 0 24px; }
  .journey-nav { gap: 18px; }
  .page { padding: 36px 24px 72px; }
  .dash-panels { grid-template-columns: 1fr; }
  .apply-job-main { grid-template-columns: minmax(170px, 1.2fr) 68px minmax(110px, .8fr) 46px 90px 100px 92px; }
  .apply-job-head { grid-template-columns: 34px minmax(170px, 1.2fr) 68px minmax(110px, .8fr) 46px 90px 100px 92px; }
  .self-service-job-head, .self-service-job-main { grid-template-columns: minmax(160px, 1.1fr) 64px minmax(100px, .75fr) 66px 120px 108px 92px minmax(120px, auto) 76px; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .search-goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apply-job-main { grid-template-columns: minmax(160px, 1fr) 68px 46px 88px 96px 88px; }
  .apply-job-head { grid-template-columns: 34px minmax(160px, 1fr) 68px 46px 88px 96px 88px; }
  /* B20: Apply keeps its Location column here -- its filter lives in that
     header -- with the 901–1100 px columns, and scrolls sideways as it does
     up to 1150 px. Declared after the AI Apply rows above, which it must
     not inherit. */
  .self-service-job-head, .self-service-job-main { grid-template-columns: minmax(160px, 1.1fr) 64px minmax(100px, .75fr) 66px 120px 108px 92px minmax(120px, auto) 76px; }
  .apply-job-row:not(.self-service-job-row) .job-location, .apply-job-head:not(.self-service-job-head) span:nth-child(4) { display: none; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .search-goal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .progress-visual { grid-template-columns: 116px minmax(0, 1fr); }
}


@media (max-width: 767px) {
  .search-goal-grid { grid-template-columns: 1fr; }
  .search-goal-actions { align-items: stretch; flex-direction: column; }
  .search-goal-actions > button, .search-goal-actions .scan-control button { width: 100%; min-height: 44px; }
  .search-goal-actions .scan-control { justify-items: stretch; }
  :root { --nav-height: 112px; }
  .topbar { height: var(--nav-height); }
  .topbar-inner { grid-template-columns: 1fr auto; height: auto; padding: 12px 16px 0; }
  .brand { height: 40px; }
  .topbar-actions { grid-column: 2; grid-row: 1; }
  .journey-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 20px; height: 59px; overflow-x: auto; scrollbar-width: none; }
  .journey-nav::-webkit-scrollbar { display: none; }
  .journey-nav .nav-item { flex: none; font-size: 12px; }
  .page { padding: 28px 16px 64px; }
  .page > h1 { font-size: 28px; }
  .page > .subtitle { margin-bottom: 24px; font-size: 15px; }
  .metric-grid { grid-template-columns: 1fr; }
  .page-dashboard > .subtitle { margin-bottom: 16px; }
  .dash-goal { align-items: stretch; flex-direction: column; }
  .dash-goal > .v3-secondary { width: 100%; min-height: 44px; }
  .dash-goal-main { flex-direction: column; gap: 3px; }
  .progress-visual { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
  .progress-legend { width: 100%; }
  .dash-module-head { flex-wrap: wrap; gap: 4px 12px; }
  .dash-head { display: none; }
  .dash-row, .dash-opportunity-row, .dash-application-row { grid-template-columns: 1fr; gap: 0; padding: 4px 16px 16px; }
  .dash-row-open { min-height: 0; padding: 14px 0 6px; }
  .dash-cell { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 0; }
  .dash-cell-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; color: var(--subtle); font-size: 11px; font-weight: 680; letter-spacing: .04em; text-transform: uppercase; white-space: normal; }
  .dash-cell-action { justify-self: stretch; }
  .dash-row-action { width: 100%; min-height: 44px; }
  .dash-row .lifecycle-status { min-height: 44px; }
  .background-row > summary { align-items: flex-start; flex-direction: column; gap: 7px; }
  .background-status { max-width: none; text-align: left; }
  .background-progress-detail { grid-template-columns: 1fr; }
  .background-progress-detail ol { grid-template-columns: 1fr; }
  .attention-row { grid-template-columns: 1fr; padding: 0; }
  .attention-open { grid-template-columns: 1fr; }
  .attention-row > .lifecycle-control { margin: 0 16px 16px; }
  .next-label { justify-self: start; }
  .apply-header-tools { grid-template-columns: 1fr; }
  .scan-control { justify-items: stretch; }
  .scan-control .v3-secondary { width: 100%; }
  .apply-viewbar { align-items: flex-start; flex-direction: column; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; padding-inline: 8px; }
  .apply-filters { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding: 2px; }
  .filter-popover { position: fixed; z-index: 55; top: 118px; right: 16px; left: 16px; grid-template-columns: 1fr; width: auto; max-height: calc(100dvh - 140px); overflow: auto; }
  .filter-popover .wide { grid-column: auto; }
  .multi-select-panel, .saved-goals-panel { width: min(320px, calc(100vw - 32px)); }
  .goal-save-group, .scan-buttons { width: 100%; }
  .goal-save-group > button, .saved-goals, .saved-goals > summary, .scan-buttons > button { flex: 1 1 auto; justify-content: center; }
  .apply-job-head { display: none; }
  /* B20: rows are cards here, so Apply's header keeps only its filters, at
     the top of the results: one line that scrolls sideways, as the filter row
     did at this width before B20 -- never a block of rows above the first
     card. Each panel is fixed to the viewport (popover.mjs), so the line's
     own overflow does not clip it. */
  .self-service-job-head { display: flex; flex-wrap: nowrap; gap: 8px; padding: 12px 14px; overflow-x: auto; }
  .self-service-job-head > span:not(.has-column-filter) { display: none; }
  .self-service-job-head > .has-column-filter { flex: 0 0 auto; }
  /* The count and Sort keep their one line: the Sort menu narrows to the room
     the count leaves rather than wrapping under it, and the count itself is
     never squeezed onto two lines. */
  .apply-results-bar { flex-wrap: nowrap; }
  .apply-results-bar .result-count { flex: 0 0 auto; }
  .self-service-job-head .column-filter > summary { min-height: 40px; margin: 0; padding: 7px 12px; border: 1px solid var(--line-strong); background: var(--panel); color: #43565a; font-size: 12px; letter-spacing: 0; text-transform: none; }
  .apply-job-row { grid-template-columns: 32px minmax(0, 1fr); padding: 0 14px; }
  .apply-job-main { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; padding: 15px 0; }
  .self-service-job-row { grid-template-columns: minmax(0, 1fr); }
  .self-service-job-head, .self-service-job-row { min-width: 0; }
  .self-service-results { overflow-x: hidden; }
  .self-service-job-main { grid-template-columns: minmax(0, 1fr) auto; }
  .self-service-job-main .job-title-action { grid-column: 1 / -1; grid-row: 1; }
  .self-service-job-main .job-posted { grid-column: 1; grid-row: 2; }
  .self-service-job-main .job-score { grid-column: 2; grid-row: 2; justify-self: end; }
  /* UXC-027: Score, Goal Fit, Compatibility in the desktop order, then the
     row's actions. Goal Fit had no row here and was auto-placed last. */
  .self-service-job-main .job-goal-fit { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
  .self-service-job-main .job-compatibility { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
  .self-service-job-main .job-location { grid-column: 1 / -1; grid-row: 5; }
  .self-service-job-main > .lifecycle-status { grid-column: 1 / -1; grid-row: 6; }
  .self-service-job-main .job-resume-actions, .self-service-job-main .job-resume-button { grid-column: 1; grid-row: 7; justify-self: start; }
  .self-service-job-main > .job-resume-button { min-height: 44px; }
  .self-service-job-main .job-resume-actions a, .self-service-job-main .job-resume-actions button { min-height: 44px; }
  .preparation-status { grid-column: 1; }
  .apply-job-main > .lifecycle-status { grid-column: 1 / -1; display: block; }
  .apply-job-row .job-next { grid-column: 2; grid-row: 4; justify-self: end; }
  .self-service-job-main .job-next { grid-column: 2; grid-row: 7; min-height: 44px; }
  .prepare-selection { align-items: stretch; flex-direction: column; }
  .prepare-selection .v3-primary { width: 100%; }
  .pagination { align-items: flex-start; flex-direction: column; }
  .apply-flow-header h1 { font-size: 28px; }
  .apply-flow-header { align-items: stretch; flex-direction: column; }
  .technical-details dl { grid-template-columns: 1fr; }
  .apply-preparing-grid { grid-template-columns: 1fr; }
  .apply-focus-card { padding: 22px 18px; }
  .answer-tally { grid-template-columns: 1fr 1fr; }
  .apply-progress { padding-inline: 18px; }
  .review-answer { grid-template-columns: 1fr; }
  .review-answer small { grid-column: auto; }
  .flow-primary-row .v3-primary { width: 100%; }
  .detail { padding: 0 20px 108px; }
  .detail h2 { font-size: 25px; }
  .detail-primary-row { padding: 12px 16px; }
  .signal-grid { grid-template-columns: 1fr; }
  .tracker-topline { align-items: flex-start; flex-direction: column; }
  .tracker-list-head { display: none; }
  .tracker-list-row { grid-template-columns: minmax(0, 1fr) auto; --tracker-pad-block: 15px; --tracker-pad-inline: 15px; }
  .tracker-list-row > span { grid-column: 1 / -1; }
  .tracker-list-row > .lifecycle-status { grid-column: 1 / -1; display: block; }
  /* The ••• beside the company, top right, as on desktop; open, its panel
     follows the row's own lines (B18). */
  .tracker-list-update { grid-column: 2; grid-row: 1; }
  .tracker-list-update[open] > .tracker-update-form { padding: var(--space-3); }
  .tracker-update-fields { grid-template-columns: 1fr; }
  .tracker-update-form input:not([type="checkbox"]):not([type="hidden"]), .tracker-update-form textarea, .tracker-resume-action, .tracker-apply, .tracker-update-actions [data-report], .tracker-update-actions .v3-primary { min-height: 44px; }
  .tailor-panel:not(.evaluated-tailor) > .tailor-save, .tailor-panel:not(.evaluated-tailor) > .tailor-actions { grid-column: 1 / -1; }
  .tailor-panel:not(.evaluated-tailor) > .tailor-actions { justify-self: end; }
  .tracker-search { width: 100%; }
  .detail-lifecycle, .background-row-actions { align-items: stretch; flex-direction: column; }
  .tailored-head { display: none; }
  .tailored-row { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .tailored-row > span:nth-child(2) { grid-column: 1 / -1; }
  /* UXC-027: the fact status is a trust signal and stays; only the date goes.
     It takes the chevron's place beside the ATS score, and the chevron moves
     up beside the company, so the row keeps its three lines. */
  .tailored-row > span:nth-child(5) { display: none; }
  .tailored-row > span:nth-child(6) { grid-column: 2; grid-row: 1; justify-self: end; }
  .resume-panel .v2-statline { grid-template-columns: 1fr; }
  .profile-overview { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
  .profile-overview > .v3-primary { grid-column: 1 / -1; width: 100%; }
  .profile-definition { grid-template-columns: 1fr; }
  .profile-definition dd { margin-top: -6px; margin-bottom: 7px; }
  .v2-form, .v2-comparison { grid-template-columns: 1fr; }
  .v2-form .wide { grid-column: auto; }
  .answer-library article { grid-template-columns: 1fr; }
  input:not([type="checkbox"]), select, textarea { font-size: 16px; }
  /* IC-8: a 44 px touch target. It reaches into the toast's right padding, so
     the toast grows by less than the target does. */
  .toast-dismiss { min-width: 44px; margin-right: -14px; }
}

/* UXC-028: the five destinations need about 299 px of labels, whichever is
   active ("Resume Studio" is about 7 px wider than the "Tailor Resume" it
   replaced in GTJ-MANUAL-FIXES B14). Where the strip is narrow, their spacing
   shrinks evenly to 6 px instead of scrolling the last one out of sight, so
   every one is shown in full from about 355 px. (The 11 px label size this
   breakpoint used to set never applied: v2.css sets the phone label size
   with !important.) */
@media (max-width: 430px) {
  .journey-nav { justify-content: space-between; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progress-active .progress-marker::after { color: var(--accent); font-weight: 800; content: "•"; }
}

/* Profile Compatibility (TASK-017) — a new concept beside the legacy Score
   column, never a restyling of it. Every state is legible without colour: the
   cell always spells its state out, and the tint below is a secondary cue. */
.job-compatibility { display: inline-flex; align-items: center; min-width: 0; padding: 3px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: 11px; font-weight: 640; line-height: 1.3; overflow-wrap: anywhere; }
.job-compatibility.state-evaluated { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); background: var(--accent-wash); }
.job-compatibility.state-partial, .job-compatibility.state-stale { border-style: dashed; }
.job-compatibility.state-not_evaluated, .job-compatibility.state-failed { color: var(--muted); }
.filter-note { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
/* Its own section, deliberately NOT `.liveness-result`: the detail overlay
   sweeps every `dl` and `.liveness-result` into a collapsed "Technical details"
   disclosure, and an explanation of the compatibility number is the opposite of
   a technical detail. */
.detail .compatibility-panel { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.detail .compatibility-panel > strong { display: block; }
.detail .compatibility-panel ul { margin: 4px 0 8px; padding-left: 18px; }
.detail .compatibility-panel li { margin-bottom: 4px; }
.compatibility-panel .compatibility-note, .operational-panel .compatibility-note { margin: 4px 0 8px; color: var(--muted); font-size: 12px; }
/* Operational review: its own section, never nested inside the compatibility
   number or the Goal Fit verdict. Same reasoning as the compatibility panel --
   it must not be swept into the collapsed "Technical details" disclosure. */
.detail .operational-panel { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.detail .operational-panel > strong { display: block; }
.detail .operational-panel ul { margin: 4px 0 0; padding-left: 18px; }
.detail .operational-panel li { margin-bottom: 4px; }
.detail .operational-panel .compatibility-evidence { display: block; color: var(--muted); font-size: 11px; }
/* Names the 1-5 evaluation score (UXD-3 = A: no adjective its bands do not
   govern), so it cannot be read as a Profile Compatibility band. */
.match-summary .match-scale { display: block; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.compatibility-panel .compatibility-evidence { color: var(--muted); font-size: 11px; }
.compatibility-panel .compatibility-strength { color: var(--muted); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Beta feedback — the customer's own verdict on a job and on a tailored resume.

   Deliberately plain. These are the two controls private beta exists to
   collect, and a control that looks like a rating widget invites a rating; a
   pair of ordinary buttons invites an answer. Meaning is never carried by
   colour alone: the chosen option carries `aria-pressed`, a visible border and
   its own label, so the state survives a monochrome screen and a screen reader
   unchanged.
   --------------------------------------------------------------------------- */
.detail-feedback, .tailor-feedback { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--wash); }
.detail-feedback h3, .tailor-feedback h3 { margin: 0 0 10px; font-size: 14px; }
.feedback-options { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback-option { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font-weight: 620; }
.feedback-option:hover { border-color: #7b9b94; background: var(--surface-soft); }
.feedback-option.is-chosen { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-strong); }
.feedback-option.is-chosen::before { content: '✓ '; }
.feedback-reason { margin-top: 12px; }
.feedback-reason label { display: block; margin-bottom: 4px; font-weight: 620; font-size: 13px; }
.feedback-reason select { min-height: 44px; width: 100%; max-width: 420px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); }
.feedback-caption { margin: 10px 0 0; }

/* The recorded verdict where a posting is listed. It rides in the company line
   of the title cell, so it costs the nine-column grid nothing, and it is absent
   entirely when no verdict exists -- a neutral badge on an unanswered job would
   read as an answer. */
.job-verdict-chip { margin-left: 8px; padding: 1px 7px; border: 1px solid var(--line-strong); border-radius: 99px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.job-verdict-chip.verdict-relevant { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-strong); }
.job-verdict-chip.verdict-not_relevant { border-color: var(--line-strong); background: var(--wash); color: var(--muted); }

/* ---------------------------------------------------------------------------
   Start here — the first-run panel. It sits above the goal card, is rendered
   only while the workspace has produced nothing, and is an ordered list because
   the steps genuinely are ordered: each one is the next one's prerequisite.
   --------------------------------------------------------------------------- */
.dash-start { margin-bottom: 16px; padding: 16px 18px; }
.dash-start-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.dash-start-head p { margin: 0; }
.dash-start-lede { font-size: 15px; font-weight: 660; letter-spacing: -.01em; }
.dash-start-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.dash-start-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.dash-start-step.is-next { border-color: var(--accent); background: var(--accent-wash); }
.dash-start-marker { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 99px; background: var(--panel); font-size: 12px; font-weight: 700; }
.dash-start-step.is-done .dash-start-marker { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-strong); }
.dash-start-body { display: grid; gap: 2px; min-width: 0; }
.dash-start-body strong { font-size: 14px; }
.dash-start-foot { margin: 12px 0 0; }
@media (max-width: 560px) {
  .dash-start-step { grid-template-columns: 26px minmax(0, 1fr); }
  .dash-start-state { grid-column: 2; }
  .dash-start-state .v3-secondary { width: 100%; }
}

/* A tailoring run that failed. The v2 panel previously showed nothing at all,
   so the customer waited, then saw the same screen. A refused prerequisite is
   styled as guidance rather than as damage: it is the one failure here the
   customer can clear themselves, in a minute. */
.resume-failure { display: grid; gap: 6px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius-sm); background: #fdf3f2; }
.resume-failure.is-prerequisite { border-color: var(--amber); background: var(--amber-wash); }
.resume-failure strong { font-size: 14px; }
.resume-failure span { color: var(--muted); font-size: 13px; }
.resume-failure ul { margin: 2px 0 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.resume-failure .v3-secondary { justify-self: start; margin-top: 4px; }

/* ==========================================================================
   Dark: the colours the shipped screens write by hand (GTJ-MANUAL-FIXES B21).
   Each rule is scoped to dark and names, where one exists, the token the
   light colour stands for. Text on an accent fill turns dark, because the
   accent turns light. The resume preview frame stays white: a resume is a
   white page in either theme. Only released screens are covered: the gated
   AI Apply screen and its guided flow are not themed.
   ========================================================================== */
:root[data-theme="dark"] .topbar { background: rgb(22 33 36 / .97); }
:root[data-theme="dark"] .journey-nav .nav-item { color: var(--muted); }
:root[data-theme="dark"] .journey-nav .nav-item:hover,
:root[data-theme="dark"] .journey-nav .nav-item.active,
:root[data-theme="dark"] .journey-nav .nav-item[aria-current="page"] { color: var(--ink); }
:root[data-theme="dark"] .v3-primary,
:root[data-theme="dark"] .action-enabled.v3-primary,
:root[data-theme="dark"] .auth-primary,
:root[data-theme="dark"] .auth-step.is-current .auth-step-mark,
:root[data-theme="dark"] .button-link,
:root[data-theme="dark"] .actions .action-enabled,
:root[data-theme="dark"] .actions button.action-enabled { color: var(--wash); }
:root[data-theme="dark"] .notification-button strong { border-color: var(--panel); color: var(--wash); }
:root[data-theme="dark"] a { color: var(--accent); }
:root[data-theme="dark"] .notification-center,
:root[data-theme="dark"] .account-menu,
:root[data-theme="dark"] .filter-popover,
:root[data-theme="dark"] .filter-popover-surface,
:root[data-theme="dark"] .v3-overflow[open] > .v3-menu,
:root[data-theme="dark"] .confirm-dialog { box-shadow: 0 16px 42px rgb(0 0 0 / .5); }
:root[data-theme="dark"] dialog.detail::backdrop,
:root[data-theme="dark"] dialog.confirm-dialog::backdrop { background: rgb(0 0 0 / .55); }
:root[data-theme="dark"] .detail .close { background: rgb(22 33 36 / .97); }
:root[data-theme="dark"] .detail-primary-row { background: rgb(22 33 36 / .98); }
:root[data-theme="dark"] .dash-row:hover,
:root[data-theme="dark"] .attention-row:hover,
:root[data-theme="dark"] .apply-job-row:hover,
:root[data-theme="dark"] .tailored-row:hover { background: var(--surface-soft); }
:root[data-theme="dark"] .v3-secondary:hover,
:root[data-theme="dark"] .action-enabled:hover,
:root[data-theme="dark"] .dash-row-action:hover,
:root[data-theme="dark"] .feedback-option:hover,
:root[data-theme="dark"] .auth-card .auth-form input:hover,
:root[data-theme="dark"] .auth-google:hover { border-color: #6f8a85; }
:root[data-theme="dark"] input:not([type=checkbox]):not([type=hidden]),
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .multi-select-toggle,
:root[data-theme="dark"] .tailor-jd-field textarea,
:root[data-theme="dark"] .tailor-panel textarea,
:root[data-theme="dark"] .filters input,
:root[data-theme="dark"] .filters select { border-color: #5f7578; background-color: var(--panel); color: var(--ink); }
:root[data-theme="dark"] .theme-control .theme-slider[type="range"] { border-color: var(--line-strong); background: var(--surface-soft); }
:root[data-theme="dark"] .theme-slider::-webkit-slider-thumb { box-shadow: 0 1px 3px rgb(0 0 0 / .5); }
:root[data-theme="dark"] .auth-card .auth-form input::placeholder { color: var(--subtle); }
:root[data-theme="dark"] .filter-disclosure > summary,
:root[data-theme="dark"] .self-service-job-head .column-filter > summary,
:root[data-theme="dark"] .role-summary,
:root[data-theme="dark"] .pdf-result,
:root[data-theme="dark"] .tailor-panel label { color: var(--muted); }
:root[data-theme="dark"] .self-service-results {
  background-image:
    linear-gradient(to right, var(--panel) 50%, rgb(22 33 36 / 0)),
    linear-gradient(to left, var(--panel) 50%, rgb(22 33 36 / 0)),
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .5), rgb(0 0 0 / 0)),
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .5), rgb(0 0 0 / 0));
}
:root[data-theme="dark"] .job-goal-fit.state-match,
:root[data-theme="dark"] .tailor-applied { color: var(--success); }
:root[data-theme="dark"] .job-goal-fit.state-partial,
:root[data-theme="dark"] .warning { color: var(--amber); }
:root[data-theme="dark"] .job-goal-fit.state-mismatch,
:root[data-theme="dark"] .template-preview-status.is-error,
:root[data-theme="dark"] .pdf-result.failed { color: var(--danger); }
:root[data-theme="dark"] .profile-chips li { background: var(--surface-soft); }
:root[data-theme="dark"] .resume-failure,
:root[data-theme="dark"] .liveness-result.inactive { border-color: #7a3c36; background: rgb(241 149 139 / .1); }
:root[data-theme="dark"] .liveness-result.unknown { border-color: #6b5520; background: var(--amber-wash); }
:root[data-theme="dark"] .liveness-result { border-color: var(--line-strong); background: var(--surface-soft); }
:root[data-theme="dark"] .ats-optimization { border-top-color: var(--line-strong); }
:root[data-theme="dark"] .auth-badge,
:root[data-theme="dark"] .auth-message { border-color: var(--line-strong); }
:root[data-theme="dark"] .auth-error { border-color: #7a3c36; background: rgb(241 149 139 / .1); color: var(--danger); }
:root[data-theme="dark"] .auth-card { box-shadow: 0 1px 2px rgb(0 0 0 / .3), 0 22px 48px -18px rgb(0 0 0 / .6); }

/* GTJ-BASELINE-ONBOARDING B07 — first-login onboarding (ui/public/onboarding.mjs).
   While it is shown, or still being decided, the workspace's own ways in are
   not on the page: app.js sets body[data-onboarding], and this is the one rule
   that hides them (it outranks the display v3.css gives them). */
body[data-onboarding] .journey-nav, body[data-onboarding] #notification-button { display: none !important; }
.onboarding-page { display: grid; justify-items: center; max-width: none; margin: 0; }
.onboarding-card { width: 100%; max-width: 680px; min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); overflow-wrap: anywhere; }
.onboarding-card h1 { margin: 0 0 8px; color: var(--ink); font-size: 28px; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.onboarding-lede { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.onboarding-plan { display: grid; gap: 10px; margin: 0 0 8px; padding-left: 1.4em; line-height: 1.55; }
.onboarding-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.onboarding-steps { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 24px; padding: 0; border-bottom: 1px solid var(--line); list-style: none; }
.onboarding-step { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 4px 12px; color: var(--muted); font-size: 13px; font-weight: 620; }
.onboarding-step-mark { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--panel); font-size: 11px; font-weight: 750; }
.onboarding-step.is-current { color: var(--ink); font-weight: 700; }
.onboarding-step.is-current::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: var(--accent); content: ""; }
.onboarding-step.is-current .onboarding-step-mark { border-color: var(--accent); background: var(--accent); color: var(--panel); }
.onboarding-step.is-done { color: var(--accent-strong); }
.onboarding-step.is-done .onboarding-step-mark { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-strong); }
.onboarding-file { margin-top: 8px; }
.onboarding-review { margin-top: 16px; }
.onboarding-goal { display: grid; gap: 12px; margin-top: 8px; }
.onboarding-goal .v3-caption { margin: -4px 0 0; }
.onboarding-field { min-width: 0; }
.onboarding-work-modes { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; border: 0; }
.onboarding-work-modes legend { margin-bottom: 4px; padding: 0; font-weight: 550; }
.onboarding-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; }
.onboarding-ready { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--accent-wash); color: var(--accent-strong); }
.onboarding-note { margin: 4px 0 0; color: var(--muted); }
/* With the navigation row gone, a phone's top bar is one row high. */
@media (max-width: 767px) { body[data-onboarding] { --nav-height: 64px; } }
@media (max-width: 600px) {
  .onboarding-card { padding: 22px 16px; border-radius: 14px; }
  .onboarding-card h1 { font-size: 24px; }
  .onboarding-actions > .v3-primary { width: 100%; }
}

/* GTJ-BASELINE-ONBOARDING B10: the Profile ordered by what a value means — who the person is, their career from the
   resume, what they are looking for, and what only they can tell us. Every card is as tall as its content. */
.profile-hero { align-items: start; }
.profile-hero-main { display: grid; gap: 6px; min-width: 0; }
.profile-hero-main h2 { margin: 0; }
.profile-overview .profile-identity { color: var(--ink); font-size: 15px; font-weight: 560; overflow-wrap: anywhere; }
.profile-contact { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 0; color: var(--muted); font-size: 13px; list-style: none; }
.profile-contact li { overflow-wrap: anywhere; }
.profile-contact li:not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--subtle); } /* a wrapped line ends on the separator, never opens on it */
.profile-overview .profile-source-line { color: var(--subtle); font-size: 12px; }
.profile-hero .profile-readiness { margin-top: 4px !important; }
.profile-review-list { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.profile-review-list li { display: grid; gap: 1px; }
.profile-review-link { min-height: 0; padding: 0; text-align: left; font-weight: 650; }
.profile-review-details .v3-caption { margin: 10px 0 0; }
.profile-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.profile-span { grid-column: 1 / -1; }
.profile-lead { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; gap: 14px; }
.profile-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.profile-section-head h2 { margin: 0; }
.profile-source { padding: 1px 8px; border: 1px solid var(--line); border-radius: 99px; background: var(--wash); color: var(--subtle); font-size: 12px; white-space: nowrap; }
.profile-summary { margin: 0 0 14px; max-width: 75ch; line-height: 1.6; }
.profile-note { display: block; color: var(--subtle); font-size: 12px; }
.profile-goal .profile-definition { grid-template-columns: 96px minmax(0, 1fr); }
.profile-goal-note { margin: 12px 0 !important; }
.profile-empty { margin: 0; color: var(--subtle); font-size: 13px; }
.profile-roles { display: grid; margin: 0; padding: 0; list-style: none; }
.profile-role { padding: 14px 0; border-top: 1px solid var(--line); }
.profile-role:first-child { padding-top: 0; border-top: 0; }
.profile-role:last-child { padding-bottom: 0; }
.profile-role-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.profile-role-head > div { min-width: 0; flex: 1 1 320px; }
.profile-role-title { margin: 0; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }
.profile-role-org { margin: 2px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.profile-role-when { display: grid; gap: 1px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
.profile-role-points { display: grid; gap: 4px; margin: 10px 0 0; padding-left: 20px; }
.profile-skill-chips { gap: 8px; }
.profile-skill-chips li { padding: 3px 11px; font-size: 13px; }
.profile-records { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.profile-records > li { display: grid; gap: 2px; overflow-wrap: anywhere; }
.profile-record-sub { color: var(--ink); }
.profile-flag { margin: 6px 0 0; color: var(--amber); font-size: 12px; }
.profile-flag-label { margin-right: 4px; padding: 0 6px; border: 1px solid currentColor; border-radius: 99px; font-weight: 650; }
.profile-role.needs-review, .profile-records > li.needs-review { padding-left: 12px; border-left: 3px solid var(--amber); }
.profile-application-intro { margin: 0 0 14px; }
.profile-todo { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--wash); }
.profile-todo-title { margin: 0; font-weight: 650; }
.profile-todo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.profile-application .v3-caption { margin: 12px 0 0; }
.profile-documents .profile-photo-tools { margin-top: 18px; }
@media (max-width: 900px) {
  .profile-lead { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-role-when { text-align: left; }
  .profile-goal .profile-definition { grid-template-columns: minmax(0, 1fr); }
}
/* The collapsed editor is one row, not a card-sized gap; opened, its body keeps its own padding. */
.profile-editor { padding: 0; margin: 0 0 14px; }
@media (max-width: 767px) {
  .profile-contact { flex-direction: column; }
  .profile-contact li:not(:last-child)::after { content: none; }
}
@media (max-width: 480px) {
  .profile-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .profile-hero .v2-avatar { width: 56px; height: 56px; font-size: 18px; }
}