/**
 * Vosyn ATS candidate-facing styles. Everything is scoped to .vosyn-*
 * classes so the future Avada skin (NEW-13) re-themes by overriding these
 * hooks — structure and behavior stay untouched.
 */

:root {
    --vosyn-ink: #16233b;
    --vosyn-muted: #5b6b83;
    --vosyn-accent: #2547d0;
    --vosyn-accent-dark: #1b36a0;
    --vosyn-surface: #f5f7fb;
    --vosyn-border: #dbe2ee;
    --vosyn-ok: #0f7b41;
    --vosyn-warn: #b3261e;
    --vosyn-star: #c8860a;
}

/* ---------- shared primitives ---------- */

.vosyn-careers,
.vosyn-application,
.vosyn-dashboard,
.vosyn-questionnaire,
.vosyn-sjt,
.vosyn-nsf,
.vosyn-gds-session {
    color: var(--vosyn-ink);
    line-height: 1.55;
}

.vosyn-btn {
    display: inline-block;
    padding: 0.45em 1.1em;
    border-radius: 6px;
    background: var(--vosyn-accent);
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92em;
    border: 1px solid var(--vosyn-accent);
}

.vosyn-btn:hover,
.vosyn-btn:focus {
    background: var(--vosyn-accent-dark);
    border-color: var(--vosyn-accent-dark);
}

/* IT report (MM): the ghost button "appears greyed out, as though it's
   disabled" — the reporter confirmed it WORKS, but a transparent box with no
   edge reads as dead, and nobody clicks a dead button. It keeps the quieter
   secondary weight (it must not compete with the primary action beside it),
   but it now carries a visible edge and a pointer, so it reads as a control
   rather than as text. */
.vosyn-btn-ghost {
    background: transparent;
    color: var(--vosyn-accent) !important;
    border: 1px solid currentColor;
    cursor: pointer;
}

.vosyn-btn-ghost:hover,
.vosyn-btn-ghost:focus {
    background: var(--vosyn-surface);
    color: var(--vosyn-accent-dark) !important;
    border-color: currentColor;
}

.vosyn-btn-lg {
    padding: 0.7em 1.6em;
    font-size: 1.05em;
}

.vosyn-badge {
    display: inline-block;
    padding: 0.1em 0.55em;
    border-radius: 999px;
    background: #fdf3df;
    color: var(--vosyn-star);
    font-size: 0.75em;
    font-weight: 700;
    vertical-align: middle;
}

.vosyn-notice {
    border: 1px solid var(--vosyn-border);
    border-left: 4px solid var(--vosyn-accent);
    background: var(--vosyn-surface);
    border-radius: 6px;
    padding: 0.2em 1em;
    margin: 1em 0;
}

.vosyn-notice.vosyn-ok {
    border-left-color: var(--vosyn-ok);
}

.vosyn-notice.vosyn-error {
    border-left-color: var(--vosyn-warn);
}

/* ---------- CB-BOARD reference layout ---------- */

.vosyn-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.18em;
    flex: none;
}

.vosyn-hero {
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 14px;
    padding: 2.4em 2em 2em;
    text-align: center;
    margin-bottom: 1.6em;
}

.vosyn-hero .vosyn-open-roles {
    font-size: 2em;
    font-weight: 800;
    color: var(--vosyn-ink);
    margin: 0 0 0.8em;
}

.vosyn-hero .vosyn-open-roles strong {
    color: var(--vosyn-accent);
}

.vosyn-hero-search {
    display: flex;
    gap: 0;
    max-width: 760px;
    margin: 0 auto;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 10px;
    overflow: hidden;
}

.vosyn-hs-field {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex: 1;
    padding: 0 0.9em;
    color: var(--vosyn-muted);
}

.vosyn-hs-field + .vosyn-hs-field {
    border-left: 1px solid var(--vosyn-border);
}

.vosyn-hero-search .vosyn-hs-field input,
.vosyn-hero-search .vosyn-hs-field input[type="text"],
.vosyn-hero-search .vosyn-hs-field input[type="search"] {
    flex: 1;
    border: 0 !important;           /* Avada input[type=text] override */
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.95em 0;
    font-size: 1em;
    color: var(--vosyn-ink);
    outline: none;
}

.vosyn-hero-search button {
    border: 0;
    background: var(--vosyn-accent);
    color: #fff;
    font-weight: 700;
    padding: 0 1.6em;
    cursor: pointer;
}

.vosyn-categories h3,
.vosyn-featured h3 {
    text-align: center;
    margin: 1.2em 0 1em;
}

.vosyn-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.8em;
    margin-bottom: 1.8em;
}

.vosyn-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45em;
    text-align: center;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
    padding: 1.2em 0.8em 1em;
    text-decoration: none;
    color: var(--vosyn-ink);
}

.vosyn-cat-card .vosyn-icon {
    width: 1.8em;
    height: 1.8em;
    color: var(--vosyn-accent);
}

.vosyn-cat-card:hover,
.vosyn-cat-card:focus {
    border-color: var(--vosyn-accent);
}

.vosyn-cat-card.is-active {
    border-color: var(--vosyn-accent);
    box-shadow: 0 0 0 1px var(--vosyn-accent);
}

.vosyn-cat-name {
    font-weight: 700;
    font-size: 0.92em;
    line-height: 1.25;
}

.vosyn-cat-count {
    color: var(--vosyn-muted);
    font-size: 0.82em;
}

/* Listing rows (featured + grouped) — full-width content, muted chevron,
   whole row clickable. NO salary/duration column (CB-BOARD hard rule). */
.vosyn-job-row {
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
}

.vosyn-row-link {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 1.1em;
    text-decoration: none;
    color: var(--vosyn-ink);
}

.vosyn-row-icon {
    flex: none;
    width: 3em;
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(211, 38, 197, 0.12);
    color: var(--vosyn-accent);
}

.vosyn-row-icon .vosyn-icon {
    width: 1.5em;
    height: 1.5em;
}

.vosyn-row-main {
    flex: 1;
    min-width: 0;
}

.vosyn-row-title {
    display: block;
    font-weight: 700;
    font-size: 1.22em; /* CEO-02: "the title should be larger… it should be bigger" */
    line-height: 1.3;
}

.vosyn-row-dept-label {
    color: var(--vosyn-muted);
    font-weight: 600;
}

/* role="button" + click-to-filter, so it must meet the 24px minimum target
   size (WCAG 2.2 AA 2.5.8); the text alone renders ~21px on a phone.
   inline-flex + min-height grows the hit area without shifting the row. */
.vosyn-row-dept {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--vosyn-accent);
    font-size: 0.85em;
    font-weight: 600;
    margin: 0.15em 0 0.1em;
    cursor: pointer;
}

.vosyn-row-dept:hover,
.vosyn-row-dept:focus {
    text-decoration: underline;
}

.vosyn-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    color: var(--vosyn-muted);
    font-size: 0.85em;
    margin-top: 0.35em;
}

.vosyn-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.vosyn-row-chevron {
    flex: none;
    color: var(--vosyn-muted);
}

.vosyn-row-chevron .vosyn-icon {
    width: 1.3em;
    height: 1.3em;
}

@media (max-width: 640px) {
    .vosyn-hero-search {
        flex-direction: column;
    }

    .vosyn-hs-field + .vosyn-hs-field {
        border-left: 0;
        border-top: 1px solid var(--vosyn-border);
    }

    .vosyn-hero-search button {
        padding: 0.9em;
    }

    .vosyn-row-link {
        flex-wrap: wrap;
    }
}

/* ---------- careers board ---------- */

.vosyn-careers-hero {
    margin-bottom: 1.2em;
}

.vosyn-careers-tagline {
    font-size: 1.15em;
    color: var(--vosyn-muted);
    margin: 0 0 0.3em;
}

.vosyn-open-roles {
    font-size: 1.05em;
    margin: 0;
}

.vosyn-open-roles strong {
    color: var(--vosyn-accent);
    font-size: 1.25em;
}

.vosyn-careers-search {
    display: flex;
    gap: 0.5em;
    margin: 0 0 1.4em;
}

.vosyn-careers-search input[type="search"] {
    flex: 1;
    padding: 0.55em 0.9em;
    border: 1px solid var(--vosyn-border);
    border-radius: 6px;
    font-size: 1em;
}

.vosyn-careers-search button {
    padding: 0.55em 1.2em;
    border-radius: 6px;
    border: 1px solid var(--vosyn-accent);
    background: var(--vosyn-accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.vosyn-careers.is-searching #vosyn-board-results {
    opacity: 0.55;
}

.vosyn-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.7em;
    margin-bottom: 1.6em;
}

.vosyn-dept-card {
    display: block;
    padding: 0.8em 1em;
    border: 1px solid var(--vosyn-border);
    border-radius: 8px;
    background: var(--vosyn-surface);
    text-decoration: none;
    color: var(--vosyn-ink);
    transition: border-color 120ms ease;
}

.vosyn-dept-card:hover,
.vosyn-dept-card:focus {
    border-color: var(--vosyn-accent);
}

.vosyn-dept-name {
    display: block;
    font-weight: 700;
    font-size: 0.95em;
}

.vosyn-dept-count {
    color: var(--vosyn-muted);
    font-size: 0.85em;
    font-weight: 400;
}

.vosyn-featured {
    border: 1px solid #f0dcae;
    background: #fffaf0;
    border-radius: 10px;
    padding: 0.2em 1.2em 1em;
    margin-bottom: 1.6em;
}

.vosyn-dept-section h3 {
    font-size: 1.45em; /* CEO-03: "same size as the top, or maybe slightly smaller… stand out" */
    border-bottom: 2px solid var(--vosyn-border);
    padding-bottom: 0.3em;
    margin-top: 1.5em;
}

.vosyn-dept-section h3 .vosyn-dept-count {
    font-size: 0.62em;
    font-weight: 600;
    color: var(--vosyn-muted);
}

.vosyn-job-list {
    list-style: none;
    margin: 0.8em 0 0;
    padding: 0;
    display: grid;
    gap: 0.7em;
}

.vosyn-job-card {
    border: 1px solid var(--vosyn-border);
    border-radius: 8px;
    padding: 0.9em 1.1em;
    background: #fff;
}

.vosyn-job-title {
    font-weight: 700;
    font-size: 1.02em;
    text-decoration: none;
    color: var(--vosyn-ink);
}

.vosyn-job-title:hover,
.vosyn-job-title:focus {
    color: var(--vosyn-accent);
}

.vosyn-job-dept {
    display: inline-block;
    margin-left: 0.6em;
    color: var(--vosyn-muted);
    font-size: 0.85em;
}

/* CB-02: operator-approved card summaries — full text in the DOM, clamped
   visually only (3 lines on regular cards, 4 on Featured). */
.vosyn-job-summary {
    margin: 0.4em 0 0.6em;
    color: var(--vosyn-muted);
    font-size: 0.92em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.vosyn-featured .vosyn-job-summary {
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.vosyn-job-actions {
    display: flex;
    gap: 0.6em;
    margin-top: 0.4em;
}

.vosyn-board-empty {
    padding: 2.5em 1.2em;
    border: 1px dashed var(--vosyn-border);
    border-radius: 8px;
    color: var(--vosyn-muted);
    text-align: center;
}

.vosyn-board-empty p {
    font-size: 1.15em;
    margin: 0 0 1em;
}

/* CB-SEARCH Part B: location dropdown styled like the search field */
.vosyn-hero-search .vosyn-hs-field select {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1em;
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.vosyn-hero-search .vosyn-hs-field select:focus {
    outline: none;
}

/* CB-SEARCH Part C: welcome block — landing-page rhythm, wide measure so the
   copy reads short instead of a tall narrow column (keeps "Browse by
   department" closer to the fold). */
.vosyn-welcome {
    text-align: center;
    margin: 4rem auto 3rem;
    max-width: 1040px;
}

.vosyn-welcome-title {
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    margin: 0 0 0.4em;
}

.vosyn-welcome-sub {
    font-size: 1.15rem;
    color: var(--vosyn-muted);
    margin: 0 0 1.5rem;
}

.vosyn-welcome-copy p {
    font-size: 1.04rem;
    line-height: 1.7;
    color: var(--vosyn-muted);
    margin: 0 0 1.25rem;
}

.vosyn-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vosyn-muted);
    margin: 0 0 0.9em;
}

.vosyn-cat-card.is-muted {
    opacity: 0.45;
}

/* ---------- role detail ---------- */

.vosyn-breadcrumb {
    margin-bottom: 0.8em;
}

.vosyn-breadcrumb a {
    color: var(--vosyn-muted);
    text-decoration: none;
}

.vosyn-role-title {
    margin: 0 0 0.2em;
}

.vosyn-role-meta {
    color: var(--vosyn-muted);
    margin: 0 0 1.2em;
}

.vosyn-role-description ul {
    padding-left: 1.3em;
}

.vosyn-role-description li {
    margin-bottom: 0.35em;
}

.vosyn-role-cta {
    margin-top: 1.6em;
}

/* ---------- CB-01 job-detail (CEO-R1 Area B rework, 07-16) ----------
   Single full-width column (CEO-09); the right rail, its map (CEO-05) and the
   inert Indeed/LinkedIn placeholders (CEO-06/07) are gone. Apply = top banner
   (CEO-08/12a) + inline rows mid-page and at the bottom (CEO-12b/c).
   Spacing tightened ~35% per CEO-14; body copy up a step per CEO-15. */

.vosyn-jd-applybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-left: 4px solid var(--vosyn-accent);
    border-radius: 10px;
    padding: 0.85em 1.2em;
    margin: 0 0 1em;
}

.vosyn-jd-applybar-text {
    font-size: 1.05em;
}

.vosyn-jd-applyrow {
    margin: 1.2em 0 0.4em;
}

/* CEO-10: the job title is the hero element of the page. High-specificity
   selectors because Avada's compiled h1 typography (64px) outranks a bare
   class and long role titles would wrap into three shouting lines. */
#main .post-content .vosyn-jd-title,
.fusion-body .vosyn-jd-title,
.vosyn-jd-title {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.2;
    margin: 0 0 0.4em;
    text-wrap: balance;
}

/* Task #17 mobile hardening (kept): a grid/flex item defaults to
   min-width:auto and can punch past a narrow viewport; min-width:0 +
   overflow-wrap keeps long tokens from re-introducing the overflow.
   CEO-15: body copy one step larger now the column is full width. */
.vosyn-jd-main {
    min-width: 0;
    overflow-wrap: break-word;
    font-size: 1.06em;
}

.vosyn-jd-header {
    border: 1px solid var(--vosyn-border);
    border-left: 4px solid var(--vosyn-accent);
    border-radius: 8px;
    background: #fff;
    padding: 0.6em 1.1em;
    margin-bottom: 0.9em; /* CEO-14 */
}

.vosyn-jd-field {
    margin: 0.3em 0;
}

.vosyn-jd-section h2 {
    font-size: 1.25em;
    margin: 0.9em 0 0.4em; /* CEO-14: was 1.4em top */
    border-bottom: 2px solid var(--vosyn-border);
    padding-bottom: 0.25em;
}

.vosyn-jd-section ul,
.vosyn-jd-section ol {
    padding-left: 1.3em;
}

.vosyn-jd-section li {
    margin-bottom: 0.25em; /* CEO-14: was 0.35em */
}

.vosyn-crumb-sep {
    color: var(--vosyn-muted);
    margin: 0 0.25em;
}

.vosyn-jd-draft-flag {
    margin: 0 0 0.5em;
}

@media (max-width: 640px) {
    .vosyn-jd-applybar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* ---------- forms (application, questionnaires, SJT, NSF) ---------- */

.vosyn-application input:not([type="file"]),
.vosyn-application textarea,
.vosyn-questionnaire textarea,
.vosyn-questionnaire select,
.vosyn-questionnaire input,
.vosyn-nsf input,
.vosyn-nsf select,
.vosyn-sjt input[name="captcha_answer"],
/* P1-44 (2026-07-31): the account sign-up form had NO input styling at all —
   phones showed default white agent boxes against the dark theme. It joins
   the one shared themed-input rule. */
.vosyn-register-form input:not([type="submit"]):not([type="hidden"]),
.vosyn-dashboard input:not([type="file"]):not([type="submit"]),
.vosyn-dashboard textarea {
    width: 100%;
    max-width: 34em;
    padding: 0.5em 0.75em;
    border: 1px solid var(--vosyn-border);
    border-radius: 6px;
    font-size: 1em;
    background: #fff;
    /* Literal ink, NOT var(--vosyn-ink): this rule hard-codes a white field,
       and the dark retheme redefines that token to near-white for body text on
       dark — which renders typed text invisible on any form the theme's
       dark-field list happens to miss (P1-61: the sign-up form, 2026-07-31).
       The theme's dark-field rules still win by source order where they apply,
       so listed forms are unaffected; an unlisted one now degrades to readable
       dark-on-white instead of white-on-white. Same rule the settings block
       above states: never use --vosyn-ink inside a white field. */
    color: #16233b;
    box-sizing: border-box;
}

/* File inputs (application documents, dashboard signed-contract upload) carry
   an intrinsic button + filename width and don't shrink like text inputs — cap
   them so the control can never punch past a narrow card on small phones. */
.vosyn-application input[type="file"],
.vosyn-dashboard input[type="file"] {
    max-width: 100%;
    box-sizing: border-box;
}

.vosyn-application label,
.vosyn-questionnaire label,
.vosyn-nsf label {
    font-weight: 600;
    font-size: 0.95em;
}

.vosyn-application button[type="submit"],
.vosyn-questionnaire button[type="submit"],
.vosyn-sjt button[type="submit"],
.vosyn-nsf button[type="submit"],
.vosyn-dashboard button[type="submit"],
.vosyn-gds-session + form button[type="submit"] {
    padding: 0.65em 1.6em;
    border-radius: 6px;
    border: 1px solid var(--vosyn-accent);
    background: var(--vosyn-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1em;
    cursor: pointer;
}

.vosyn-sjt fieldset {
    border: 1px solid var(--vosyn-border);
    border-radius: 8px;
    padding: 0.8em 1.1em;
    margin-bottom: 1em;
    background: #fff;
}

.vosyn-sjt legend {
    font-weight: 600;
    padding: 0 0.4em;
}

.vosyn-sjt label {
    display: block;
    padding: 0.25em 0;
}

/* ---------- dashboard ---------- */

.vosyn-dashboard h3 {
    margin-top: 1.6em;
    border-bottom: 2px solid var(--vosyn-border);
    padding-bottom: 0.3em;
}

.vosyn-next-step {
    border: 1px solid var(--vosyn-border);
    border-left: 4px solid var(--vosyn-accent);
    background: var(--vosyn-surface);
    border-radius: 6px;
    padding: 0.7em 1em;
    margin: 1em 0;
}

.vosyn-funnel {
    list-style: none;
    counter-reset: vosyn-stage;
    margin: 1em 0;
    padding: 0;
}

.vosyn-funnel li {
    counter-increment: vosyn-stage;
    position: relative;
    padding: 0.35em 0 0.35em 2.4em;
    color: var(--vosyn-muted);
}

.vosyn-funnel li::before {
    content: counter(vosyn-stage);
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    border-radius: 50%;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    font-size: 0.85em;
    font-weight: 700;
}

.vosyn-funnel li.is-complete {
    color: var(--vosyn-ink);
}

.vosyn-funnel li.is-complete::before {
    content: "✓";
    background: var(--vosyn-ok);
    border-color: var(--vosyn-ok);
    color: #fff;
}

.vosyn-funnel li.is-current {
    color: var(--vosyn-ink);
    font-weight: 700;
}

.vosyn-funnel li.is-current::before {
    background: var(--vosyn-accent);
    border-color: var(--vosyn-accent);
    color: #fff;
}


/* ---------- GDS ---------- */

.vosyn-gds-session {
    border: 1px solid var(--vosyn-border);
    border-radius: 10px;
    background: var(--vosyn-surface);
    padding: 0.4em 1.3em 1.1em;
    max-width: 34em;
}

.vosyn-gds-session .button,
.vosyn-gds-session a.button {
    display: inline-block;
    padding: 0.6em 1.4em;
    border-radius: 6px;
    background: var(--vosyn-accent);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 600px) {
    .vosyn-careers-search {
        flex-direction: column;
    }

    .vosyn-job-actions {
        flex-wrap: wrap;
    }
}

/* ---------- CD-02 pipeline-first dashboard ---------- */

.vosyn-dash-profile {
    display: flex;
    align-items: center;
    gap: 1.5em;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.vosyn-dash-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 2px solid var(--vosyn-border);
}

.vosyn-dash-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2em;
    font-weight: 800;
    color: #fff;
    background: var(--vt-cta-grad, var(--vosyn-accent));
}

.vosyn-dash-identity {
    flex: 1 1 16em;
    min-width: 0;
}

.vosyn-dash-name {
    margin: 0 0 0.15em;
    font-size: 1.7em;
}

.vosyn-dash-role {
    margin: 0 0 0.3em;
    font-weight: 600;
}

.vosyn-dash-contact {
    margin: 0;
    color: var(--vosyn-muted);
    font-size: 0.92em;
}

.vosyn-dash-stagepill {
    padding: 0.45em 1em;
    border-radius: 999px;
    background: rgba(0, 208, 132, 0.14);
    color: var(--vt-green, #0f7b41);
    font-weight: 700;
    font-size: 0.9em;
    white-space: nowrap;
}

.vosyn-dash-tracker {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
}

.vosyn-dash-tracker li {
    flex: 1;
    height: 10px;
    border-radius: 5px;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
}

.vosyn-dash-tracker li.is-complete {
    background: var(--vt-green, #0f7b41);
    border-color: transparent;
}

.vosyn-dash-tracker li.is-current {
    background: var(--vt-cta-grad, var(--vosyn-accent));
    border-color: transparent;
}

.vosyn-dash-tracker.is-terminal li.is-complete {
    opacity: 0.55;
}

.vosyn-dash-terminal-note {
    color: var(--vosyn-muted);
    margin-bottom: 1.5rem;
}

.vosyn-dash-callout {
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-left: 4px solid var(--vosyn-accent);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 0 0 1.5rem;
}

.vosyn-dash-callout h3 {
    margin-top: 0;
    border: 0;
}

.vosyn-dash-waiting,
.vosyn-dash-muted,
.vosyn-dash-app-meta {
    color: var(--vosyn-muted);
}

.vosyn-dash-apps {
    margin-bottom: 1.5rem;
}

.vosyn-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.vosyn-dash-card {
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
    padding: 20px 24px;
    min-width: 0;
}

.vosyn-dash-card h3 {
    margin-top: 0;
    border: 0;
}

@media (max-width: 760px) {
    .vosyn-dash-grid {
        grid-template-columns: 1fr;
    }

    .vosyn-dash-avatar {
        width: 72px;
        height: 72px;
    }

    .vosyn-dash-profile {
        padding: 20px;
    }

    .vosyn-dash-stagepill {
        order: 3;
    }
}

/* ==========================================================================
   ADMIN-02 — front-end Admin Dashboard ([vosyn_admin_dashboard], PRD §9).
   Structural styles only; colors ride the --vosyn-* variables so the child
   theme's token mapping (CB-COLOR) themes this exactly like the candidate
   dashboard. Layout: left rail + main column, per the approved mockup.
   ========================================================================== */

.vosyn-adm {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    color: var(--vosyn-ink);
    line-height: 1.55;
}

/* ---------- §9.2 left rail ---------- */

.vosyn-adm-rail {
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
    padding: 10px;
    align-self: start;
}

.vosyn-adm-rail-toggle {
    list-style: none;
    cursor: default;
    padding: 8px 12px;
}

.vosyn-adm-rail-toggle::-webkit-details-marker {
    display: none;
}

.vosyn-adm-brand {
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vosyn-muted);
}

.vosyn-adm-rail-list {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
}

.vosyn-adm-rail-list li {
    margin: 0;
}

a.vosyn-adm-rail-item {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    color: var(--vosyn-ink) !important;
    text-decoration: none !important;
    font-weight: 500;
}

a.vosyn-adm-rail-item:hover,
a.vosyn-adm-rail-item:focus {
    background: rgba(255, 255, 255, 0.06);
}

a.vosyn-adm-rail-item.is-active {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: var(--vosyn-ok);
    font-weight: 700;
}

/* ---------- header + dual-role switch ---------- */

.vosyn-adm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vosyn-adm-head h2 {
    margin: 0;
}

/* ---------- §9.3 stat cards ---------- */

.vosyn-adm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

a.vosyn-adm-stat {
    display: block;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none !important;
    color: var(--vosyn-ink) !important;
}

a.vosyn-adm-stat:hover,
a.vosyn-adm-stat:focus {
    border-color: var(--vosyn-muted);
}

.vosyn-adm-stat-n {
    display: block;
    font-size: 1.9em;
    font-weight: 800;
    line-height: 1.1;
}

.vosyn-adm-stat.is-warn .vosyn-adm-stat-n {
    color: var(--vosyn-star);
}

.vosyn-adm-stat.is-ok .vosyn-adm-stat-n {
    color: var(--vosyn-ok);
}

.vosyn-adm-stat-label {
    display: block;
    color: var(--vosyn-muted);
    font-size: 0.9em;
}

/* ---------- cards + grids ---------- */

.vosyn-adm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.vosyn-adm-card {
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
    padding: 20px 22px;
    min-width: 0;
}

.vosyn-adm-card h3 {
    margin: 0 0 1rem;
    border: 0;
    font-size: 1.05em;
}

.vosyn-adm-empty {
    color: var(--vosyn-muted);
    font-style: italic;
    margin: 0;
}

/* ---------- column charts (§9.3 a/b) ---------- */

.vosyn-adm-cols {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 150px;
}

.vosyn-adm-colgroup {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 100%;
    position: relative;
    padding-bottom: 1.4em;
    min-width: 0;
}

.vosyn-adm-col {
    display: block;
    width: 28px;
    max-width: 40%;
    border-radius: 4px 4px 0 0;
    background: var(--vosyn-border);
    position: relative;
}

.vosyn-adm-col.is-issued { background: #3c4a7a; }
.vosyn-adm-col.is-responded { background: var(--vosyn-accent); }
.vosyn-adm-col.is-low { background: #3c4a7a; }
.vosyn-adm-col.is-warn { background: var(--vosyn-star); }
.vosyn-adm-col.is-ok { background: var(--vosyn-ok); }

.vosyn-adm-coln {
    position: absolute;
    top: -1.4em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78em;
    color: var(--vosyn-muted);
}

.vosyn-adm-collabel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.75em;
    color: var(--vosyn-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vosyn-adm-legend {
    margin: 0.75rem 0 0;
    font-size: 0.82em;
    color: var(--vosyn-muted);
}

.vosyn-adm-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin: 0 4px 0 10px;
    vertical-align: baseline;
}

.vosyn-adm-key.is-issued { background: #3c4a7a; margin-left: 0; }
.vosyn-adm-key.is-responded { background: var(--vosyn-accent); }

/* ---------- horizontal bar rows (§9.3 c/d) ---------- */

.vosyn-adm-rows {
    display: grid;
    gap: 7px;
}

.vosyn-adm-row {
    display: grid;
    grid-template-columns: minmax(120px, 42%) 1fr 3.5em;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
}

.vosyn-adm-rowlabel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vosyn-adm-rowtrack {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    height: 14px;
}

.vosyn-adm-rowbar {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--vosyn-accent);
    min-width: 3px;
}

.vosyn-adm-rowbar.is-ok {
    background: var(--vosyn-ok);
}

.vosyn-adm-rown {
    text-align: right;
    color: var(--vosyn-muted);
    white-space: nowrap;
}

/* ---------- §9.4 review queue ---------- */

.vosyn-adm-queue {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vosyn-adm-queue li {
    border-top: 1px solid var(--vosyn-border);
    margin: 0;
}

.vosyn-adm-queue li:first-child {
    border-top: 0;
}

.vosyn-adm-queue a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 10px 2px;
    text-decoration: none !important;
    color: var(--vosyn-ink) !important;
}

.vosyn-adm-queue-why {
    color: var(--vosyn-star);
    white-space: nowrap;
}

.vosyn-adm-more {
    margin: 0.75rem 0 0;
}

/* ---------- mobile: rail collapses to a top drawer ---------- */

@media (max-width: 860px) {
    .vosyn-adm {
        grid-template-columns: 1fr;
    }

    .vosyn-adm-rail-toggle {
        cursor: pointer;
    }

    .vosyn-adm-rail-toggle::after {
        content: ' ▾';
        color: var(--vosyn-muted);
    }

    .vosyn-adm-rail:not([open]) .vosyn-adm-rail-toggle::after {
        content: ' ▸';
    }

    .vosyn-adm-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .vosyn-adm-grid {
        grid-template-columns: 1fr;
    }

    .vosyn-adm-queue a {
        flex-direction: column;
        gap: 2px;
    }

    .vosyn-adm-queue-why {
        white-space: normal;
    }
}

/* ==========================================================================
   CEO-28 — front-end HR console ([vosyn_hr_console]). The console re-hosts
   the wp-admin screen classes, so this block themes the wp-admin markup they
   emit (.wrap/.widefat/.form-table/.button/.notice) on the dark canvas.
   Scoped STRICTLY under .vosyn-hrc-screen so nothing leaks site-wide; the
   gateway tiles are CEO-29's function launcher.
   ========================================================================== */

.vosyn-hrc-sub { color: var(--vosyn-muted); margin: 0 0 1.25rem; }

.vosyn-hrc-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

a.vosyn-hrc-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    background: var(--vosyn-surface);
    border: 1px solid var(--vosyn-border);
    border-radius: 12px;
    padding: 18px 20px;
    text-decoration: none !important;
    color: var(--vosyn-ink) !important;
    transition: border-color 120ms ease;
}

a.vosyn-hrc-tile:hover,
a.vosyn-hrc-tile:focus {
    border-color: var(--vosyn-accent);
}

.vosyn-hrc-tile-label { font-weight: 700; font-size: 1.05em; }
.vosyn-hrc-tile-hint { color: var(--vosyn-muted); font-size: 0.86em; }

/* ==========================================================================
   CONSOLE-UX-01 — HR console surface tokens + readability.
   WHY (from the work order): dark surround + pure-white card ran 17.87:1
   surround-to-card and 18.88:1 card-to-text — glare/halation for a team in
   this console 6+ hours a day. Targets: 11.87:1 and 12.39:1 (still ~3× the
   WCAG AA floor). Everything below is SCOPED — token definitions live on the
   console body class / shell, never :root, because vosyn.css is shared with
   the public careers board and candidate portal.
   Rollback: revert this block (single commit; see changelog).
   ========================================================================== */

body.vosyn-console-body,
.vosyn-hrc {
    --vs-console-bg: #26314F;             /* page surround */
    --vs-console-sidebar: #2E3A5C;        /* nav rail */
    --vs-console-surface: #F4F6FA;        /* content card */
    --vs-console-surface-raised: #FCFCFD; /* inputs, inner cards */
    --vs-console-text: #2A2F3A;           /* body text */
    --vs-console-text-secondary: #4A5060; /* supporting text */
    --vs-console-text-muted: #6B7280;     /* placeholder, metadata */
    --vs-console-border: #DDE1EA;         /* hairline */
    --vs-console-border-strong: #C3C9D6;  /* control border */
    --vs-console-table-header: #EDF0F5;   /* th background */
    --vs-console-row-hover: #EDF1F8;      /* tr:hover */
    --vs-console-accent: #1B2542;         /* brand navy — unchanged */
    --vs-console-accent-active: #34D399;  /* active nav marker — unchanged */
    /* gap-fill control tokens (work order defines surfaces; controls follow) */
    --vs-console-link: #2271b1;
    --vs-console-link-strong: #135e96;
    --vs-console-ok: #00a32a;
    --vs-console-ok-tint: #eef6ec;
    --vs-console-warn: #996800;
    --vs-console-warn-tint: #fcf3d9;
    --vs-console-danger: #b32d2e;
}

/* ---------- the workspace (operator 07-16: "use more of the page") ----------
   Avada caps content at 1200px with 60px/30px padding — most of a wide
   monitor was empty surround. The console page becomes a full-width
   workspace; scoped to the console body class only. */

body.vosyn-console-body #main,
body.vosyn-console-body #wrapper,
body.vosyn-console-body {
    background: var(--vs-console-bg) !important;
}

body.vosyn-console-body #main {
    padding: 26px 28px !important;
}

body.vosyn-console-body #main .fusion-row {
    max-width: none !important;
}

/* Rail: softened sidebar token; sticky so navigation survives long tables. */
.vosyn-console-body .vosyn-adm-rail,
.vosyn-hrc .vosyn-adm-rail {
    background: var(--vs-console-sidebar);
    border-color: transparent;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    align-self: start;
}

/* ---------- re-hosted wp-admin screens: tokenized worksheet ---------- */

.vosyn-adm-main { min-width: 0; } /* grid child must shrink or wide tables blow out the page */

.vosyn-hrc-screen {
    min-width: 0;
    overflow-x: auto;
    background: var(--vs-console-surface);
    color: var(--vs-console-text);
    border: 1px solid var(--vs-console-border-strong);
    border-radius: 10px;
    padding: 18px 22px;
}

.vosyn-hrc-screen .wrap { margin: 0; }

.vosyn-hrc-screen h1,
.vosyn-hrc-screen h2,
.vosyn-hrc-screen h3,
.vosyn-hrc-screen h4,
.vosyn-hrc-screen p,
.vosyn-hrc-screen li,
.vosyn-hrc-screen label,
.vosyn-hrc-screen legend,
.vosyn-hrc-screen th,
.vosyn-hrc-screen td,
.vosyn-hrc-screen dt,
.vosyn-hrc-screen dd {
    color: var(--vs-console-text) !important;
}

/* Theme heading sizes are tuned for marketing pages, not a worksheet. */
#main .post-content .vosyn-hrc-screen h1,
.vosyn-hrc-screen h1 { font-size: 1.4em; margin: 0 0 0.6em; }
#main .post-content .vosyn-hrc-screen h2,
.vosyn-hrc-screen h2 { font-size: 1.15em; }
#main .post-content .vosyn-hrc-screen h3,
.vosyn-hrc-screen h3 { font-size: 1.05em; }

.vosyn-hrc-screen .description,
.vosyn-hrc-screen em,
.vosyn-hrc-screen small {
    color: var(--vs-console-text-secondary) !important;
}

/*
 * Console link colour. The !important exists because the parent theme colours
 * every anchor inside .post-content, so the console has to win.
 *
 * It must NOT reach anchors that are styled as buttons: a filled button paints
 * its own background from --vs-console-link, so forcing the LABEL to the same
 * variable makes the text exactly the colour of the button it sits on. The
 * résumé button on the candidate screen rendered as an empty purple rectangle
 * for that reason (15 Aug) — only the emoji survived, because an emoji is an
 * image, not text. .button is WordPress's own button class; .vc-doc-btn is
 * ours. Any future button-shaped anchor in a console screen belongs on this
 * exclusion list, not in a per-screen !important patch.
 */
.vosyn-hrc-screen a:not(.button):not(.vc-doc-btn) {
    color: var(--vs-console-link) !important;
    text-decoration: underline;
}

.vosyn-hrc-screen a:not(.button):not(.vc-doc-btn):hover,
.vosyn-hrc-screen a:not(.button):not(.vc-doc-btn):focus {
    color: var(--vs-console-link-strong) !important;
}

/*
 * Document buttons (résumé / profile photo / agreement) on the candidate
 * screen. Excluding them above is not enough on its own: the parent theme
 * colours anchors with an ID selector (#main .post-content a…), which outranks
 * the plain-class rules the screen itself ships, so the label fell through to
 * the theme's link pink — 1.19:1 on the filled button, still unreadable.
 * These two rules are the only place the doc-button label colour is decided.
 *
 * The filled button takes the SURFACE colour as its label, so it inverts with
 * the theme instead of being pinned to one hex: dark ink on the light-purple
 * accent in the console's dark module, near-white on the dark blue in light
 * mode. Both sides measure above 4.5:1.
 */
.vc-doc-btn {
    color: var(--vs-console-text, #1d2327) !important;
    text-decoration: none !important;
}

.vc-doc-btn.is-primary,
.vc-doc-btn.is-primary:hover,
.vc-doc-btn.is-primary:focus {
    color: var(--vs-console-surface, #fff) !important;
}

.vosyn-hrc-screen code {
    background: var(--vs-console-table-header);
    color: var(--vs-console-text) !important;
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap; /* BUG-CONSOLE-01: status values never break mid-word */
}

/* Tables — the worksheet. Columns size to content; the PANEL scrolls
   horizontally, never the page. overflow-wrap:break-word (NOT anywhere):
   'anywhere' shrank every cell's min-content width to one character, which
   let wide text columns starve the action column until buttons rendered
   one letter per line (BUG-CONSOLE-01 root cause). */
.vosyn-hrc-screen table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    background: var(--vs-console-surface-raised);
    border: 1px solid var(--vs-console-border-strong);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.vosyn-hrc-screen table th,
.vosyn-hrc-screen table td {
    padding: 7px 10px;
    border: 1px solid var(--vs-console-border);
    text-align: left;
    vertical-align: top;
    max-width: 520px;
    overflow-wrap: break-word;
}

.vosyn-hrc-screen table thead th {
    background: var(--vs-console-table-header);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid var(--vs-console-border-strong);
}

/* Row tracking — the cheapest ergonomic win for table scanning (spec: hover
   yes, zebra no; stripes add noise to dense tables). */
.vosyn-hrc-screen table tbody tr:hover { background: var(--vs-console-row-hover); }

/* Forms */
.vosyn-hrc-screen .form-table { background: transparent; border: 0; min-width: 0; width: 100%; }
.vosyn-hrc-screen .form-table th { width: 240px; font-weight: 600; border: 0; background: transparent; white-space: normal; }
.vosyn-hrc-screen .form-table td { border: 0; background: transparent; max-width: none; }
.vosyn-hrc-screen .form-table tbody tr:hover { background: transparent; }

.vosyn-hrc-screen input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.vosyn-hrc-screen select,
.vosyn-hrc-screen textarea {
    background: var(--vs-console-surface-raised) !important;
    border: 1px solid var(--vs-console-border-strong);
    border-radius: 4px;
    color: var(--vs-console-text) !important;
    padding: 0.4em 0.65em;
    font-size: 0.95em;
    max-width: 100%;
    box-sizing: border-box;
}

/* WO2 defect 3 — the list-table pager inside a re-hosted screen.
   The theme styles every number input as width:100%, and the rule above only
   caps max-width, so the two-digit "page 1 of 74" box rendered as a full-width
   bar that shoved "of 74" and the next/last arrows onto their own line. It
   measured fine — visible, no overflow — and looked broken, which is exactly
   what the eyes-on check is for. Scoped to the console; wp-admin already sizes
   this correctly on its own. */
.vosyn-hrc-screen .tablenav-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4em 0.6em;
}

.vosyn-hrc-screen .tablenav-pages .displaying-num {
    margin-right: auto; /* count on the left, controls on the right */
}

.vosyn-hrc-screen .tablenav-pages .pagination-links,
.vosyn-hrc-screen .tablenav-pages .paging-input,
.vosyn-hrc-screen .tablenav-pages .paging-input form {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.vosyn-hrc-screen .tablenav-pages .current-page {
    width: 4.5em;
    min-width: 0;
    text-align: center;
}

.vosyn-hrc-screen input::placeholder,
.vosyn-hrc-screen textarea::placeholder {
    color: var(--vs-console-text-muted) !important;
    opacity: 1;
}

.vosyn-hrc-screen input:focus,
.vosyn-hrc-screen select:focus,
.vosyn-hrc-screen textarea:focus {
    border-color: var(--vs-console-link);
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.3);
    outline: none;
}

.vosyn-hrc-screen .regular-text { width: 25em; }
.vosyn-hrc-screen .large-text { width: 100%; }

/* Buttons — never allowed to break intra-word (BUG-CONSOLE-01). */
.vosyn-hrc-screen .button,
.vosyn-hrc-screen button:not([class]),
.vosyn-hrc-screen input[type="submit"] {
    display: inline-block;
    background: var(--vs-console-surface-raised);
    border: 1px solid var(--vs-console-link);
    color: var(--vs-console-link) !important;
    border-radius: 4px;
    padding: 0.35em 0.9em;
    font-weight: 600;
    font-size: 0.92em;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
}

.vosyn-hrc-screen .button:hover,
.vosyn-hrc-screen .button:focus,
.vosyn-hrc-screen button:not([class]):hover {
    background: var(--vs-console-row-hover);
    border-color: var(--vs-console-link-strong);
    color: var(--vs-console-link-strong) !important;
}

.vosyn-hrc-screen .button-primary,
.vosyn-hrc-screen input[type="submit"].button-primary {
    background: var(--vs-console-link);
    border-color: var(--vs-console-link);
    color: #fff !important; /* justified exception: text on the blue control itself */
}

.vosyn-hrc-screen .button-primary:hover,
.vosyn-hrc-screen .button-primary:focus {
    background: var(--vs-console-link-strong);
    border-color: var(--vs-console-link-strong);
    color: #fff !important; /* same exception */
}

.vosyn-hrc-screen .button-small { padding: 0.2em 0.6em; font-size: 0.85em; }

/* Notices (PRG feedback) */
.vosyn-hrc-screen .notice {
    background: var(--vs-console-surface-raised);
    border: 1px solid var(--vs-console-border-strong);
    border-left: 4px solid var(--vs-console-link);
    border-radius: 4px;
    padding: 0.3em 1em;
    margin: 0 0 1em;
}

.vosyn-hrc-screen .notice-success { border-left-color: var(--vs-console-ok); }
.vosyn-hrc-screen .notice-error { border-left-color: var(--vs-console-danger); }
.vosyn-hrc-screen .notice p { margin: 0.5em 0; }

@media (max-width: 860px) {
    body.vosyn-console-body #main { padding: 14px 10px !important; }
    .vosyn-console-body .vosyn-adm-rail,
    .vosyn-hrc .vosyn-adm-rail { position: static; max-height: none; }
    .vosyn-hrc-screen { padding: 14px; }
    .vosyn-hrc-screen .form-table th { width: auto; display: block; padding-bottom: 0; }
    .vosyn-hrc-screen .form-table td { display: block; }
    .vosyn-hrc-screen .regular-text { width: 100%; }
}

/* ---------- CEO-13: shared recruitment-process stepper ---------- */
.vosyn-jd-stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 0;
    margin: 0.8em 0 0;
    padding: 0;
    counter-reset: none;
}

.vosyn-jd-step {
    flex: 1 1 110px;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45em;
    position: relative;
    padding: 0 0.4em;
    margin: 0 !important;
}

.vosyn-jd-step::before {
    content: "";
    position: absolute;
    top: 1.05em;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--vosyn-border);
}

.vosyn-jd-step:first-child::before { display: none; }

.vosyn-jd-step-n {
    width: 2.1em;
    height: 2.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vt-cta-grad, var(--vosyn-accent));
    color: #fff;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.vosyn-jd-step-label {
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1.25;
}

@media (max-width: 640px) {
    .vosyn-jd-stepper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9em 0.5em; }
    .vosyn-jd-step::before { display: none; }
}

/* ---------- CEO-23: stage hero on the dashboard profile card ---------- */
.vosyn-dash-stagehero {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    padding: 14px 20px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--vosyn-border);
    border-left: 4px solid var(--vosyn-accent);
    min-width: 220px;
}

.vosyn-dash-stagehero-eyebrow {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vosyn-muted);
}

.vosyn-dash-stagehero-n {
    font-size: 1.9em;
    font-weight: 800;
    line-height: 1.1;
    background: var(--vt-cta-grad, none);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--vosyn-accent);
    -webkit-text-fill-color: transparent;
}

.vosyn-dash-stagehero-n small { font-size: 0.5em; font-weight: 600; }

.vosyn-dash-stagehero-name { font-weight: 700; font-size: 1.02em; }

@media (max-width: 760px) {
    .vosyn-dash-stagehero { margin-left: 0; width: 100%; box-sizing: border-box; }
}

/* ---------- CEO-24: live event line in the next-step panel ---------- */
.vosyn-dash-event { font-size: 1.02em; }

/* ---------- CEO-27: account settings ---------- */
/* G.UI-1: plain always-open section (was a <details> dropdown). Text inputs
   are hard-pinned dark-on-white: the dark retheme redefines --vosyn-ink to
   near-white while Avada forces input backgrounds white (!important), which
   made typed values white-on-white. Never use --vosyn-ink inside a white
   field. */
.vosyn-dash-settings { margin-top: 1.25rem; }
.vosyn-dash-settings input[type="text"] {
    width: 100%;
    max-width: 24em;
    padding: 0.5em 0.75em;
    border: 1px solid var(--vosyn-border);
    border-radius: 6px;
    background: #fff !important;
    color: #16233b !important;
    box-sizing: border-box;
}
/* The "no file selected" caption sits on the dark card - keep it light. */
.vosyn-dash-settings input[type="file"] {
    color: var(--vt-muted, #a7b0cc);
    font-size: 0.95rem;
}
.vosyn-dash-settings input[type="file"]::file-selector-button {
    padding: 10px 18px;
    margin-right: 12px;
    border: 1px solid var(--vosyn-border);
    border-radius: 6px;
    background: #fff;
    color: #16233b;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.vosyn-dash-settings input[type="file"]::file-selector-button:hover {
    filter: brightness(0.92);
}

/* ==========================================================================
   CB-APPLY (CEO-47/48/49/50 + CEO-21) — application form redesign.
   Tokens per WORKORDER_CB-APPLY Part 1 (measured values); CTA rides the
   live brand gradient var. Fixes: BUG-02 border 1.41:1 → 3.44:1 + input
   fill; BUG-03 submit 38px → 56px; BUG-04 native file inputs → full-card
   dropzones; BUG-06 dead space → role rail. CEO-22 deliberately absent.
   ========================================================================== */

.vosyn-apply-wrap {
    --va-ink-800: #0A1230;
    --va-ink-700: #0D1740;
    --va-hair: #5A6591;
    --va-hair-hover: #6E79A6;
    --va-focus: #68C0F0;
    --va-danger: #FF6B7A;
    --va-success: #3FCF8E;
    display: grid;
    grid-template-columns: 340px minmax(0, 760px);
    gap: 32px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
}

/* Found by the 12 Aug design pass, on a 375px phone: a grid item's default
   min-width is auto, so the form column could not shrink below the widest
   unbreakable thing inside it. The error summary quotes a full example URL
   (linkedin.com/in/yourname), which measures 353px, so the whole column went
   358px wide in a 315px slot and every card in it — verification included —
   ran off the screen edge. The column is allowed to shrink, and the summary
   is allowed to break a long address. */
.vosyn-apply-wrap > * { min-width: 0; }
.vosyn-apply-errors-list li { overflow-wrap: anywhere; }

/* ---------- rail ---------- */
.vosyn-apply-rail {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vosyn-apply-card {
    background: var(--va-ink-800);
    border: 1px solid var(--va-hair);
    border-radius: 12px;
    padding: 16px 18px;
}

.vosyn-apply-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vosyn-muted);
    margin: 0 0 6px;
}

.vosyn-apply-role { font-size: 1.15em; font-weight: 700; margin: 0 0 10px; }
.vosyn-apply-hint { color: var(--vosyn-muted); font-size: 0.9em; margin: 0; }

.vosyn-apply-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 0.88em; }
.vosyn-apply-facts dt { color: var(--vosyn-muted); font-weight: 600; }
.vosyn-apply-facts dd { margin: 0; }

.vosyn-apply-meter { display: flex; gap: 4px; }
.vosyn-apply-meter-seg {
    flex: 1; height: 8px; border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 240ms ease;
}
.vosyn-apply-meter-seg.is-done:nth-child(1) { background: var(--va-focus); }
.vosyn-apply-meter-seg.is-done:nth-child(2) { background: #646CD1; }
.vosyn-apply-meter-seg.is-done:nth-child(3) { background: #9A4BCE; }
.vosyn-apply-meter-seg.is-done:nth-child(4) { background: #C029C6; }
.vosyn-apply-meter-label { margin: 8px 0 0; font-size: 0.85em; color: var(--vosyn-muted); }

.vosyn-apply-need { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }
.vosyn-apply-need li { padding: 4px 0 4px 22px; position: relative; }
.vosyn-apply-need li::before { content: "○"; position: absolute; left: 2px; color: var(--vosyn-muted); }
.vosyn-apply-need li.ok::before { content: "✓"; color: var(--va-success); }
.vosyn-apply-need li span { color: var(--vosyn-muted); margin-left: 6px; font-size: 0.9em; }

.vosyn-apply-guidance p { margin: 0; font-size: 0.9em; line-height: 1.5; }

/* ---------- form column ---------- */
.vosyn-apply-title { font-size: 28px; line-height: 34px; font-weight: 600; margin: 0 0 4px; }
.vosyn-apply-intro { color: var(--vosyn-muted); margin: 0 0 18px; }

/* Page-level status banner above the form (abuse audit design pass, 12 Aug).
   The per-IP rate-limit refusal is four sentences, and the shared .vosyn-notice
   box was drawn for one: 3px of top padding against a 20px orphan margin under
   the paragraph, and a measure the full 1200px content width (about 112
   characters a line). This variant is the long-copy box. It mirrors
   .vosyn-apply-wrap exactly — same max-width, same auto margins — so the
   banner's edges line up with the rail and the form beneath it at every width
   instead of overhanging them, and the paragraph is capped at 68ch so the
   refusal reads as four lines rather than three ruler-length ones.
   Colours are literal, NOT var(--va-danger): the --va-* scale is declared on
   .vosyn-apply-wrap and this banner is its SIBLING, so the token is out of
   scope here and the declaration would drop at computed-value time (the trap
   that once painted an inline field error near-white). Background and text
   colour are declared together, per the terms-panel ruling, and the descendant
   colours are set explicitly rather than left to inherit past the theme.
   Measured on the rendered refusal: body 13.2 on the tinted end / 14.8 on the
   plain end, lead 5.0. */
.vosyn-notice.vosyn-apply-status {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 1180px;
    margin: 0 auto 22px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 107, 122, 0.42);
    border-left: 4px solid #ff6b7a;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(255, 107, 122, 0.11), rgba(255, 107, 122, 0.03) 62%, rgba(255, 107, 122, 0.02)),
        #161f44;
    color: #f7f9ff;
}

/* Decorative: the sentence states the outcome, so the glyph is a background
   image and never reaches the accessibility tree as an unlabelled node. */
.vosyn-notice.vosyn-apply-status::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.4v5.4'/%3E%3Cpath d='M12 16.3h.01'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

.vosyn-notice.vosyn-apply-status p {
    margin: 0;
    max-width: 68ch;
    color: #f7f9ff;
    font-size: 16px;
    line-height: 1.62;
}

.vosyn-notice.vosyn-apply-status p strong { color: #ff6b7a; font-weight: 700; }

.vosyn-notice.vosyn-apply-status.vosyn-ok {
    border-color: rgba(47, 220, 160, 0.42);
    border-left-color: #2fdca0;
    background:
        linear-gradient(90deg, rgba(47, 220, 160, 0.10), rgba(47, 220, 160, 0.03) 62%, rgba(47, 220, 160, 0.02)),
        #161f44;
}

.vosyn-notice.vosyn-apply-status.vosyn-ok::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232fdca0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='8.2 12.3 11 15 15.8 9.4'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

/* The submitted banner carries the dashboard link — the one interactive thing
   in this component. Its RESTING paint is deliberately left to the child
   theme's `#main .post-content a:not(...)` rule (orchid #e57ddc, 5.2:1 on this
   banner): that is the link picture on every candidate page, and one link that
   disagreed with all of them would be the odd thing here, not the polished one.
   Focus is ours, because nothing else draws a ring on it. */
.vosyn-notice.vosyn-apply-status a:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Tracks .vosyn-apply-wrap's own collapse at 1199. Below 480 the decorative
   glyph costs the paragraph 36px of a 315px column, which is a line of text on
   a phone, so it stands down and the accent bar carries the signal alone. */
@media (max-width: 1199px) {
    .vosyn-notice.vosyn-apply-status { max-width: 720px; }
}
@media (max-width: 479px) {
    .vosyn-notice.vosyn-apply-status { gap: 0; padding: 16px; border-radius: 10px; }
    .vosyn-notice.vosyn-apply-status::before { display: none; }
}

/* Painted only when it actually holds errors. This used to key off
   :not(:empty), which drew an empty red bar the moment the markup contained
   so much as a newline (G.P-1.1 follow-up). */
.vosyn-apply-errors { display: none; }
.vosyn-apply-errors.is-active {
    display: block;
    border: 1px solid var(--va-danger);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 16px;
    color: var(--va-danger);
    font-weight: 600;
}
.vosyn-apply-errors.is-active:focus { outline: 2px solid var(--va-danger); outline-offset: 2px; }

/* G.P-1.1 error summary: every bad field named and linked. */
.vosyn-apply-errors-lead { margin: 0 0 8px; font-weight: 600; }
.vosyn-apply-errors-lead strong { font-weight: 700; }
.vosyn-apply-errors-list {
    margin: 0; padding-left: 18px;
    font-weight: 400; line-height: 1.55;
}
.vosyn-apply-errors-list li { margin: 4px 0; }
/* The child theme excludes .vosyn-err-link from its own link colour so these
   stay red; see Avada-Child-Theme/style.css :not() list. */
.vosyn-apply-errors-list a.vosyn-err-link,
.vosyn-apply-errors-list a.vosyn-err-link:hover,
.vosyn-apply-errors-list a.vosyn-err-link:focus {
    color: var(--va-danger);
    font-weight: 600;
    text-decoration: underline;
}

/* G.P-1.1 inline, per-field error under the offending input. */
.vosyn-field-error {
    display: block;
    margin-top: 6px;
    color: var(--va-danger);
    font-size: 0.86em;
    line-height: 1.45;
    font-weight: 500;
}
.vosyn-field-error[hidden] { display: none; }

.vosyn-apply-form input.has-error,
.vosyn-apply-form select.has-error,
.vosyn-apply-form textarea.has-error {
    border-color: var(--va-danger);
    box-shadow: 0 0 0 1px var(--va-danger);
}
.vosyn-apply-form input.has-error:focus,
.vosyn-apply-form select.has-error:focus,
.vosyn-apply-form textarea.has-error:focus {
    outline: 2px solid var(--va-danger);
    outline-offset: 1px;
}
/* QA 31 Jul: clicking "Permanent email" in the error summary "redirects me to
   the where-you-live section". The anchor is right — the LANDING is wrong. A
   fragment jump parks the target flush with the top of the viewport, where
   the site's sticky header sits on top of it, so the first thing actually
   visible below the header is the NEXT block. Reserving header height turns a
   jump that looked broken into one that lands on the field it named. The
   label is included so the field arrives with its own caption, not headless.
   (Same root cause as the console's Kick-Off Edit/Review anchors.) */
.vosyn-apply-form input,
.vosyn-apply-form select,
.vosyn-apply-form textarea,
.vosyn-apply-form label,
.vosyn-apply-section { scroll-margin-top: 110px; }

.vosyn-apply-section {
    border: 0; padding: 0; margin: 0 0 32px; min-width: 0;
}
.vosyn-apply-section legend {
    font-size: 15px; line-height: 20px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0; margin-bottom: 14px; color: var(--vosyn-ink);
    border-bottom: 1px solid rgba(90, 101, 145, 0.45); width: 100%; padding-bottom: 8px;
}

.vosyn-apply-row { display: flex; gap: 20px; }
.vosyn-apply-row > * { margin: 0; }
.vosyn-col-3 { flex: 3 1 0; min-width: 0; }
.vosyn-col-4 { flex: 4 1 0; min-width: 0; }
.vosyn-col-6 { flex: 6 1 0; min-width: 0; }
.vosyn-apply-form p { margin: 0 0 24px; }
.vosyn-apply-row { margin: 0 0 24px; }
.vosyn-apply-row p { margin: 0; }

.vosyn-apply-form label {
    display: block; font-size: 13px; line-height: 18px; font-weight: 600; margin-bottom: 6px;
}
.vosyn-apply-hint-inline { color: var(--vosyn-muted); font-weight: 400; }
.vosyn-apply-opt { color: var(--vosyn-muted); font-weight: 600; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; }

/* Inputs — BUG-CB-APPLY-02: fill + visible border (3.44:1). Specificity
   deliberately beats the child theme's generic .vosyn-application rules. */
.vosyn-apply-wrap .vosyn-application input:not([type="checkbox"]):not([type="file"]),
.vosyn-apply-wrap .vosyn-application select,
.vosyn-apply-wrap .vosyn-application textarea {
    width: 100%; max-width: none;
    height: 48px; border-radius: 10px; padding: 0 14px;
    background: var(--va-ink-700) !important;
    border: 1px solid var(--va-hair) !important;
    color: var(--vosyn-ink);
    font-size: 15px; box-sizing: border-box;
}
.vosyn-apply-wrap .vosyn-application textarea { height: auto; padding: 12px 14px; line-height: 22px; }
.vosyn-apply-wrap .vosyn-application input:hover,
.vosyn-apply-wrap .vosyn-application select:hover,
.vosyn-apply-wrap .vosyn-application textarea:hover { border-color: var(--va-hair-hover) !important; }
.vosyn-apply-wrap .vosyn-application input:focus,
.vosyn-apply-wrap .vosyn-application select:focus,
.vosyn-apply-wrap .vosyn-application textarea:focus {
    border-color: var(--va-focus) !important;
    box-shadow: 0 0 0 3px rgba(104, 192, 240, 0.3);
    outline: 2px solid transparent;
}
.vosyn-apply-wrap .vosyn-application input:invalid:not(:placeholder-shown):not(:focus) { border-color: var(--va-danger) !important; }

.vosyn-apply-country-search { margin-bottom: 8px !important; }

/* Password */
.vosyn-apply-pw-wrap { position: relative; display: block; }
/* Show/hide control, added to every password box by vosyn-password-reveal.js.
   The wrapper is created by the script when a field does not already sit in
   one, so this styling covers registration and apply identically. */
.vosyn-pw-wrap { position: relative; display: block; }
.vosyn-pw-wrap > input[type="password"],
.vosyn-pw-wrap > input[type="text"] { padding-right: 46px; }
.vosyn-pw-eye {
    position: absolute; right: 4px; top: 2px;
    width: 44px; height: 44px; border: 0; background: transparent;
    color: var(--vosyn-muted); cursor: pointer; font-size: 18px; border-radius: 8px;
    line-height: 1; padding: 0;
}
.vosyn-pw-eye:hover { color: var(--vosyn-accent); }
.vosyn-pw-eye.is-shown { color: var(--vosyn-accent); }
.vosyn-pw-eye:focus-visible { outline: 3px solid var(--va-focus); }
.vosyn-apply-pw-checks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--vosyn-muted); }
.vosyn-apply-pw-checks span::before { content: "○ "; }
.vosyn-apply-pw-checks span.ok { color: var(--va-success); }
.vosyn-apply-pw-checks span.ok::before { content: "✓ "; }

/* Dropzones — CEO-47: the whole card is the target. */
.vosyn-apply-dzrow { align-items: stretch; }
.vosyn-dz {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    min-height: 132px; border-radius: 12px; padding: 16px;
    border: 1px dashed var(--va-hair);
    background: var(--va-ink-800);
    cursor: pointer; text-align: center;
    transition: border-color 120ms ease, background 120ms ease;
}
.vosyn-dz:hover, .vosyn-dz.is-drag { border-color: var(--va-focus); background: rgba(104, 192, 240, 0.06); }
.vosyn-dz:focus-within { outline: 3px solid var(--va-focus); outline-offset: 2px; }
.vosyn-dz.is-filled { border-style: solid; border-color: var(--va-success); }
.vosyn-dz.is-error { border-style: solid; border-color: var(--va-danger); }
.vosyn-dz-title { font-weight: 700; }
.vosyn-dz-hint { color: var(--vosyn-muted); font-size: 12px; line-height: 16px; }
.vosyn-dz input[type="file"] {
    width: 1px; height: 1px; opacity: 0.01; position: absolute; /* label = the 132px click target; still focusable/functional */
}
.vosyn-dz-file { font-size: 12px; min-height: 16px; }
.vosyn-dz.is-error .vosyn-dz-file { color: var(--va-danger); }
.vosyn-dz.is-filled .vosyn-dz-file { color: var(--va-success); }

.vosyn-apply-locked strong { font-size: 1.05em; }

/* Submit — CEO-48 / BUG-03: 56px, full width, brand gradient, honest states. */
.vosyn-apply-actions { margin-top: 8px; }
.vosyn-apply-wrap .vosyn-application .vosyn-apply-submit {
    width: 100%; height: 56px; border-radius: 12px; border: 0;
    background: var(--vt-cta-grad, linear-gradient(90deg, #C029C6, #646CD1)) !important;
    color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.vosyn-apply-wrap .vosyn-application .vosyn-apply-submit:hover { filter: brightness(1.08); }
.vosyn-apply-wrap .vosyn-application .vosyn-apply-submit:focus-visible { outline: 3px solid var(--va-focus); outline-offset: 2px; }
.vosyn-apply-wrap .vosyn-application .vosyn-apply-submit:disabled { opacity: 0.75; cursor: progress; }

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
    .vosyn-apply-wrap { grid-template-columns: 1fr; max-width: 720px; }
    .vosyn-apply-rail { position: static; }
}
@media (max-width: 767px) {
    .vosyn-apply-row { flex-direction: column; gap: 0; }
    .vosyn-apply-row p { margin: 0 0 24px; }
    .vosyn-apply-dzrow .vosyn-dz { margin: 0 0 14px; }
    .vosyn-apply-actions {
        position: sticky; bottom: 0; z-index: 5;
        margin: 0 -10px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
        background: rgba(4, 11, 36, 0.92); backdrop-filter: blur(6px);
    }
    .vosyn-apply-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .vosyn-apply-meter-seg, .vosyn-dz { transition: none; }
}

/* Finding #3: inline field guidance under the email input */
.vosyn-apply-fieldnote { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; color: var(--vosyn-muted); }

/* ==========================================================================
   CEO-16 — mobile QA: comfortable touch targets on phones (WCAG 2.5.5, and
   the project's own 44px standard from the apply-form work order). Overflow
   was already clean at 320-375px; these fix under-sized tap targets found in
   the mobile audit. Phones only - desktop (mouse) is untouched.
   ========================================================================== */
@media (max-width: 767px) {
    /* Board hero search: the location/dept filter select collapsed to ~17px
       once the search stacks - give the field and its select a real height. */
    .vosyn-hero-search .vosyn-hs-field {
        min-height: 48px;
    }
    .vosyn-hero-search .vosyn-hs-field select {
        height: auto;
        min-height: 48px;
        padding: 0.6em 0;
    }

    /* Primary CTAs to a 44px comfortable tap height, text centred. */
    .vosyn-btn,
    .vosyn-btn-lg,
    .vosyn-careers-search button,
    .vosyn-hero-search button,
    .vosyn-application button[type="submit"],
    .vosyn-questionnaire button[type="submit"],
    .vosyn-sjt button[type="submit"],
    .vosyn-nsf button[type="submit"],
    .vosyn-dashboard button[type="submit"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* The candidate dashboard's signed-contract upload is a RAW file input
       (native, ~21px) - pad it to a tappable height. Apply-form dropzones are
       label-based and already 132px, so they are not touched here. */
    .vosyn-dashboard input[type="file"] {
        min-height: 44px;
        padding: 0.6em 0.5em;
        border: 1px solid var(--vosyn-border);
        border-radius: 6px;
        background: var(--vt-canvas, #fff);
    }
}

/* ==========================================================================
   CB-LANDING-01 (Parts 1-3) — careers landing hero + department restructure.
   Hero = image slider (slides HR-managed via Fusion Slider group
   "careers-hero"); scrim keeps overlay text legible over any photo
   (CB-L-15); View Openings smooth-scrolls to #vosyn-openings with a
   sticky-header offset; departments get the bold section heading and
   prominent, high-contrast names.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; } /* CB-L-11 */
}

#vosyn-openings { scroll-margin-top: 120px; } /* land on the heading, not under the sticky header */

.vosyn-hero-slider {
    position: relative;
    min-height: 420px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* placeholder base: brand navy gradient — honest, no invented imagery */
    background: linear-gradient(135deg, var(--vt-canvas, #030b26) 0%, var(--vt-elevated, #161f44) 55%, #1b2542 100%);
}

.vosyn-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 900ms ease;
}

.vosyn-slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .vosyn-slide { transition: none; }
}

/* CB-L-15 scrim: guarantees overlay legibility over ANY slide photo.
   Design pass 07-18: the flat wash lost to bright mid-frame content (the
   TV screens sit exactly behind the headline), so the scrim is now a
   vertical gradient that is strongest across the text band while letting
   the photo's edges keep their life. Title/sub also carry a soft shadow. */
.vosyn-hero-slider:not(.is-placeholder)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(3, 11, 38, 0.42) 0%,
        rgba(3, 11, 38, 0.68) 36%,
        rgba(3, 11, 38, 0.68) 64%,
        rgba(3, 11, 38, 0.48) 100%
    );
}

.vosyn-slide-overlay {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3.5rem 1.5rem;
    max-width: 820px;
}

.vosyn-hero-title {
    font-size: clamp(2.1rem, 5vw, 3.1rem);
    color: #fff;
    margin: 0 0 0.35em;
    line-height: 1.15;
    text-shadow: 0 2px 22px rgba(3, 11, 38, 0.65), 0 1px 3px rgba(3, 11, 38, 0.5);
}

.vosyn-hero-sub {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    color: var(--vt-off-white, #f4f2f8);
    margin: 0 0 1.4em;
    text-shadow: 0 1px 14px rgba(3, 11, 38, 0.6);
}

/* CB-L-08: intro band below the hero (copy verbatim, styles carried over) */
.vosyn-welcome { margin: 2.5rem auto 3rem; }

/* CB-L-14: unmistakable section header */
.vosyn-dept-heading {
    text-align: center;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 800;
    margin: 0 0 1em;
}

/* CB-L-16 + CEO complaint "what am I looking at?": names read instantly.
   Featured-box treatment: elevated card, bigger, name prominent. */
.vosyn-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
}

.vosyn-cat-card {
    padding: 1.6em 1em 1.4em;
    border-radius: 14px;
}

.vosyn-cat-card .vosyn-icon { width: 2.1em; height: 2.1em; }

.vosyn-cat-name {
    font-size: 1.05em;
    font-weight: 800;
    color: var(--vt-white, #ffffff);
    letter-spacing: 0.01em;
}

@media (max-width: 640px) {
    .vosyn-hero-slider { min-height: 340px; border-radius: 12px; }
    .vosyn-slide-overlay { padding: 2.5rem 1rem; }
    #vosyn-openings { scroll-margin-top: 84px; }
    .vosyn-cat-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .vosyn-cat-name { font-size: 1em; }
}

/* CEO 07-18: the next-step panel now lives in the dashboard grid (the slot
   Documents & events occupies for hired candidates). */
.vosyn-dash-grid .vosyn-dash-callout { margin: 0; }

/* CB-L-18: board filter scaffold - segmented chips under the departments. */
.vosyn-board-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 1.1em 0 0.4em;
}

.vosyn-board-filter {
    border: 1px solid var(--vosyn-border);
    background: var(--vosyn-surface);
    color: var(--vosyn-ink);
    border-radius: 999px;
    padding: 0.8em 2em;
    font-weight: 700;
    font-size: 1.08em;
    cursor: pointer;
    min-height: 48px;
}

.vosyn-board-filter.is-active {
    background: var(--vt-cta-grad, var(--vosyn-accent));
    border-color: transparent;
    color: #fff;
}

.vosyn-board-filter:focus-visible {
    outline: 2px solid var(--vosyn-accent);
    outline-offset: 2px;
}

/* CB-L-18 UX fix: centered filter row with a live, narrating status line. */
.vosyn-board-filters {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1.4em 0 0.6em;
}

.vosyn-board-filter-status {
    display: block;
    flex-basis: 100%;
    color: var(--vosyn-muted);
    font-size: 0.95em;
    margin-top: 0.55em;
}

.vosyn-board-filter-status.is-pulse {
    animation: vosyn-status-pulse 600ms ease;
}

@keyframes vosyn-status-pulse {
    0% { opacity: 0.25; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .vosyn-board-filter-status.is-pulse { animation: none; }
}

/* ==========================================================================
   Operator mockup 07-19 - departments as image cards + NovaForge band.
   ========================================================================== */
.vosyn-dept-head { text-align: center; margin-bottom: 1.2rem; }
/* Operator mockup 07-19 rev B: pink/orchid is OUT of this section — labels
   sampled from the mockup's indigo-periwinkle. */
.vosyn-dept-head .vosyn-eyebrow { color: #8a93f8; }
.vosyn-dept-sub { color: var(--vosyn-muted); margin: 0.3em 0 0; font-size: 1.02rem; }

.vosyn-dept-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a93f8;
    margin: 1.6rem 0 0.7rem;
}

.vosyn-cat-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.vosyn-cat-grid-wide { grid-template-columns: 1fr; }

.vosyn-cat-card {
    position: relative;
    min-height: 215px;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    padding: 1rem 1.1rem;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.vosyn-cat-card.is-wide { min-height: 150px; }

/* photo cards: scrim guarantees label legibility over any image */
.vosyn-cat-card.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    /* P1-47 (2026-07-31): the old 12%-opacity top zone left card titles
       sitting almost directly on busy photos (C6 screenshot 22). A solid
       floor under the whole card keeps every word legible on any image. */
    background: linear-gradient(180deg, rgba(3, 11, 38, 0.55) 0%, rgba(3, 11, 38, 0.9) 100%);
}
.vosyn-cat-card.has-image .vosyn-cat-name { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); }

/* Fallback icon (only shown when a card has no photo yet): neutral off-white,
   never the orchid/pink tone — mockup rev B removed pink from this section.
   The !important out-guns the child theme's `.vosyn-cat-card .vosyn-icon`
   orchid rule without touching surfaces outside the cards. */
.vosyn-cat-card .vosyn-icon {
    position: absolute;
    top: 1rem;
    left: 1.1rem;
    color: rgba(247, 249, 255, 0.82) !important;
}

/* Card accent states: periwinkle from the mockup, not the global magenta
   accent the child theme maps --vosyn-accent to. */
.vosyn-cat-card:hover,
.vosyn-cat-card:focus { border-color: #5f6fd8; }
.vosyn-cat-card.is-active {
    border-color: #5f6fd8;
    box-shadow: 0 0 0 1px #5f6fd8;
}
/* min-width:0 defeats the grid item's `auto` minimum; the wrap rules let a
   long single word ("Communications") break rather than be silently cut off
   by the card's overflow:hidden. Belt-and-braces so no department name can
   clip at any width, whatever names get added later. */
.vosyn-cat-body {
    position: relative;
    z-index: 1;
    display: block;
    /* The card is a flex column with align-items:flex-start, so this item
       shrink-wraps to its longest word and can exceed the card. Stretching it
       to the content box is what gives overflow-wrap something to break
       against — without it the wrap rules below are inert. */
    align-self: stretch;
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}
.vosyn-cat-card .vosyn-cat-name { display: block; font-size: 1.02em; color: #fff; }
.vosyn-cat-card .vosyn-cat-count { display: block; margin-top: 0.25em; }

.vosyn-cat-arrow {
    position: absolute;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    color: #fff;
    font-size: 0.95em;
    transition: background 120ms ease;
}

.vosyn-cat-card:hover .vosyn-cat-arrow,
.vosyn-cat-card.is-active .vosyn-cat-arrow { background: #5f6fd8; border-color: transparent; }

/* Operator 8 Aug: the 2-up grid squeezed department names into ~121px text
   columns wrapping past 3 lines at 375px. Phones get full-width banner rows
   instead — every name fits on one or two comfortable lines, and the photo
   cards read as banners. Covers the smallest phones too (a 320px viewport
   still leaves a ~210px text column), so no tiny-font special case. */
@media (max-width: 640px) {
    .vosyn-cat-grid { grid-template-columns: 1fr; }
    .vosyn-cat-card { min-height: 112px; padding: 0.9rem 1rem; }
    .vosyn-cat-card.is-wide { min-height: 112px; }
    /* The arrow keeps the bottom-right corner; a right-hand reserve keeps
       names clear of it while they wrap against the full card width. */
    .vosyn-cat-body { padding-bottom: 0; padding-right: 3.4rem; }
    /* Needs the .vosyn-cat-card prefix: the plain `.vosyn-cat-name` mobile
       rule above loses to this block's two-class selector. */
    .vosyn-cat-card .vosyn-cat-name { font-size: 1em; }
    .vosyn-cat-card .vosyn-icon { top: 0.8rem; left: 0.9rem; }
    .vosyn-cat-arrow { right: 0.8rem; bottom: 0.8rem; }
}

/* G.EM-6: post-hire document request buttons (one click per document). */
.vosyn-dash-docreq { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin-top: 8px; }
.vosyn-dash-docreq-btn { display: inline-block; margin: 0; }
.vosyn-dash-docreq-other { flex-basis: 100%; margin-top: 6px; }
.vosyn-dash-docreq-other summary { cursor: pointer; color: var(--vosyn-muted); }
.vosyn-dash-docreq-other textarea { width: 100%; max-width: 480px; }

/* G.CLOSE-1: letter download action never wraps mid-phrase. */
.vosyn-dash-app-meta a { white-space: nowrap; }

/* G.SIGN-1: the type-to-sign field renders white-on-white without this. */
.vosyn-dash-esign input[type="text"] {
    color: #1b2033 !important;   /* Avada input color override */
    background: #ffffff !important;
    caret-color: #1b2033;
}
.vosyn-dash-esign input[type="text"]::placeholder { color: #8a90a4; opacity: 1; }

/* G.BOARD-1: department accordions - the board browses collapsed. */
.vosyn-dept-acc { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; margin: 0 0 14px; background: var(--vosyn-elevated, #161f44); overflow: hidden; }
.vosyn-dept-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 18px 22px; transition: background .15s ease; }
.vosyn-dept-acc-head::-webkit-details-marker { display: none; }
.vosyn-dept-acc-head:hover { background: rgba(255,255,255,.04); }
.vosyn-dept-acc-head h3 { margin: 0; border: 0; padding: 0; font-size: 1.25rem; }
.vosyn-dept-acc-chevron { color: var(--vosyn-magenta, #d326c5); font-size: 1.1rem; transition: transform .18s ease; flex: 0 0 auto; }
.vosyn-dept-acc[open] > .vosyn-dept-acc-head { border-bottom: 1px solid rgba(255,255,255,.08); }
.vosyn-dept-acc[open] > .vosyn-dept-acc-head .vosyn-dept-acc-chevron { transform: rotate(180deg); }
.vosyn-dept-acc .vosyn-job-list { padding: 10px 14px 14px; margin: 0; }

/* ==========================================================================
   DASH-V3 — candidate dashboard redesign (2026-07-24)
   A labelled, icon'd pipeline stepper + hero next-step card + summary/help.
   Tailored to the real 10-stage funnel. Uses the Vosyn --vt-* dark tokens
   (child theme) with dark fallbacks so it holds up even if a token is absent.
   ========================================================================== */

.vosyn-dash {
    --d-canvas: var(--vt-canvas, #030b26);
    --d-elev: var(--vt-elevated, #161f44);
    --d-elev2: var(--vt-surface-2, #1f294a);
    --d-border: var(--vt-border, rgba(156,163,175,.22));
    --d-text: var(--vt-off-white, #f7f9ff);
    --d-muted: var(--vt-muted, #9ca3af);
    --d-green: var(--vt-green, #00d084);
    --d-grad: var(--vt-cta-grad, linear-gradient(90deg,#D400CC 0%,#8E3DD6 55%,#5F6FD8 100%));
    --d-magenta: var(--vt-magenta, #d326c5);
    --d-orchid: var(--vt-orchid, #e57ddc);
}

/* ---- shared card polish ---- */
.vosyn-dash .vosyn-dash-card {
    background: var(--d-elev);
    border: 1px solid var(--d-border);
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 8px 28px rgba(3, 11, 38, .32);
    /* Own the text colour rather than inheriting --vosyn-ink: any child that
       does not set its own colour (GDS event line, settings labels, contract
       panel copy) must stay readable on the dark card, whatever the theme
       cascade does above us. */
    color: var(--d-text);
}
.vosyn-dash .vosyn-dash-card h3,
.vosyn-dash .vosyn-dash-card h4,
.vosyn-dash .vosyn-dash-card label,
.vosyn-dash .vosyn-dash-card strong,
.vosyn-dash .vosyn-dash-card p,
.vosyn-dash .vosyn-dash-card li,
.vosyn-dash .vosyn-dash-card dt,
.vosyn-dash .vosyn-dash-card dd,
.vosyn-dash .vosyn-dash-card summary { color: inherit; }
.vosyn-dash .vosyn-dash-card h3 { border-bottom: 0; }
.vosyn-dash .vosyn-dash-card .vosyn-dash-muted,
.vosyn-dash .vosyn-dash-card .vosyn-dash-waiting,
.vosyn-dash .vosyn-dash-card .vosyn-dash-app-meta { color: var(--d-muted); }
/* Text inputs keep the light field treatment; make sure their own text is
   dark. LITERAL, not var(--vosyn-ink): the token is near-white under the dark
   retheme, so this rule was stating "make it dark" while emitting near-white
   on a white field — readable today only because the dashboard element happens
   to carry BOTH .vosyn-dashboard and .vosyn-dash, letting the stronger shared
   rule supply the ink. That is a coincidence of markup, not a guarantee.
   (Textarea and select are re-darkened wholesale — field AND ink together —
   by the child theme, which loads later.) */
.vosyn-dash .vosyn-dash-card input,
.vosyn-dash .vosyn-dash-card textarea,
.vosyn-dash .vosyn-dash-card select { color: #16233b; }
.vosyn-dash .vosyn-dash-cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.vosyn-dash .vosyn-dash-cardhead h3 {
    margin: 0;
    border: 0;
    padding: 0;
    font-size: 1.18rem;
    color: var(--d-text);
}

/* ---- hero ---- */
.vosyn-dash-hero {
    background: linear-gradient(135deg, var(--d-canvas) 0%, var(--d-elev) 62%, #1b2542 100%);
    border: 1px solid var(--d-border);
    border-radius: 18px;
    padding: 28px 30px;
    margin-bottom: 1.4rem;
    box-shadow: 0 10px 34px rgba(3, 11, 38, .40);
}
.vosyn-dash-hero-id {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.vosyn-dash-hero .vosyn-dash-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 3px solid transparent;
    background: var(--d-grad) border-box;
    box-shadow: 0 0 0 3px rgba(3, 11, 38, .55);
}
.vosyn-dash-hero .vosyn-dash-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1em;
    font-weight: 800;
    color: #fff;
    background: var(--d-grad);
    border: 0;
}
.vosyn-dash-identity { flex: 1 1 16em; min-width: 0; }
.vosyn-dash-identity .vosyn-dash-name {
    margin: 0 0 .12em;
    font-size: 1.85em;
    line-height: 1.1;
    color: var(--d-text);
}
.vosyn-dash-identity .vosyn-dash-role {
    margin: 0 0 .35em;
    font-weight: 600;
    color: var(--d-orchid);
}
.vosyn-dash-identity .vosyn-dash-contact {
    margin: 0;
    color: var(--d-muted);
    font-size: .93em;
    display: flex;
    align-items: center;
    gap: 7px;
}
.vosyn-dash-identity .vosyn-dash-contact svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* QA 4 Aug: "the first section of My Dashboard scrolls sideways on mobile".
   This is the cause. The contact line is a flex row holding an icon and the
   candidate's email as a bare text node; that text node becomes an anonymous
   flex item whose default `min-width:auto` refuses to shrink below its own
   min-content width. An email is one unbreakable token, so at 375px a long
   address pushed the hero wider than the viewport and took the whole page
   with it. min-width:0 lets it shrink, overflow-wrap lets it actually break.
   Names get the same treatment — a long surname is the same shape of bug. */
.vosyn-dash-identity .vosyn-dash-contact { min-width: 0; overflow-wrap: anywhere; }
.vosyn-dash-identity .vosyn-dash-name,
.vosyn-dash-identity .vosyn-dash-role { overflow-wrap: anywhere; }
/* Belt and braces: whatever else lands in the hero later, it cannot make the
   PAGE scroll sideways. clip (not hidden) so no scroll container is created
   and the stepper's own overflow-x:auto keeps working inside it. */
.vosyn-dash-hero { overflow-x: clip; }
.vosyn-dash-encourage {
    margin: .7em 0 0;
    color: var(--d-green);
    font-weight: 600;
    font-size: .96em;
}

/* ---- stepper ---- */
.vosyn-dash-stepper-wrap { margin-top: 26px; }
.vosyn-dash-stepcap {
    margin: 0 0 14px;
    color: var(--d-muted);
    font-size: .9em;
    letter-spacing: .01em;
}
.vosyn-dash-stepcap strong { color: var(--d-text); }
.vosyn-dash-stepper {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 4px 0 2px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.vosyn-dash-stepper li {
    flex: 1 1 0;
    min-width: 76px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 2px;
}
/* connector line entering each node from the previous one */
.vosyn-dash-stepper li::before {
    content: "";
    position: absolute;
    top: 19px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--d-border);
    z-index: 0;
}
.vosyn-dash-stepper li:first-child::before { display: none; }
.vosyn-dash-stepper li.is-done::before,
.vosyn-dash-stepper li.is-current::before { background: var(--d-green); }

.vosyn-step-node {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .04);
    border: 1.5px solid var(--d-border);
    color: var(--d-muted);
    transition: transform .15s ease;
}
.vosyn-step-node svg { width: 20px; height: 20px; }
.vosyn-dash-stepper li.is-done .vosyn-step-node {
    background: var(--d-green);
    border-color: transparent;
    color: #04121f;
}
.vosyn-dash-stepper li.is-current .vosyn-step-node {
    background: var(--d-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(211, 38, 197, .18);
    animation: vosyn-step-pulse 2.4s ease-in-out infinite;
}
@keyframes vosyn-step-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(211, 38, 197, .16); }
    50% { box-shadow: 0 0 0 7px rgba(211, 38, 197, .05); }
}
.vosyn-step-label {
    margin-top: 9px;
    font-size: .74rem;
    line-height: 1.25;
    color: var(--d-muted);
    max-width: 92px;
}
.vosyn-dash-stepper li.is-done .vosyn-step-label,
.vosyn-dash-stepper li.is-current .vosyn-step-label { color: var(--d-text); font-weight: 600; }
.vosyn-step-mini {
    margin-top: 3px;
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--d-muted);
    opacity: .8;
}
.vosyn-dash-stepper li.is-done .vosyn-step-mini { color: var(--d-green); opacity: 1; }
.vosyn-dash-stepper li.is-current .vosyn-step-mini { color: var(--d-orchid); opacity: 1; }
.vosyn-dash-guide {
    margin: 16px 0 0;
    color: var(--d-muted);
    font-size: .86em;
    text-align: center;
}
.vosyn-dash-hero.is-terminal .vosyn-step-node,
.vosyn-dash-hero.is-terminal .vosyn-step-label { opacity: .6; }

/* ---- two independent columns ----
   Issue 1: stacked 2-column GRIDS forced the short card in each pair to
   leave dead space until the next row began. Columns that flow on their
   own have no shared row height, so nothing is left hanging. */
.vosyn-dash .vosyn-dash-cols {
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    gap: 1.3rem;
    align-items: start;
    margin-bottom: 1.3rem;
}
.vosyn-dash .vosyn-dash-col {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    min-width: 0;
}
/* Legacy grid kept for any other screen still using it. */
.vosyn-dash .vosyn-dash-grid {
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    gap: 1.3rem;
    margin-bottom: 1.3rem;
    align-items: start;
}
.vosyn-dash .vosyn-dash-grid-2 { grid-template-columns: 1fr 1fr; }

/* ---- next-step hero card ---- */
.vosyn-dash-next .vosyn-dash-next-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.vosyn-dash-next-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--d-grad);
    color: #fff;
    box-shadow: 0 6px 18px rgba(143, 61, 214, .35);
}
.vosyn-dash-next-icon svg { width: 27px; height: 27px; }
.vosyn-dash-next-heads { display: flex; flex-direction: column; }
.vosyn-dash-eyebrow {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--d-orchid);
    font-weight: 700;
}
.vosyn-dash-next-title {
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--d-text);
    line-height: 1.15;
    margin-top: 2px;
}
.vosyn-dash-next-desc { color: var(--d-muted); margin: 0 0 16px; line-height: 1.5; }
.vosyn-dash-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.vosyn-dash-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--d-border);
    color: var(--d-text);
    font-size: .8rem;
    font-weight: 500;
}
.vosyn-dash-startdate { color: var(--d-green); }
.vosyn-dash-reassure {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--d-muted);
    font-size: .84em;
}
.vosyn-dash-reassure svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--d-green); }
.vosyn-dash-next .vosyn-btn-lg { margin-top: 4px; }


/* ---- application summary ---- */
.vosyn-dash-summary dl { margin: 0; }
.vosyn-dash-sumrow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--d-border);
}
.vosyn-dash-sumrow:last-child { border-bottom: 0; }
.vosyn-dash-sumicon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(229, 125, 220, .12);
    color: var(--d-orchid);
}
.vosyn-dash-sumicon svg { width: 19px; height: 19px; }
.vosyn-dash-sumrow dt { flex: 1 1 auto; color: var(--d-muted); font-size: .92em; margin: 0; }
.vosyn-dash-sumrow dd { margin: 0; color: var(--d-text); font-weight: 600; text-align: right; }


/* ---- need help (legacy) ---- */
.vosyn-dash-help .vosyn-dash-muted { line-height: 1.55; margin: 0 0 16px; }
.vosyn-dash-help-link { margin: 14px 0 0; }
.vosyn-dash-help-link a { color: var(--d-orchid); font-weight: 600; text-decoration: none; }
.vosyn-dash-help-link a:hover { text-decoration: underline; }

/* ---- applications list ---- */
.vosyn-dash-apps ul { margin: 0; padding-left: 1.1em; }
.vosyn-dash-apps li { color: var(--d-text); margin: 6px 0; }
.vosyn-dash-apps .vosyn-dash-app-meta { color: var(--d-muted); }

/* ---- account settings: quiet disclosure ----
   Deliberately the calmest thing on the page. A candidate mid-hiring should
   not be invited to edit their legal name; they should be able to FIND the
   control when they need it. Muted row, no fill, opens on click. */
.vosyn-dash details.vosyn-dash-settings {
    padding: 0;
    background: transparent;
    border: 1px solid var(--d-border);
    box-shadow: none;
    margin-top: .4rem;
}
.vosyn-dash-settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    cursor: pointer;
    list-style: none;
    border-radius: 16px;
    transition: background .15s ease;
}
.vosyn-dash-settings-row::-webkit-details-marker { display: none; }
.vosyn-dash-settings-row:hover { background: rgba(255, 255, 255, .035); }
.vosyn-dash-settings-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .05);
    color: var(--d-muted);
}
.vosyn-dash-settings-ico svg { width: 17px; height: 17px; }
.vosyn-dash-settings-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.vosyn-dash-settings-txt strong { font-size: .98rem; font-weight: 600; color: var(--d-text); }
.vosyn-dash-settings-txt small { font-size: .82rem; color: var(--d-muted); margin-top: 1px; }
.vosyn-dash-settings-chev { flex: 0 0 auto; color: var(--d-muted); display: inline-flex; transition: transform .18s ease; }
.vosyn-dash-settings-chev svg { width: 18px; height: 18px; }
.vosyn-dash details.vosyn-dash-settings[open] > .vosyn-dash-settings-row {
    border-bottom: 1px solid var(--d-border);
    border-radius: 16px 16px 0 0;
}
.vosyn-dash details.vosyn-dash-settings[open] .vosyn-dash-settings-chev { transform: rotate(180deg); }
.vosyn-dash-settings-body { padding: 20px 22px 22px; }
.vosyn-dash-settings-body > form > p { margin: 0 0 14px; }
.vosyn-dash-settings-body label { font-size: .88rem; color: var(--d-muted); }
/* Nested "Close my account" — quieter still, and clearly separated. */
.vosyn-dash-settings-body .vosyn-close-account {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--d-border);
}
.vosyn-dash-settings-body .vosyn-close-account > summary {
    color: var(--d-muted);
    font-size: .88rem;
}

/* ---- ghost SUBMIT buttons ----
   Bug found during the DASH-V3 walkthrough: the theme paints every
   `.vosyn-dashboard button[type=submit]` with the CTA gradient using
   !important, which beat `.vosyn-btn-ghost`'s transparent background. Ghost
   buttons that happen to be submits (Request VOE / Request Offer Letter /
   Re-send verification / Close my account) came out as orchid text on a
   magenta gradient — unreadable. Restore the intended outline treatment. */
/* Extended 12 Aug: scoping this to `.vosyn-dash` left two ghost submits still
   gradient-filled, because they sit in `.vosyn-dash-settings-body` and the
   post-hire documents card, neither of which is `.vosyn-dash` itself —
   "Rejoin the waitlist" and "Request Consulting Engagement Letter" measured
   1.75-2.19:1, and the second is a hired intern's only way to ask for their
   letter. A ghost button is an outline button wherever it appears, so match
   it unscoped rather than adding a third copy of this rule. */
button.vosyn-btn.vosyn-btn-ghost,
button.vosyn-btn.vosyn-btn-ghost:hover,
button.vosyn-btn.vosyn-btn-ghost:focus,
.vosyn-dash button.vosyn-btn-ghost,
.vosyn-dash button.vosyn-btn-ghost:hover,
.vosyn-dash button.vosyn-btn-ghost:focus {
    background: transparent !important;
    /* Explicit, not left to the shorthand: the gradient arrives as
       background-image, and relying on `background` alone to reset it is one
       specificity tweak away from silently failing. */
    background-image: none !important;
    /* Fallbacks are load-bearing: --d-orchid is declared on .vosyn-dash, and
       these two buttons live outside it. Without the fallback the colour is
       invalid-at-computed-value-time and the text inherits the theme's
       near-black - the same trap that made the status pills and the contract
       headings unreadable. */
    border: 1px solid var(--d-orchid, #e57ddc) !important;
    color: var(--d-orchid, #e57ddc) !important;
    border-radius: 8px;
    cursor: pointer;
}
button.vosyn-btn.vosyn-btn-ghost:hover,
button.vosyn-btn.vosyn-btn-ghost:focus,
.vosyn-dash button.vosyn-btn-ghost:hover,
.vosyn-dash button.vosyn-btn-ghost:focus {
    background: rgba(229, 125, 220, .12) !important;
}

/* ---- responsive ---- */
@media (max-width: 860px) {
    .vosyn-dash .vosyn-dash-cols,
    .vosyn-dash .vosyn-dash-grid,
    .vosyn-dash .vosyn-dash-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .vosyn-dash-hero { padding: 22px 18px; }
    .vosyn-dash-hero .vosyn-dash-avatar,
    .vosyn-dash-hero .vosyn-dash-initials { width: 72px; height: 72px; }
    .vosyn-dash-identity .vosyn-dash-name { font-size: 1.5em; }
    .vosyn-dash-next-title { font-size: 1.24rem; }
    /* The stepper scrolls sideways on a phone. Fade the trailing edge so it
       reads as "there is more", and snap each step for a tidy swipe. */
    .vosyn-dash-stepper-wrap { position: relative; }
    .vosyn-dash-stepper {
        padding-bottom: 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    }
    .vosyn-dash-stepper li { min-width: 78px; scroll-snap-align: center; }
}


/* ---- required-field marker (operator 2026-07-24, Issue 1) ----
   Every mandatory field carries a visible asterisk, not just prose at the
   top of the form and a red outline after you fail. Optional fields keep
   their "Optional" chip, so the two states are never ambiguous. */
.vosyn-req {
    color: #ff6b81;
    font-weight: 700;
    margin-left: 2px;
    /* Screen readers get the requirement from the input's own `required`
       attribute; this glyph is purely visual reinforcement. */
    speak: never;
}
.vosyn-apply-opt {
    color: var(--vt-muted, #9ca3af);
    font-weight: 500;
    font-size: .82em;
    margin-left: 4px;
}

/* ==========================================================================
   QUIZ-V3 — written questionnaire as a one-question-at-a-time wizard
   (operator 2026-07-24, Issue 3). Same visual system as the dashboard.
   Deliberately ABSENT vs the reference mock: no countdown timer — this
   system has no time limit and the UI must not imply one. The draft chip
   DOES now report a real server-side autosave (drafts are filed against
   the candidate's account for both questionnaires and the 3rd Interview),
   and its wording is written by the script from what the last save
   actually did — never a fixed claim.
   ========================================================================== */

/* A display: rule beats the UA's [hidden] { display:none }, so every hidden
   control in this wizard (Previous on step 1, Submit before the review step,
   the draft chip) would render anyway. Re-assert it once, at the top. */
.vosyn-quiz [hidden] { display: none !important; }

.vosyn-quiz {
    --d-canvas: var(--vt-canvas, #030b26);
    --d-elev: var(--vt-elevated, #161f44);
    --d-border: var(--vt-border, rgba(156,163,175,.22));
    --d-text: var(--vt-off-white, #f7f9ff);
    --d-muted: var(--vt-muted, #9ca3af);
    --d-green: var(--vt-green, #00d084);
    --d-grad: var(--vt-cta-grad, linear-gradient(90deg,#D400CC 0%,#8E3DD6 55%,#5F6FD8 100%));
    --d-orchid: var(--vt-orchid, #e57ddc);
    color: var(--d-text);
    max-width: 1120px;
    margin: 0 auto;
}

/* ---- top bar ---- */
.vosyn-quiz-top > * { min-width: 0; }
.vosyn-quiz-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--d-border);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.vosyn-quiz-title { font-weight: 700; font-size: 1.05rem; }
.vosyn-quiz-progress {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 180px;
}
.vosyn-quiz-count { color: var(--d-muted); font-size: .86rem; }
.vosyn-quiz-count b { color: var(--d-text); }
/* Fixed-width segments forced the header wider than a phone screen and
   dragged the whole grid into horizontal overflow. They flex now, with a
   floor small enough for a long questionnaire on a 390px display. */
.vosyn-quiz-bars { display: flex; gap: 5px; width: 100%; max-width: 340px; }
.vosyn-quiz-bars i {
    display: block;
    flex: 1 1 0;
    min-width: 5px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,.12);
    transition: background .2s ease;
    cursor: pointer;
}
.vosyn-quiz-bars i.is-visited:hover { background: rgba(255,255,255,.3); }
.vosyn-quiz-bars i.is-done { background: var(--d-green); }
.vosyn-quiz-bars i.is-now { background: var(--d-grad); }

/* ---- step layout ---- */
/* The V3 left-hand guidance rail is gone (see QUIZ-V4 below): steps now
   stack — ask, then the Question Details / Your Response pair, then the
   guidance accordions. Only the review step still lays out as a grid. */
.vosyn-quiz { overflow-x: clip; }
.vosyn-quiz-step { display: none; }
.vosyn-quiz-step > * { min-width: 0; }
/* saved-ago + read time */
.vosyn-quiz-saved-ago { margin-left: auto; color: var(--d-muted); font-size: .8rem; }
.vosyn-quiz-read { display: inline-flex; align-items: center; gap: 6px; }
.vosyn-quiz-read svg { width: 15px; height: 15px; }

/* "Other - please explain" companion field. */
.vosyn-quiz-other { margin-top: 14px; }
.vosyn-quiz-other[hidden] { display: none; }
.vosyn-quiz-other label {
    display: block;
    margin-bottom: 6px;
    color: var(--d-muted);
    font-size: .84rem;
}
.vosyn-quiz-otherinput {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--d-border);
    background: rgba(255, 255, 255, .03);
    color: var(--d-text);
    font-size: .95rem;
}
.vosyn-quiz-otherinput:focus {
    outline: none;
    border-color: var(--d-orchid);
    box-shadow: 0 0 0 3px rgba(229, 125, 220, .16);
}
.vosyn-quiz-qtext {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--d-text);
    border: 0;
    padding: 0;
}
/* Longer asks step down instead of overflowing the card. */
.vosyn-quiz-qtext.is-long { font-size: 1.2rem; line-height: 1.42; }
.vosyn-quiz-qtext.is-xlong { font-size: 1.06rem; line-height: 1.5; }
.vosyn-quiz-saved {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 208, 132, .08);
    border: 1px solid rgba(0, 208, 132, .28);
    border-radius: 12px;
    padding: 11px 16px;
    margin-bottom: 12px;
    color: var(--d-text);
    font-size: .86rem;
}
.vosyn-quiz .vosyn-quiz-textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    height: 300px;
    background: rgba(255,255,255,.02) !important;
    border: 1px solid var(--d-border) !important;
    border-radius: 14px;
    color: var(--d-text) !important;
    padding: 20px 22px;
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    min-height: 0;
}
.vosyn-quiz .vosyn-quiz-textarea:focus {
    outline: none;
    border-color: var(--d-orchid) !important;
    box-shadow: 0 0 0 3px rgba(229,125,220,.14);
}
.vosyn-quiz .vosyn-quiz-textarea::placeholder { color: var(--d-muted); }
.vosyn-quiz-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 10px;
    color: var(--d-muted);
    font-size: .84rem;
}
.vosyn-quiz-tip { text-align: right; }
.vosyn-quiz-words b { color: var(--d-text); }
/* P-1 word range. Amber while the answer is still growing, red once it is
   over the ceiling, green when it is inside the range — the same three states
   the Next button is gating on, so the button is never a surprise. */
.vosyn-quiz-words.is-short b,
.vosyn-quiz-words.is-short .vosyn-quiz-wordnote { color: #ffc46b; }
.vosyn-quiz-words.is-long b,
.vosyn-quiz-words.is-long .vosyn-quiz-wordnote { color: #ff6b81; }
.vosyn-quiz-words.is-ok b { color: #6be3a2; }
.vosyn-quiz-wordnote { font-size: .82rem; }
.vosyn-quiz-step.is-invalid .vosyn-quiz-textarea { border-color: #ff6b81 !important; }
.vosyn-quiz-step.is-invalid .vosyn-quiz-choice { outline: 1px solid #ff6b81; outline-offset: 6px; border-radius: 12px; }

/* ---- yes / no ---- */
.vosyn-quiz-choice { display: flex; gap: 12px; flex-wrap: wrap; }
.vosyn-quiz-opt {
    flex: 1 1 200px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border: 1px solid var(--d-border);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    cursor: pointer;
    font-weight: 600;
    transition: border-color .15s ease, background .15s ease;
}
.vosyn-quiz-opt:hover { background: rgba(255,255,255,.05); }
.vosyn-quiz-opt input { accent-color: #8E3DD6; width: 18px; height: 18px; }
.vosyn-quiz-opt:has(input:checked) { border-color: var(--d-orchid); background: rgba(229,125,220,.10); }

/* ---- review step ---- */
.vosyn-quiz-summary { list-style: none; margin: 0 0 22px; padding: 0; }
.vosyn-quiz-summary li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--d-border);
}
.vosyn-quiz-sum-q { flex: 1 1 auto; font-size: .92rem; color: var(--d-text); }
.vosyn-quiz-sum-a { color: var(--d-muted); font-size: .84rem; white-space: nowrap; }
.vosyn-quiz-summary li.is-missing .vosyn-quiz-sum-a { color: #ff6b81; }
.vosyn-quiz-sum-edit {
    background: none;
    border: 1px solid var(--d-border);
    color: var(--d-orchid);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: .8rem;
    cursor: pointer;
}
.vosyn-quiz-sum-edit:hover { background: rgba(229,125,220,.12); }
.vosyn-quiz-captcha label { display: block; margin-bottom: 8px; font-weight: 600; }
.vosyn-quiz-captcha img { display: block; border-radius: 8px; margin: 0 0 10px; max-width: 198px; height: auto; }
.vosyn-quiz .vosyn-quiz-captcha input {
    text-transform: uppercase;
    max-width: 240px;
    background: rgba(255,255,255,.02) !important;
    border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important;
    border-radius: 10px;
    padding: 12px 14px;
}
.vosyn-quiz-final { color: var(--d-muted); font-size: .86rem; margin-top: 16px; }

/* ---- bottom bar ---- */
.vosyn-quiz-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--d-border);
}
.vosyn-quiz .vosyn-quiz-bottom .vosyn-btn { border-radius: 10px; }
.vosyn-quiz button.vosyn-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important;
    cursor: pointer;
}
.vosyn-quiz button.vosyn-btn-ghost:hover { background: rgba(255,255,255,.05) !important; }
/* Disabled Previous must LOOK disabled at every width, not just on mobile. */
.vosyn-quiz button[disabled] { opacity: .35; cursor: not-allowed; }
.vosyn-quiz button[disabled]:hover { background: transparent !important; }
.vosyn-quiz-noscript { color: var(--d-muted); font-size: .88rem; margin-top: 18px; }

@media (max-width: 900px) {
    .vosyn-quiz-top { gap: 10px 14px; padding-bottom: 14px; margin-bottom: 18px; }
    .vosyn-quiz-progress { align-items: flex-start; gap: 6px; }
    .vosyn-quiz-bars { max-width: none; }
    /* rows="14" gives a desktop-sized box; on a phone that pushes the word
       count and the action bar past the fold on every question. */
    .vosyn-quiz .vosyn-quiz-textarea { height: 240px; min-height: 0; padding: 16px; font-size: .96rem; }

    /* The sticky bar floats over the page, so the scrollable content needs
       room to clear it or the final options sit underneath the button. */
    .vosyn-quiz-form { padding-bottom: 8px; }
    .vosyn-quiz-step.is-active { padding-bottom: 4px; }
    .vosyn-quiz-bottom .vosyn-btn { text-align: center; min-width: 0; }
    .vosyn-quiz-bottom .js-quiz-prev { padding-left: 12px; padding-right: 12px; }
    .vosyn-quiz-bottom .js-quiz-prev[disabled] { opacity: .4; }

    /* Review step: let long questions wrap instead of squeezing the meta. */
    .vosyn-quiz-summary li { flex-wrap: wrap; gap: 8px 12px; }
    .vosyn-quiz-sum-q { flex: 1 1 100%; }
}

@media (max-width: 480px) {

    .vosyn-quiz .vosyn-quiz-textarea { height: 200px; }
    /* Two side-by-side buttons could not fit without forcing the whole page
       wider than the screen. Stack them, primary action last so it sits
       closest to the thumb. */
    .vosyn-quiz .vq-bottom { flex-direction: column; align-items: stretch; }
    .vosyn-quiz .vq-bottom .vosyn-btn { width: 100%; justify-content: center; }
}

/* ---- confirm-password feedback (operator 2026-07-24) ---- */
.vosyn-pw-match { display: block; margin-top: 5px; font-size: .86em; min-height: 1.1em; color: var(--vt-muted, #9ca3af); }
.vosyn-pw-match.is-ok { color: var(--vt-green, #00d084); }
.vosyn-pw-match.is-bad { color: #ff6b81; }


/* ---- milestone headers above the stepper (operator ruling X-1) ----
   All ten stages stay visible below; these group them so the candidate reads
   a phase first. No "of 10" total is shown anywhere — that counter was the
   drop-off driver the CEO flagged. */
.vosyn-dash-groups { display: flex; gap: 6px; margin: 0 0 10px; }
.vosyn-dash-group {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--d-border);
    color: var(--d-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
}
.vosyn-dash-group > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vosyn-dash-group.is-done { color: var(--d-green); border-color: rgba(0, 208, 132, .35); background: rgba(0, 208, 132, .07); }
.vosyn-dash-group.is-current { color: #fff; border-color: transparent; background: var(--d-grad); }
@media (max-width: 560px) {
    .vosyn-dash-groups { display: none; }
}

/* ---- 3rd Interview (25 MCQs) uses the same wizard ---- */
.vosyn-quiz-intro {
    max-width: 780px;
    margin: 0 0 22px;
    color: var(--d-muted, #9ca3af);
    font-size: .92rem;
    line-height: 1.6;
}
/* Five lettered options read as a vertical list, not side-by-side chips. */
.vosyn-quiz-choice.is-stacked { flex-direction: column; gap: 10px; }
.vosyn-quiz-choice.is-stacked .vosyn-quiz-opt {
    flex: 1 1 auto;
    align-items: flex-start;
    padding: 15px 18px;
    font-weight: 500;
    /* Text keeps its own column instead of wrapping back under the radio and
       the letter badge — that second line starting at the far left read as a
       separate option on a narrow screen. */
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 12px;
    align-items: start;
}
.vosyn-quiz-choice.is-stacked .vosyn-quiz-opt input { margin-top: 2px; }
.vosyn-quiz-optletter {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--d-border, rgba(156,163,175,.22));
    font-size: .8rem;
    font-weight: 700;
    color: var(--d-muted, #9ca3af);
}
.vosyn-quiz-opt:has(input:checked) .vosyn-quiz-optletter {
    background: var(--d-grad, linear-gradient(90deg,#D400CC,#5F6FD8));
    border-color: transparent;
    color: #fff;
}
.vosyn-quiz-choice.is-stacked .vosyn-quiz-opt > span:last-child { line-height: 1.5; }
/* The option TEXT was inheriting a muted colour and read as disabled grey on
   navy — unreadable for the one thing the candidate has to choose between. */
.vosyn-quiz .vosyn-quiz-opt,
.vosyn-quiz .vosyn-quiz-opt > span:last-child { color: var(--d-text, #f7f9ff); }
.vosyn-quiz .vosyn-quiz-opt input { accent-color: #8E3DD6; }

/* Failed-submission notice shown on the review step (operator 2026-07-24). */
.vosyn-quiz-retry {
    border: 1px solid rgba(255, 107, 129, .45);
    background: rgba(255, 107, 129, .08);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 0 0 18px;
}
.vosyn-quiz-retry p { margin: 0 0 6px; color: var(--d-text, #f7f9ff); font-size: .9rem; }
.vosyn-quiz-retry p:last-child { margin: 0; color: var(--d-muted, #9ca3af); }

/* ==== Review Your Application (second reference mock, operator 2026-07-25) ==== */
.vosyn-quiz-review.is-active { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.vosyn-quiz-revmain { min-width: 0; }
.vosyn-quiz-revhero h3 { margin: 0 0 6px; font-size: 1.9rem; color: var(--d-text); border: 0; padding: 0; }
.vosyn-quiz-revhero p { margin: 0 0 16px; color: var(--d-muted); }
.vosyn-quiz-important {
    display: flex; align-items: center; gap: 10px;
    background: rgba(94, 111, 216, .1); border: 1px solid rgba(94, 111, 216, .4);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 18px;
    color: var(--d-text); font-size: .9rem;
}
.vosyn-quiz-important svg { width: 18px; height: 18px; flex: 0 0 auto; color: #8ea2ff; }

.vosyn-quiz-revsec {
    background: rgba(255, 255, 255, .02); border: 1px solid var(--d-border);
    border-radius: 14px; padding: 6px 18px 10px; margin-bottom: 16px;
}
.vosyn-quiz-revsec header { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.vosyn-quiz-revsec-ico {
    width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-grad); color: #fff;
}
.vosyn-quiz-revsec-ico svg { width: 17px; height: 17px; }
.vosyn-quiz-revsec h4 { margin: 0; flex: 1 1 auto; font-size: 1.05rem; color: var(--d-text); }
.vosyn-quiz-revsec-chip {
    background: rgba(229, 125, 220, .15); color: var(--d-orchid);
    border-radius: 7px; padding: 2px 9px; font-size: .78rem; font-weight: 700;
}
.vosyn-quiz-revrow {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 0; border-top: 1px solid var(--d-border);
}
.vosyn-quiz-revnum {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--d-border);
    color: var(--d-muted); font-size: .74rem; font-weight: 700;
}
.vosyn-quiz-revrow-main { flex: 1 1 auto; min-width: 0; }
.vosyn-quiz-revrow-main strong { display: block; color: var(--d-text); font-size: .9rem; line-height: 1.45; margin-bottom: 4px; }
.vosyn-quiz-revprev { display: block; color: var(--d-muted); font-size: .84rem; line-height: 1.5; }
.vosyn-quiz-revrow.is-missing .vosyn-quiz-revprev { color: #ff6b81; }
.vosyn-quiz-revrow-side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.vosyn-quiz-revyes {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--d-green); font-weight: 600; font-size: .88rem;
}
.vosyn-quiz-revyes svg { width: 16px; height: 16px; }
.vosyn-quiz-revyes.is-missing { color: #ff6b81; }
.vosyn-quiz .vosyn-quiz-sum-edit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vosyn-quiz .vosyn-quiz-sum-edit svg { width: 13px; height: 13px; }

.vosyn-quiz-human {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: rgba(255, 255, 255, .02); border: 1px solid var(--d-border);
    border-radius: 14px; padding: 14px 18px; margin: 4px 0 12px;
}
.vosyn-quiz-human-ico {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(143, 61, 214, .18); color: var(--d-orchid);
}
.vosyn-quiz-human-ico svg { width: 20px; height: 20px; }
.vosyn-quiz-human-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
.vosyn-quiz-human-txt strong { color: var(--d-text); font-size: .95rem; }
.vosyn-quiz-human-txt span { color: var(--d-muted); font-size: .8rem; }
.vosyn-quiz-human-img img { display: block; border-radius: 8px; max-width: 150px; height: auto; }
.vosyn-quiz-human-refresh {
    background: none; border: 1px solid var(--d-border); border-radius: 9px;
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--d-muted); cursor: pointer;
}
.vosyn-quiz-human-refresh:hover { color: var(--d-text); background: rgba(255,255,255,.05); }
.vosyn-quiz-human-refresh svg { width: 16px; height: 16px; }
.vosyn-quiz .vosyn-quiz-human-field {
    max-width: 180px; text-transform: uppercase;
    background: rgba(255,255,255,.02) !important; border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important; border-radius: 10px; padding: 11px 13px;
}
.vosyn-quiz-secureline {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    color: var(--d-muted); font-size: .82rem; margin: 8px 0 0;
}
.vosyn-quiz-secureline svg { width: 15px; height: 15px; }

.vosyn-quiz-revside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vosyn-quiz-sidecard {
    background: rgba(255, 255, 255, .02); border: 1px solid var(--d-border);
    border-radius: 14px; padding: 16px 18px;
}
.vosyn-quiz-sidecard h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .95rem; color: var(--d-text); }
.vosyn-quiz-sidecard h4 svg { width: 16px; height: 16px; color: var(--d-orchid); }
.vosyn-quiz-sidecard dl { margin: 0; }
.vosyn-quiz-sidecard dt { color: var(--d-muted); font-size: .76rem; margin-top: 9px; }
.vosyn-quiz-sidecard dd { margin: 1px 0 0; color: var(--d-text); font-size: .9rem; font-weight: 600; }
.vosyn-quiz-sidecard p { color: var(--d-muted); font-size: .85rem; line-height: 1.5; margin: 0 0 10px; }
.vosyn-quiz-sidecard ul { list-style: none; margin: 0; padding: 0; }
.vosyn-quiz-sidecard li {
    position: relative; padding: 4px 0 4px 22px;
    color: var(--d-muted); font-size: .84rem; line-height: 1.45;
}
.vosyn-quiz-sidecard li::before { content: '✓'; position: absolute; left: 2px; color: var(--d-green); font-weight: 700; }
.vosyn-quiz-sidelink { color: var(--d-orchid); font-weight: 600; font-size: .87rem; text-decoration: none; display: inline-block; margin-top: 8px; }
.vosyn-quiz-sidelink:hover { text-decoration: underline; }
.vosyn-quiz-sidefoot { font-size: .76rem !important; margin-top: 8px !important; }

@media (max-width: 1000px) {
    .vosyn-quiz-review.is-active { grid-template-columns: 1fr; }
    .vosyn-quiz-revside { order: 2; }
}

/* ==========================================================================
   QUIZ-V4 — interview question layout (operator 2026-07-28, reference design)
   Supersedes the V3 "question rail on the left" layout for the three
   interviews (1st + 2nd Written Questionnaire, 3rd Interview). Shape:

     stage title + application line
     progress card (Question n of N, bar, draft state)
     QUESTION n · REQUIRED · estimated time
     the ask, full width
     two cards side by side — Question Details | Your Response
     guidance accordions, full width
     sticky action bar

   The mock's "Resources" accordion is not built: there is nothing to put
   behind it. The mock's "Saved to your application" is not used either —
   there is no server-side autosave in this system and the chip must not
   imply one. Everything below is scoped under .vosyn-quiz and appears after
   the V3 rules so it wins without !important.
   ========================================================================== */

/* Steps stack now; only the review step keeps its two-column grid. */
.vosyn-quiz-step.is-active:not(.vosyn-quiz-review) { display: block; }

/* ---- head: titles + progress card ---- */
.vosyn-quiz .vq-head {
    align-items: flex-start;
    gap: 20px 24px;
    padding-bottom: 20px;
}
.vq-head-titles { flex: 1 1 260px; }
.vosyn-quiz .vq-head .vosyn-quiz-title {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--d-text);
    border: 0;
    padding: 0;
}
.vq-head-app { margin: 6px 0 0; color: var(--d-muted); font-size: .92rem; }
.vq-head-app span { color: var(--d-orchid); font-weight: 600; }

.vq-progcard {
    flex: 1 1 380px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    padding: 16px 20px;
}
.vq-progcard .vosyn-quiz-progress { align-items: flex-start; flex: 1 1 220px; }
.vq-progcard .vosyn-quiz-count { font-size: .95rem; color: var(--d-text); font-weight: 600; }
/* One continuous track rather than visible segments — the segments are kept
   because they are the click-to-jump targets the wizard script binds to. */
.vq-progcard .vosyn-quiz-bars {
    gap: 0;
    max-width: none;
    background: rgba(255,255,255,.10);
    border-radius: 3px;
    overflow: hidden;
}
.vq-progcard .vosyn-quiz-bars i { height: 6px; border-radius: 0; background: transparent; }
.vq-progcard .vosyn-quiz-bars i.is-done,
.vq-progcard .vosyn-quiz-bars i.is-now { background: var(--d-grad); }

/* The draft chip in the head/footer is a quiet line, not a green panel. */
.vosyn-quiz .vq-saved,
.vosyn-quiz .vq-saved-foot {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    gap: 8px;
    align-items: flex-start;
    color: var(--d-text);
    font-size: .86rem;
}
.vosyn-quiz .vq-saved svg,
.vosyn-quiz .vq-saved-foot svg { width: 16px; height: 16px; color: var(--d-green); flex: none; margin-top: 2px; }
.vosyn-quiz .vq-saved span span,
.vosyn-quiz .vq-saved-foot span span { display: block; }
.vosyn-quiz .vq-saved small,
.vosyn-quiz .vq-saved-foot small {
    display: block;
    margin: 2px 0 0;
    color: var(--d-muted);
    font-size: .78rem;
}
.vosyn-quiz .vq-saved .vosyn-quiz-saved-ago,
.vosyn-quiz .vq-saved-foot .vosyn-quiz-saved-ago { margin-left: 0; }

/* ---- question meta strip ---- */
.vq-qmeta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.vq-qnum {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--d-orchid);
}
.vq-req {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .68rem;
    font-weight: 700;
    color: var(--d-text);
    background: rgba(229,125,220,.14);
    border: 1px solid rgba(229,125,220,.35);
    border-radius: 6px;
    padding: 3px 9px;
}
.vq-est {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--d-muted);
    font-size: .84rem;
}
.vq-est svg { width: 15px; height: 15px; }

/* ---- the ask ---- */
.vosyn-quiz .vq-cols ~ *,
.vosyn-quiz-step > .vosyn-quiz-qtext {
    max-width: none;
}
.vosyn-quiz-step > .vosyn-quiz-qtext {
    margin: 0 0 10px;
    font-size: 2rem;
    line-height: 1.22;
    font-weight: 700;
    color: var(--d-text);
}
.vosyn-quiz-step > .vosyn-quiz-qtext.is-long { font-size: 1.7rem; }
.vosyn-quiz-step > .vosyn-quiz-qtext.is-xlong { font-size: 1.4rem; line-height: 1.32; }
.vq-qsub { margin: 0 0 22px; color: var(--d-muted); font-size: .95rem; }

/* ---- the two cards ---- */
.vq-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--d-border);
    border-radius: 16px;
    background: rgba(255,255,255,.02);
    overflow: hidden;
    margin-bottom: 22px;
}
.vq-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.vq-card { padding: 26px 28px; min-width: 0; }
.vq-cols .vq-details { border-right: 1px solid var(--d-border); }
.vq-cols.is-single .vq-details { border-right: 0; }
.vosyn-quiz .vq-card h4 {
    margin: 0 0 16px;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--d-text);
    border: 0;
    padding: 0;
}
.vq-details p { margin: 0 0 14px; color: rgba(247,249,255,.82); font-size: .94rem; line-height: 1.65; }
.vq-details p:last-child { margin-bottom: 0; }
.vq-hint { margin: -8px 0 18px; color: var(--d-muted); font-size: .88rem; }

/* Second guidance block inside the left card, used when the question has no
   explainer of its own (written answers, SJT scenarios). */
.vq-details-more { margin-top: 20px; border-top: 1px solid var(--d-border); padding-top: 18px; }
.vosyn-quiz .vq-details-more h5 {
    margin: 0 0 12px;
    font-size: .96rem;
    font-weight: 700;
    color: var(--d-text);
    border: 0;
    padding: 0;
}

/* "View complete details" disclosure inside Question Details */
.vq-more { margin-top: 16px; border-top: 1px solid var(--d-border); padding-top: 14px; }
.vq-more > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--d-orchid);
    font-weight: 600;
    font-size: .92rem;
}
.vq-more > summary::-webkit-details-marker { display: none; }
.vq-more > summary svg { width: 18px; height: 18px; margin-left: auto; transition: transform .18s ease; }
.vq-more[open] > summary svg { transform: rotate(180deg); }
.vq-more-body { padding-top: 12px; }

/* ---- response column ---- */
.vq-response .vosyn-quiz-choice { gap: 12px; }
.vq-response .vosyn-quiz-choice.is-stacked { flex-direction: column; }
.vq-response .vosyn-quiz-opt { flex: 1 1 auto; align-items: flex-start; padding: 16px 18px; }
.vq-opt-txt { display: block; }
.vq-opt-txt strong { display: block; font-size: 1.02rem; font-weight: 700; }
.vq-opt-txt small {
    display: block;
    margin-top: 4px;
    color: var(--d-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
}
.vq-response .vosyn-quiz-textarea { min-height: 220px; }


/* ---- guidance accordions ---- */
.vq-accs { display: flex; flex-direction: column; gap: 10px; }
.vq-acc {
    border: 1px solid var(--d-border);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
}
.vq-acc > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
}
.vq-acc > summary::-webkit-details-marker { display: none; }
.vq-acc-txt { flex: 1 1 auto; min-width: 0; }
.vq-acc-txt strong { display: block; font-size: 1rem; font-weight: 600; color: var(--d-text); }
.vq-acc-txt small { display: block; margin-top: 3px; color: var(--d-muted); font-size: .85rem; }
.vq-acc-chev { width: 20px; height: 20px; flex: none; color: var(--d-muted); transition: transform .18s ease; }
.vq-acc[open] .vq-acc-chev { transform: rotate(180deg); }
.vq-acc-body {
    padding: 0 22px 20px;
    color: rgba(247,249,255,.78);
    font-size: .92rem;
    line-height: 1.68;
}
.vq-acc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vq-acc-list li { display: flex; align-items: flex-start; gap: 10px; }
.vq-acc-list svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--d-green); }

/* ---- action bar ---- */
/* The bar floats over the page at every width, so the last accordion needs
   room to clear it — otherwise it sits permanently underneath the buttons. */
.vosyn-quiz .vosyn-quiz-form { padding-bottom: 12px; }
.vosyn-quiz .vq-bottom {
    position: sticky;
    bottom: 0;
    z-index: 5;
    justify-content: flex-start;
    margin-top: 30px;
    padding: 16px 0;
    background: linear-gradient(180deg, rgba(3,11,38,0) 0%, var(--d-canvas) 26%);
}
.vq-bottom-mid { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }

@media (max-width: 900px) {
    .vq-cols { grid-template-columns: minmax(0, 1fr); }
    .vq-cols .vq-details { border-right: 0; border-bottom: 1px solid var(--d-border); }
    .vq-card { padding: 20px 18px; }
    .vosyn-quiz-step > .vosyn-quiz-qtext { font-size: 1.5rem; }
    .vosyn-quiz-step > .vosyn-quiz-qtext.is-long { font-size: 1.3rem; }
    .vosyn-quiz-step > .vosyn-quiz-qtext.is-xlong { font-size: 1.12rem; }
    .vosyn-quiz .vq-head .vosyn-quiz-title { font-size: 1.28rem; }
    .vq-progcard { padding: 14px 16px; }
    .vq-est { margin-left: 0; flex-basis: 100%; }
    .vq-bottom-mid { order: 10; flex-basis: 100%; justify-content: flex-start; }
    .vosyn-quiz .vq-bottom { flex-wrap: wrap; }
}

/* ==== dashboard inline GDS session panel (operator 2026-07-25) ==== */
.vosyn-dash-gdspanel {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 4px 0 14px;
}
.vosyn-dash-gdspanel h4 { margin: 0 0 10px; font-size: 1.3rem; color: var(--d-text); border: 0; padding: 0; }
.vosyn-dash-gdsdate { color: var(--d-text); line-height: 1.6; margin: 0 0 14px; }
.vosyn-dash-gdsjoin { margin: 0 0 10px; }
.vosyn-dash-gdsnote { color: var(--d-muted); font-size: .85rem; margin: 0; }
.vosyn-dash-gdscal { margin: 0 0 10px; font-size: .9rem; }
.vosyn-dash-gdscal a { color: var(--d-orchid); text-decoration: none; border-bottom: 1px solid rgba(229,125,220,.35); }
.vosyn-dash-gdscal a:hover { border-bottom-color: var(--d-orchid); }

/* ==== contract panel: view → e-sign → download (operator 2026-07-25) ====
   Replaces a loose stack of buttons whose consent checkbox never lined up
   with its own label. Three numbered steps, one job each. */
.vosyn-contract {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--d-border);
    border-radius: 14px;
    padding: 18px 20px;
    margin: 4px 0 14px;
}
.vosyn-contract-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 0 0 14px;
}
.vosyn-contract-head h4 { margin: 0; font-size: 1.3rem; color: var(--d-text); border: 0; padding: 0; }
.vosyn-contract-status {
    font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
    color: var(--d-orchid); background: rgba(211, 38, 197, .12); border: 1px solid rgba(211, 38, 197, .32);
}
.vosyn-contract-status.is-done {
    color: var(--d-green); background: rgba(0, 208, 132, .12); border-color: rgba(0, 208, 132, .34);
}

.vosyn-contract-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.vosyn-contract-steps > li {
    display: grid; grid-template-columns: 30px 1fr; gap: 14px;
    padding: 0 0 18px 0; margin: 0; position: relative;
}
.vosyn-contract-steps > li::before { display: none; }   /* kill theme list bullets */
/* the rail joining the steps */
.vosyn-contract-steps > li:not(:last-child)::after {
    content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px;
    width: 2px; background: var(--d-border);
}
.vosyn-contract-steps > li.is-done:not(:last-child)::after { background: rgba(0, 208, 132, .45); }
.vosyn-contract-steps > li:last-child { padding-bottom: 0; }

.vosyn-contract-num {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; font-weight: 700; line-height: 1;
    border: 1px solid var(--d-border); color: var(--d-muted);
    background: var(--d-elev2, #1f294a); position: relative; z-index: 1;
}
.vosyn-contract-num svg { width: 15px; height: 15px; }
.is-done > .vosyn-contract-num { background: rgba(0, 208, 132, .16); border-color: rgba(0, 208, 132, .5); color: var(--d-green); }
.is-current > .vosyn-contract-num { background: var(--d-grad); border-color: transparent; color: #fff; }

.vosyn-contract-body { min-width: 0; }
/* The colour here MUST out-specify the theme. Avada paints every h5 with
   .fusion-responsive-typography-calculated at near-black (rgb(20,22,23)); on
   this navy card that measured 1.23:1 — the step headings a candidate reads
   before signing were effectively invisible (mobile audit, 12 Aug).
   The tell that proves the mechanism: step 3 was always readable, because
   `.is-upcoming .vosyn-contract-body h5` below carries one more class and
   therefore wins, while this rule alone lost. Same family as the 8 Aug
   invisible terms card. Do not reduce this selector. */
.vosyn-contract .vosyn-contract-body h5,
.vosyn-contract-body h5 {
    margin: 4px 0 6px; font-size: 1.02rem; font-weight: 700;
    color: var(--d-text, #f7f9ff) !important; border: 0; padding: 0;
}
.vosyn-contract-body p { margin: 0 0 10px; color: var(--d-text); line-height: 1.55; font-size: .94rem; }
.vosyn-contract-body p:last-child { margin-bottom: 0; }
.vosyn-contract-body .vosyn-dash-muted { color: var(--d-muted); }
/* Matches the !important above, or a not-yet-reached step would jump from
   muted to full white. The muted treatment is what marks it as upcoming. */
.is-upcoming .vosyn-contract-body h5 { color: var(--d-muted, #98a2c2) !important; }
.vosyn-contract-signed { color: var(--d-green) !important; }

/* the e-sign form — the alignment fix */
.vosyn-dash-esign { margin: 6px 0 0; }
.vosyn-esign-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px !important; }
.vosyn-esign-field label { font-size: .9rem; font-weight: 600; color: var(--d-text); }
.vosyn-dash-esign input[type="text"] {
    width: 100%; max-width: 380px; box-sizing: border-box;
    padding: 11px 13px; border-radius: 9px; border: 1px solid var(--d-border);
    font-size: .96rem;
}
/* The old markup wrapped the checkbox INSIDE its label, so a wrapping
   sentence ran back underneath the box. Now they are siblings: box fixed at
   the top-left, text as its own column.

   GRID, not flex, and deliberately so. Under flex the checkbox is sized from
   its OWN width, so any theme rule that stretches inputs (Avada ships several)
   wins the row: the box eats the line and the sentence is crushed into an
   ~80px min-content ribbon that overflows the card. A grid TRACK cannot be
   overridden from the item side - `width: 100% !important` on the input still
   resolves to 18px, because that is the track. minmax(0, 1fr) lets the text
   column shrink without ever pushing past the card edge. */
.vosyn-esign-consent {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    margin: 0 0 16px !important;
}
.vosyn-esign-consent input[type="checkbox"] {
    width: 18px !important; height: 18px !important;
    min-width: 0 !important; max-width: 100% !important;
    margin: 2px 0 0 !important; padding: 0 !important;
    box-sizing: border-box; flex: none; float: none;
    accent-color: var(--d-magenta); cursor: pointer;
}
.vosyn-esign-consent label {
    min-width: 0; margin: 0;
    font-size: .88rem; line-height: 1.5; color: var(--d-text); cursor: pointer;
}
.vosyn-esign-actions { margin: 0 !important; }
.vosyn-contract .vosyn-req { color: var(--d-orchid); }

/* Step 1 after execution: the unsigned copy is retired, not offered. Rendered
   as an inert <span>, so this is purely how "inert" should look. */
.vosyn-contract-retired {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 !important;
}
.vosyn-contract .vosyn-btn.is-disabled {
    opacity: .42; cursor: not-allowed; pointer-events: none;
    filter: grayscale(100%);
    background: transparent; color: var(--d-muted); border-color: var(--d-border);
    box-shadow: none;
}
.vosyn-contract-hint { font-size: .84rem; color: var(--d-muted); }

/* "Coming soon" documentation request (Aquarius cross-check not built yet). */
.vosyn-docreq-soon { display: inline-flex; flex-direction: column; gap: 4px; }
.vosyn-docreq-soon .vosyn-btn.is-disabled {
    opacity: .42; cursor: not-allowed; pointer-events: none;
    filter: grayscale(100%); box-shadow: none;
}
.vosyn-docreq-soon-tag { font-size: .78rem; color: var(--d-muted); }

@media (max-width: 480px) {
    .vosyn-contract { padding: 16px 14px; }
    .vosyn-contract-steps > li { grid-template-columns: 26px 1fr; gap: 11px; }
    .vosyn-contract-num { width: 26px; height: 26px; font-size: .82rem; }
    .vosyn-contract-steps > li:not(:last-child)::after { left: 12px; top: 30px; }
}

/* ==== Next Step Form (reference mock, operator 2026-07-25) ==== */
.vosyn-nsf-page {
    --d-border: var(--vt-border, rgba(156,163,175,.22));
    --d-text: var(--vt-off-white, #f7f9ff);
    --d-muted: var(--vt-muted, #9ca3af);
    --d-green: var(--vt-green, #00d084);
    --d-grad: var(--vt-cta-grad, linear-gradient(90deg,#D400CC 0%,#8E3DD6 55%,#5F6FD8 100%));
    --d-orchid: var(--vt-orchid, #e57ddc);
    color: var(--d-text);
    max-width: 1180px;
    margin: 0 auto;
}
.vosyn-nsf-head h2 { margin: 0 0 6px; font-size: 2.1rem; border: 0; padding: 0; color: var(--d-text); }
.vosyn-nsf-head p { margin: 0 0 22px; color: var(--d-muted); }
.vosyn-nsf-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }

.vosyn-nsf-sec {
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--d-border);
    border-radius: 16px;
    padding: 18px 22px 22px;
    margin-bottom: 16px;
}
.vosyn-nsf-sec > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.vosyn-nsf-sec-ico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--d-grad); color: #fff;
}
.vosyn-nsf-sec-ico svg { width: 19px; height: 19px; }
.vosyn-nsf-sec h3 { margin: 0 0 3px; font-size: 1.08rem; color: var(--d-text); border: 0; padding: 0; }
.vosyn-nsf-sec > header p { margin: 0; color: var(--d-muted); font-size: .86rem; }

.vosyn-nsf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.vosyn-nsf-field { display: flex; flex-direction: column; min-width: 0; }
.vosyn-nsf-page .vosyn-nsf-field label {
    color: var(--d-text); font-size: .88rem; font-weight: 500;
    line-height: 1.45; margin-bottom: 7px;
}
.vosyn-nsf-page .vosyn-nsf select,
.vosyn-nsf-page .vosyn-nsf input {
    /* min-width:0 — a select's intrinsic min-content width is its longest
       option (q2b's is 467px), which would otherwise blow out the single
       mobile grid track and force horizontal scroll at 375px. */
    width: 100%; max-width: none; min-width: 0; box-sizing: border-box;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid var(--d-border) !important;
    color: var(--d-text) !important;
    border-radius: 10px; padding: 11px 13px; font-size: .93rem;
}
.vosyn-nsf-page .vosyn-nsf select:focus,
.vosyn-nsf-page .vosyn-nsf input:focus {
    outline: none; border-color: var(--d-orchid) !important;
    box-shadow: 0 0 0 3px rgba(229,125,220,.14);
}

.vosyn-nsf-comp {
    background: rgba(94, 111, 216, .09);
    border: 1px solid rgba(94, 111, 216, .32);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.vosyn-nsf-comp h4 { margin: 0 0 8px; font-size: .95rem; color: var(--d-text); }
.vosyn-nsf-comp ul { list-style: none; margin: 0; padding: 0; }
.vosyn-nsf-comp li {
    position: relative; padding: 4px 0 4px 20px;
    color: var(--d-muted); font-size: .85rem; line-height: 1.5;
}
.vosyn-nsf-comp li::before {
    content: ''; position: absolute; left: 2px; top: 12px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--d-orchid);
}

.vosyn-nsf-foot {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-top: 18px; border-top: 1px solid var(--d-border);
}
.vosyn-nsf-smallprint { flex: 1 1 240px; margin: 0; color: var(--d-muted); font-size: .8rem; line-height: 1.5; }
.vosyn-nsf-page .vosyn-nsf-foot .vosyn-btn { border-radius: 10px; }
.vosyn-nsf-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (max-width: 1000px) {
    /* minmax(0,1fr), not 1fr: a bare 1fr track has min-size auto, so the
       form's intrinsic width (widest select option) forces page overflow. */
    .vosyn-nsf-cols { grid-template-columns: minmax(0, 1fr); }
    .vosyn-nsf-side { order: -1; }
}
@media (max-width: 640px) {
    .vosyn-nsf-grid { grid-template-columns: minmax(0, 1fr); }
    .vosyn-nsf-head h2 { font-size: 1.6rem; }
    .vosyn-nsf-foot { flex-direction: column; align-items: stretch; }
    .vosyn-nsf-page .vosyn-nsf-foot .vosyn-btn { text-align: center; }
}

/* ==========================================================================
   UNIFIED DASHBOARD (2026-07-25 spec) — the staff operating console.
   Dark shell scoped to .vosyn-udash / body.vosyn-udash-page ONLY; the
   re-hosted wp-admin console screens keep their light worksheet tokens.
   The compact admin header replaces the public-site header on every
   console-body page (spec §7): the theme header is display:none'd below.
   Rollback: revert this block (single commit; see changelog).
   ========================================================================== */

/* ---------- kill the public-site chrome on admin surfaces ---------- */
body.vosyn-console-body .fusion-header-wrapper,
body.vosyn-console-body .fusion-tb-header,
body.vosyn-console-body #side-header,
body.vosyn-console-body #sliders-container,
body.vosyn-console-body .fusion-footer,
body.vosyn-console-body .fusion-page-title-bar {
    display: none !important;
}
body.vosyn-console-body #main { padding-top: 18px !important; }

/* ---------- dark tokens for the dashboard page ---------- */
.vosyn-udash {
    --ud-bg: #0a0f22;
    --ud-card: #121936;
    --ud-card-raised: #1a2347;
    --ud-border: #232e56;
    --ud-text: #e8ecf8;
    --ud-muted: #98a2c2;
    --ud-accent: #7c8cf8;
    --ud-accent-strong: #5f6fd8;
    --ud-ok: #34d399;
    --ud-warn: #fbbf24;
    --ud-danger: #f87171;
    --ud-magenta: #d326c5;
    color: var(--ud-text);
    font-size: 15px;
}
body.vosyn-udash-page,
body.vosyn-udash-page #wrapper,
body.vosyn-udash-page #main {
    background: var(--ud-bg, #0a0f22) !important;
}
body.vosyn-udash-page #main { padding: 0 0 40px !important; }
.vosyn-udash a { text-decoration: none; }

/* ---------- compact admin header (spec §7) ---------- */
.vosyn-hd {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 22px; margin: 0 0 18px;
    background: #0d1329; border-bottom: 1px solid #232e56;
    position: sticky; top: 0; z-index: 60;
}
.vosyn-hd-brand { display: flex; align-items: baseline; gap: 10px; }
.vosyn-hd-logo {
    font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #fff;
}
.vosyn-hd-app { color: #98a2c2; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.vosyn-hd-search { flex: 1 1 260px; max-width: 460px; }
.vosyn-hd-search input[type="search"] {
    width: 100%; padding: 9px 14px; border-radius: 10px;
    background: #1a2347; border: 1px solid #232e56; color: #e8ecf8;
    font-size: .88rem;
}
.vosyn-hd-search input::placeholder { color: #98a2c2; }
.vosyn-hd-filters { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.vosyn-hd-filters label { display: flex; flex-direction: column; gap: 3px; color: #98a2c2; font-size: .72rem; font-weight: 600; }
.vosyn-hd-filters input, .vosyn-hd-filters select {
    background: #1a2347; border: 1px solid #232e56; color: #e8ecf8;
    border-radius: 8px; padding: 6px 9px; font-size: .82rem; min-height: 34px;
}
.vosyn-hd-apply {
    background: #5f6fd8; color: #fff; border: 0; border-radius: 8px;
    padding: 8px 14px; font-size: .82rem; font-weight: 700; cursor: pointer; min-height: 34px;
}
.vosyn-hd-apply:hover { background: #7c8cf8; }
.vosyn-hd-bell { position: relative; font-size: 1.1rem; padding: 6px; line-height: 1; }
.vosyn-hd-belln {
    position: absolute; top: -2px; right: -4px; background: #d63638; color: #fff;
    font-size: .62rem; font-weight: 800; border-radius: 999px; padding: 1px 5px;
}
.vosyn-hd-user { position: relative; }
.vosyn-hd-user summary {
    display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
}
.vosyn-hd-user summary::-webkit-details-marker { display: none; }
.vosyn-hd-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, #5f6fd8, #d326c5); color: #fff; font-weight: 800; font-size: .85rem;
}
.vosyn-hd-who { display: flex; flex-direction: column; line-height: 1.15; }
.vosyn-hd-who strong { color: #e8ecf8; font-size: .82rem; }
.vosyn-hd-who small { color: #98a2c2; font-size: .7rem; }
.vosyn-hd-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
    background: #1a2347; border: 1px solid #232e56; border-radius: 10px;
    min-width: 180px; padding: 6px; margin: 0; list-style: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.vosyn-hd-menu li a {
    display: block; padding: 8px 12px; border-radius: 7px; color: #e8ecf8; font-size: .84rem;
}
.vosyn-hd-menu li a:hover { background: #232e56; }

/* ---------- shell grid ---------- */
.vosyn-udash-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; padding: 0 22px; }
.vosyn-udash .vosyn-adm-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- grouped rail (headings, badges, health) ---------- */
.vosyn-udash .vosyn-adm-rail { background: #0d1329; border: 1px solid #232e56; border-radius: 14px; }
.vosyn-adm-railhead {
    margin: 14px 14px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .09em;
    text-transform: uppercase; color: #6b7699;
}
.vosyn-udash .vosyn-adm-rail-item { display: flex; align-items: center; justify-content: space-between; }
.vosyn-adm-railbadge {
    background: #d63638; color: #fff; font-size: .66rem; font-weight: 800;
    border-radius: 999px; padding: 1px 7px; margin-left: 8px;
}
.vosyn-adm-railhealth {
    margin: 16px 14px 14px; padding: 10px 12px; border-radius: 10px;
    background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .25);
    font-size: .78rem; font-weight: 700; color: #34d399;
}
.vosyn-adm-railhealth.is-warn { background: rgba(251,191,36,.08); border-color: rgba(251,191,36,.3); color: #fbbf24; }
.vosyn-adm-railhealth small { color: #98a2c2; font-weight: 500; }
.vosyn-adm-raildot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 4px; }

/* ---------- KPI strip (spec §9) ---------- */
.vosyn-kpis {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px;
}
.vosyn-kpi {
    display: flex; flex-direction: column; gap: 6px;
    background: var(--ud-card); border: 1px solid var(--ud-border); border-radius: 14px;
    padding: 14px 16px; transition: border-color .15s ease, transform .15s ease;
}
.vosyn-kpi:hover { border-color: var(--ud-accent-strong); transform: translateY(-1px); }
.vosyn-kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vosyn-kpi-label { color: var(--ud-muted); font-size: .74rem; font-weight: 700; }
.vosyn-kpi-icon { font-size: .95rem; opacity: .9; }
.vosyn-kpi-n { color: var(--ud-text); font-size: 1.75rem; font-weight: 800; line-height: 1; }
.vosyn-kpi-sub { color: var(--ud-muted); font-size: .7rem; line-height: 1.35; }
.vosyn-kpi.is-attn { border-color: rgba(251, 191, 36, .5); }
.vosyn-kpi.is-attn .vosyn-kpi-n { color: var(--ud-warn); }
.vosyn-kpi.is-crit { border-color: rgba(248, 113, 113, .55); }
.vosyn-kpi.is-crit .vosyn-kpi-n { color: var(--ud-danger); }
.vosyn-kpi.is-ok .vosyn-kpi-n { color: var(--ud-ok); }

/* ---------- Quick Access row (spec §10) ---------- */
.vosyn-qa { display: flex; gap: 10px; flex-wrap: wrap; }
.vosyn-qa-item {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ud-card); border: 1px solid var(--ud-border); border-radius: 10px;
    padding: 9px 15px; color: var(--ud-text); font-size: .84rem; font-weight: 600;
}
.vosyn-qa-item:hover { border-color: var(--ud-accent-strong); color: #fff; }

/* ---------- widgets ---------- */
.vosyn-widget {
    background: var(--ud-card); border: 1px solid var(--ud-border); border-radius: 14px;
    padding: 18px 20px; min-width: 0;
}
.vosyn-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.vosyn-widget-head h3 { margin: 0; color: var(--ud-text); font-size: 1.02rem; font-weight: 700; }
.vosyn-widget-count {
    display: inline-grid; place-items: center; margin-left: 8px; min-width: 22px; height: 22px;
    background: #d63638; color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; padding: 0 6px;
    vertical-align: 2px;
}
.vosyn-widget-link { color: var(--ud-accent); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.vosyn-widget-link:hover { color: #fff; }
.vosyn-widget-note { margin: 10px 0 0; color: var(--ud-muted); font-size: .72rem; line-height: 1.5; }
.vosyn-widget-warn { margin: 10px 0 0; color: var(--ud-warn); font-size: .78rem; font-weight: 600; }
.vosyn-udash .vosyn-adm-empty { color: var(--ud-muted); font-size: .86rem; margin: 4px 0; }

/* ---------- primary row: review queue 65 / upcoming 35 (spec §6) ---------- */
.vosyn-udash-primary { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* Needs Attention table */
.vosyn-naq-scroll, .vosyn-ph-scroll { overflow-x: auto; }
.vosyn-naq-table, .vosyn-ph-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.vosyn-naq-table th, .vosyn-ph-table th {
    text-align: left; color: var(--ud-muted); font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px;
    border-bottom: 1px solid var(--ud-border);
}
.vosyn-naq-table td, .vosyn-ph-table td {
    padding: 10px; border-bottom: 1px solid rgba(35, 46, 86, .6);
    color: var(--ud-text); vertical-align: middle;
}
.vosyn-naq-table tr:last-child td, .vosyn-ph-table tr:last-child td { border-bottom: 0; }
.vosyn-naq-who { display: flex; flex-direction: column; line-height: 1.25; }
.vosyn-naq-who strong { color: var(--ud-text); }
.vosyn-naq-who small { color: var(--ud-muted); font-size: .7rem; }
.vosyn-naq-who:hover strong { color: var(--ud-accent); }
.vosyn-naq-score {
    display: inline-grid; place-items: center; min-width: 26px; height: 20px; margin-left: 6px;
    background: var(--ud-card-raised); border: 1px solid var(--ud-border); border-radius: 6px;
    font-size: .72rem; font-weight: 800; color: var(--ud-warn);
}
.is-overdue, td.is-overdue { color: var(--ud-danger) !important; font-weight: 700; }
td.is-up { color: var(--ud-ok); font-weight: 700; }
td.is-down { color: var(--ud-danger); font-weight: 700; }
.vosyn-ph-terminal td { color: var(--ud-ok); }

/* chips */
.vosyn-chip {
    display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    font-size: .68rem; font-weight: 800; letter-spacing: .02em;
}
.vosyn-chip.is-high, .vosyn-chip.is-critical { background: rgba(248,113,113,.16); color: #f87171; }
.vosyn-chip.is-medium { background: rgba(251,191,36,.15); color: #fbbf24; }
.vosyn-chip.is-low { background: rgba(124,140,248,.16); color: #a5b0fa; }
.vosyn-chip.is-none { background: rgba(152,162,194,.12); color: #98a2c2; }
.vosyn-chip.is-unassigned { background: rgba(152,162,194,.14); color: #b7c0dd; }

/* keep coverage/queue cells readable when columns squeeze — scroll instead */
.vosyn-rc .vosyn-ph-table th, .vosyn-rc .vosyn-ph-table td { white-space: nowrap; padding: 8px 7px; font-size: .76rem; }
.vosyn-rc .vosyn-ph-table td:first-child { white-space: normal; min-width: 120px; }
.vosyn-rc .vosyn-chip { padding: 2px 8px; font-size: .64rem; }
.vosyn-rc .vosyn-ph-table th { font-size: .62rem; letter-spacing: .03em; }
.vosyn-rc .vosyn-ph-table abbr { text-decoration: none; }

/* row-action popover */
.vosyn-naq-actions { text-align: right; white-space: nowrap; }
.vosyn-naq-menu { position: relative; display: inline-block; }
.vosyn-naq-menu summary {
    cursor: pointer; list-style: none; display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ud-border);
    background: var(--ud-card-raised); color: var(--ud-text); font-weight: 800;
}
.vosyn-naq-menu summary::-webkit-details-marker { display: none; }
.vosyn-naq-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    background: var(--ud-card-raised); border: 1px solid var(--ud-border); border-radius: 12px;
    padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 280px;
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.vosyn-naq-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vosyn-naq-form select, .vosyn-naq-form input {
    background: #121936; border: 1px solid var(--ud-border); color: var(--ud-text);
    border-radius: 7px; padding: 6px 8px; font-size: .78rem; min-height: 32px;
}
.vosyn-naq-form input { flex: 1 1 90px; min-width: 0; }
.vosyn-naq-form button {
    background: #5f6fd8; color: #fff; border: 0; border-radius: 7px;
    padding: 7px 12px; font-size: .76rem; font-weight: 700; cursor: pointer; min-height: 32px;
}
.vosyn-naq-form button:hover { background: #7c8cf8; }
.vosyn-naq-open { color: var(--ud-accent); font-weight: 700; font-size: .8rem; }

/* ---------- Today & Next 7 Days ---------- */
.vosyn-up7 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vosyn-up7 li {
    display: flex; align-items: center; gap: 12px; padding: 11px 2px;
    border-bottom: 1px solid rgba(35, 46, 86, .6);
}
.vosyn-up7 li:last-child { border-bottom: 0; }
.vosyn-up7-icon {
    width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px;
    background: var(--ud-card-raised); border-radius: 9px; font-size: .95rem;
}
.vosyn-up7-main { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vosyn-up7-main strong { color: var(--ud-text); font-size: .85rem; }
.vosyn-up7-main small { color: var(--ud-muted); font-size: .72rem; }
.vosyn-up7 li > a { color: var(--ud-accent); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.vosyn-up7 li > a:hover { color: #fff; }

/* ---------- analytics row ---------- */
.vosyn-udash-analytics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.vosyn-udash-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* interview completion bars */
.vosyn-ic-barcell { min-width: 90px; }
.vosyn-ic-track { display: block; height: 7px; border-radius: 999px; background: var(--ud-card-raised); overflow: hidden; }
.vosyn-ic-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5f6fd8, #7c8cf8); }

/* score distribution */
.vosyn-sd-bands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vosyn-sd-band {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: var(--ud-card-raised); border: 1px solid var(--ud-border);
    border-radius: 10px; padding: 10px 4px;
}
.vosyn-sd-band strong { color: var(--ud-text); font-size: 1.15rem; }
.vosyn-sd-band small { color: var(--ud-muted); font-size: .68rem; }
.vosyn-sd-range { font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.vosyn-sd-range.is-low { background: rgba(248,113,113,.15); color: #f87171; }
.vosyn-sd-range.is-warn { background: rgba(251,191,36,.15); color: #fbbf24; }
.vosyn-sd-range.is-ok { background: rgba(52,211,153,.15); color: #34d399; }

/* ---------- health / actions row ---------- */
.vosyn-udash-health { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.vosyn-health { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vosyn-health li { border-bottom: 1px solid rgba(35, 46, 86, .6); }
.vosyn-health li:last-child { border-bottom: 0; }
.vosyn-health li > a, .vosyn-health-static { display: flex; align-items: center; gap: 12px; padding: 10px 2px; }
.vosyn-health-n {
    min-width: 44px; text-align: center; font-weight: 800; font-size: .92rem;
    padding: 5px 8px; border-radius: 9px; flex: 0 0 auto;
}
.vosyn-health-n.is-ok { background: rgba(52,211,153,.13); color: #34d399; }
.vosyn-health-n.is-attn { background: rgba(251,191,36,.13); color: #fbbf24; }
.vosyn-health-n.is-crit { background: rgba(248,113,113,.15); color: #f87171; }
.vosyn-health-n.is-na { background: rgba(152,162,194,.1); color: #98a2c2; }
.vosyn-health-main { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vosyn-health-main strong { color: var(--ud-text); font-size: .84rem; }
.vosyn-health-main small { color: var(--ud-muted); font-size: .72rem; }
.vosyn-health li > a:hover strong { color: var(--ud-accent); }

.vosyn-qacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vosyn-qact {
    display: flex; align-items: center; gap: 9px; padding: 12px 14px;
    background: var(--ud-card-raised); border: 1px solid var(--ud-border); border-radius: 10px;
    color: var(--ud-text); font-size: .82rem; font-weight: 700;
}
.vosyn-qact:hover { border-color: var(--ud-accent-strong); color: #fff; }

.vosyn-udash-asof { color: var(--ud-muted); font-size: .7rem; margin: 4px 0 0; }

/* ---------- responsive (spec §24) ---------- */
@media (max-width: 1439px) {
    .vosyn-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vosyn-udash-analytics { grid-template-columns: 1fr 1fr; }
    .vosyn-udash-health { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
    .vosyn-udash-primary { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .vosyn-udash-body { grid-template-columns: 1fr; padding: 0 12px; }
    .vosyn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vosyn-udash-analytics, .vosyn-udash-health { grid-template-columns: 1fr; }
    .vosyn-hd { position: static; }
    .vosyn-hd-filters { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .vosyn-kpi, .vosyn-kpi:hover { transition: none; transform: none; }
}

/* ---------- Announcements panel (account-only dashboards, 2026-07-25) ---------- */
.vosyn-dash-announcements { margin-top: 22px; border-top: 1px solid var(--d-border, rgba(255,255,255,.12)); padding-top: 16px; }
.vosyn-dash-announcements h4 { margin: 0 0 10px; }
.vosyn-dash-announcement {
    background: rgba(82, 122, 249, .08); border: 1px solid rgba(82, 122, 249, .25);
    border-radius: 10px; padding: 12px 16px; margin-bottom: 10px;
}
.vosyn-dash-announcement header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.vosyn-dash-announcement time { font-size: .78em; opacity: .75; white-space: nowrap; }
.vosyn-dash-announcement p { margin: 0; line-height: 1.55; }

/* ---------- D-13 Messages card (onboarded candidates only, 2026-08-09) ----------
   Revived two-way thread, styled as a real messaging surface. Your bubbles
   sit right in the indigo of the CTA gradient's tail; the team's sit left on
   the raised surface behind the green service rail (the announcements card's
   rail). Unread chip wears the RED count-badge idiom (.vosyn-hd-belln /
   .vosyn-widget-count family), not magenta: white-on-#d326c5 measured 4.33:1
   and failed the 4.5 floor; white-on-#d63638 measures 4.73:1. The scroller
   opens at the newest message via the column-reverse anchor (single flex
   child keeps the oldest→newest DOM order) — no JS. Consecutive same-sender
   bubbles pull together (-6px against the 12px gap) so exchanges read as
   turns, not a list. */
.vosyn-dash-messages .vosyn-dash-cardhead { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.vosyn-msg-new {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    background: #d63638; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.vosyn-msg-notice { border-radius: 10px; padding: 10px 14px; font-size: .85rem; margin: 0 0 14px; color: var(--d-text, #f7f9ff); }
.vosyn-msg-notice.is-ok { background: rgba(0, 208, 132, .12); border: 1px solid rgba(0, 208, 132, .35); border-left: 3px solid var(--d-green, #00d084); }
.vosyn-msg-notice.is-error { background: rgba(248, 113, 113, .12); border: 1px solid rgba(248, 113, 113, .35); border-left: 3px solid #f87171; }
/* Empty state: a framed invitation, not an apology — same copy, dressed. */
.vosyn-dash .vosyn-dash-messages > .vosyn-dash-muted {
    border: 1px dashed var(--d-border, rgba(156,163,175,.22)); border-radius: 12px;
    background: rgba(255, 255, 255, .03); padding: 18px 20px; margin: 0 0 16px; line-height: 1.6;
}
.vosyn-msg-scroll {
    max-height: 360px; overflow-y: auto; display: flex; flex-direction: column-reverse;
    margin: 0 0 16px; padding-right: 6px;
    scrollbar-width: thin; scrollbar-color: rgba(156, 163, 175, .35) transparent;
}
.vosyn-msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vosyn-msg { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 11px; max-width: min(88%, 560px); }
.vosyn-msg.is-you { align-self: flex-end; background: rgba(95, 111, 216, .22); border: 1px solid rgba(124, 140, 248, .38); border-radius: 14px 14px 4px 14px; }
.vosyn-msg.is-team { align-self: flex-start; background: var(--d-elev2, #1f294a); border: 1px solid var(--d-border, rgba(255,255,255,.12)); border-left: 3px solid var(--d-green, #00d084); border-radius: 4px 14px 14px 14px; }
.vosyn-msg.is-you + .vosyn-msg.is-you, .vosyn-msg.is-team + .vosyn-msg.is-team { margin-top: -6px; }
.vosyn-msg-meta { font-size: .74rem; color: var(--d-muted, #9ca3af); }
.vosyn-msg.is-you .vosyn-msg-meta { text-align: right; }
/* Sender names in identity colours (measured on their own bubbles: indigo
   5.99:1, green 7.02:1); the timestamp stays muted (4.86:1 / 5.61:1). */
.vosyn-msg.is-you .vosyn-msg-meta strong { color: #a5b0fa; }
.vosyn-msg.is-team .vosyn-msg-meta strong { color: var(--d-green, #00d084); }
.vosyn-msg-body { line-height: 1.5; overflow-wrap: anywhere; }
.vosyn-msg-form textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 74px; border-radius: 12px;
    background: var(--d-elev2, #1f294a); border: 1px solid var(--d-border, rgba(156,163,175,.22));
    color: var(--d-text, #f7f9ff); padding: 12px 14px; line-height: 1.5;
}
.vosyn-msg-form textarea::placeholder { color: var(--d-muted, #9ca3af); opacity: 1; }
/* Three classes on purpose: the child theme re-darkens dashboard textareas
   at (0,2,1) from a later sheet, which ties-and-beats a two-class focus
   rule — the ring never showed. (0,3,1) wins the border back on focus. */
.vosyn-dash .vosyn-msg-form textarea:focus {
    outline: none; border-color: var(--d-magenta, #d326c5);
    box-shadow: 0 0 0 3px rgba(211, 38, 197, .22);
}
.vosyn-msg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.vosyn-msg-foot .vosyn-dash-muted { font-size: .78rem; flex: 1 1 220px; }
@media (prefers-reduced-motion: no-preference) {
    .vosyn-msg-form textarea { transition: border-color .15s ease, box-shadow .15s ease; }
}

/* ==========================================================================
   SCHEDULING OPERATIONS COMMAND CENTRE (work order 2026-07-25) — the GDS &
   Kickoff screen. Dark module in the admin dashboard's token family, scoped
   to .vosyn-sched only; other console worksheets keep their light theme.
   Rollback: revert this block (single commit; see changelog).
   ========================================================================== */

/* The --sc-* palette is declared for EVERY screen that renders .vosyn-sched-*
   components, not just .vosyn-sched itself. The Templates screen opens as
   ".wrap vosyn-darkmod vosyn-tpl" (TemplateEditorPage::render) and reuses the
   status pills; while the tokens were scoped to .vosyn-sched alone, every
   "color: var(--sc-crit)" on that screen was invalid-at-computed-value-time
   and fell back to the inherited link colour — so "Blocked" and "Ready" both
   rendered the same indigo and the health signal was unreadable across 37
   cards. Tokens here, the scheduler's own card chrome below. */
.vosyn-sched,
.vosyn-tpl {
    --sc-bg: #0a0f22;
    --sc-card: #121936;
    --sc-raised: #1a2347;
    --sc-border: #232e56;
    --sc-text: #e8ecf8;
    --sc-muted: #98a2c2;
    --sc-accent: #7c8cf8;
    --sc-accent-strong: #5f6fd8;
    --sc-gds: #a78bfa;      /* purple = GDS (work order §4) */
    --sc-kick: #60a5fa;     /* blue = Kickoff */
    --sc-ok: #34d399;
    --sc-warn: #fbbf24;
    --sc-crit: #f87171;
}
.vosyn-sched {
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: 16px;
    padding: 22px 24px 26px;
    color: var(--sc-text);
    max-width: none;
}
.vosyn-sched h1, .vosyn-sched h2, .vosyn-sched h3 { color: var(--sc-text); }
.vosyn-sched a { text-decoration: none; }
.vosyn-sched-notice { margin: 0 0 14px !important; }

/* head */
.vosyn-sched-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.vosyn-sched-head h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; padding: 0; }
.vosyn-sched-sub { margin: 0; color: var(--sc-muted); font-size: .85rem; }
.vosyn-sched-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* buttons */
.vosyn-sched-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--sc-raised); border: 1px solid var(--sc-border); border-radius: 9px;
    color: var(--sc-text) !important; font-size: .8rem; font-weight: 700; padding: 8px 14px; line-height: 1;
}
.vosyn-sched-btn:hover { border-color: var(--sc-accent-strong); }
.vosyn-sched-btn.is-primary { background: #7c3aed; border-color: transparent; color: #fff !important; }
.vosyn-sched-btn.is-primary:hover { background: #8b5cf6; }
.vosyn-sched-btn.is-primary.is-kick { background: #2563eb; }
.vosyn-sched-btn.is-primary.is-kick:hover { background: #3b82f6; }

/* tabs */
.vosyn-sched-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sc-border); margin: 14px 0 16px; flex-wrap: wrap; }
.vosyn-sched-tab {
    padding: 9px 16px; color: var(--sc-muted); font-size: .84rem; font-weight: 700;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.vosyn-sched-tab:hover { color: var(--sc-text); }
.vosyn-sched-tab.is-active { color: #fff; border-bottom-color: var(--sc-accent); }
.vosyn-sched-tabbadge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    background: #d63638; color: #fff; border-radius: 999px; font-size: .66rem; font-weight: 800;
}

/* KPI chips */
.vosyn-sched-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.vosyn-sched-kpi {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
    background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: 12px;
}
.vosyn-sched-kpi:hover { border-color: var(--sc-accent-strong); }
.vosyn-sched-kpi-label { color: var(--sc-muted); font-size: .7rem; font-weight: 700; }
.vosyn-sched-kpi-n { color: var(--sc-text); font-size: 1.5rem; font-weight: 800; line-height: 1; }
.vosyn-sched-kpi-sub { color: var(--sc-muted); font-size: .66rem; line-height: 1.35; }
.vosyn-sched-kpi.is-kick .vosyn-sched-kpi-n { color: var(--sc-kick); }
.vosyn-sched-kpi.is-warn { border-color: rgba(251,191,36,.5); } .vosyn-sched-kpi.is-warn .vosyn-sched-kpi-n { color: var(--sc-warn); }
.vosyn-sched-kpi.is-crit { border-color: rgba(248,113,113,.55); } .vosyn-sched-kpi.is-crit .vosyn-sched-kpi-n { color: var(--sc-crit); }
.vosyn-sched-kpi.is-ok .vosyn-sched-kpi-n { color: var(--sc-ok); }

/* layout */
.vosyn-sched-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vosyn-sched-main, .vosyn-sched-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vosyn-sched-card { background: var(--sc-card); border: 1px solid var(--sc-border); border-radius: 14px; padding: 16px 18px; }
.vosyn-sched-h2 { margin: 0 0 12px; font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.vosyn-sched-empty { color: var(--sc-muted); font-size: .85rem; margin: 4px 0; }
.vosyn-sched-note { color: var(--sc-muted); font-size: .74rem; line-height: 1.5; margin: 10px 0 0; }
.vosyn-sched-muted { color: var(--sc-muted); }

/* agenda */
.vosyn-sched-day {
    margin: 16px 0 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--sc-muted); display: flex; align-items: center; gap: 8px;
    position: sticky; top: 0; background: var(--sc-card); padding: 6px 0; z-index: 5;
}
.vosyn-sched-day:first-of-type { margin-top: 0; }
.vosyn-sched-day.is-crit { color: var(--sc-crit); }
.vosyn-sched-daycount {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--sc-raised); border: 1px solid var(--sc-border); border-radius: 999px;
    color: var(--sc-text); font-size: .68rem;
}
.vosyn-sched-daydate { text-transform: none; letter-spacing: 0; font-weight: 600; }
.vosyn-sched-session {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--sc-raised); border: 1px solid var(--sc-border); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 8px;
}
.vosyn-sched-session.is-at_risk { border-color: rgba(251,191,36,.45); }
.vosyn-sched-session.is-followup { border-color: rgba(248,113,113,.5); }
.vosyn-sched-session.is-cancelled { opacity: .55; }
.vosyn-sched-type {
    flex: 0 0 auto; display: inline-grid; place-items: center; padding: 6px 10px; border-radius: 9px;
    background: rgba(167,139,250,.15); color: var(--sc-gds); font-size: .7rem; font-weight: 800; letter-spacing: .03em;
}
.vosyn-sched-type.is-kick { background: rgba(96,165,250,.15); color: var(--sc-kick); }
/* DEMO fixture marker (2026-08-12). A fixture is not coverage — the hire path
   never binds a real candidate to it — so the operator must be able to see
   which row is the reason the gap warning fires.
   Two rulings are pinned in this block:
   (a) NEUTRAL, not amber. Colour on this screen belongs to health (amber At
       Risk, red Follow-up, green Ready); a second amber chip competed with the
       pill it sits beside. "Not real" reads as dashed + slate instead.
   (b) The chip never costs its container a line. On the card it stacks under
       the type pill inside .vosyn-sched-typecol; in the table it stacks under
       the pill and the row's padding gives back the height it takes. */
.vosyn-sched-typecol { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
.vosyn-sched-demo {
    display: block; padding: 3px 6px; border-radius: 7px; text-align: center;
    background: rgba(152,162,194,.13); color: #ccd4ec;
    border: 1px dashed rgba(152,162,194,.5);
    font-size: .58rem; font-weight: 800; letter-spacing: .11em; line-height: 1.15; cursor: help;
}
.vosyn-sched-demo:hover { background: rgba(152,162,194,.22); border-color: rgba(203,212,236,.8); color: #fff; }
/* The card cools down as a whole: dashed slate edge instead of the readiness
   colour (the readiness pill still states it in words) plus a faint hatch, so
   a fixture never reads as a live session at a glance. */
.vosyn-sched-session.is-demo {
    border-style: dashed;
    border-color: rgba(152,162,194,.42);
    background-image: repeating-linear-gradient(135deg, rgba(152,162,194,.032) 0 6px, rgba(152,162,194,0) 6px 15px);
}
.vosyn-sched-session.is-demo .vosyn-sched-session-stats strong { color: var(--sc-muted); font-weight: 700; }
/* Table: chip under the pill, and the demo row trades cell padding for the
   height the chip takes so it stays level with its neighbours. */
.vosyn-sched-table .vosyn-sched-demo { width: max-content; margin: 3px 0 0; padding: 1px 5px; font-size: .6rem; border-radius: 6px; }
.vosyn-sched-viewrow.is-demo { background: rgba(152,162,194,.07); }
.vosyn-sched-viewrow.is-demo td { padding-top: 5px; padding-bottom: 5px; }
.vosyn-sched .vosyn-sched-table tr.vosyn-sched-viewrow.is-demo td:first-child {
    border-left: 3px dashed rgba(152,162,194,.5); padding-left: 5px;
}
.vosyn-sched-session-main { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; line-height: 1.35; min-width: 0; }
.vosyn-sched-session-main strong { font-size: .9rem; }
.vosyn-sched-session-main small { color: var(--sc-muted); font-size: .74rem; }
.vosyn-sched-unassigned { color: var(--sc-warn); font-weight: 700; }
.vosyn-sched-session-stats { display: flex; gap: 14px; color: var(--sc-muted); font-size: .74rem; flex: 0 0 auto; }
.vosyn-sched-session-stats strong { color: var(--sc-text); font-size: .95rem; }
.vosyn-sched-state {
    flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; cursor: help;
}
.vosyn-sched-state.is-ok { background: rgba(52,211,153,.14); color: var(--sc-ok); }
.vosyn-sched-state.is-warn { background: rgba(251,191,36,.14); color: var(--sc-warn); }
.vosyn-sched-state.is-crit { background: rgba(248,113,113,.15); color: var(--sc-crit); }
.vosyn-sched-state.is-muted { background: rgba(152,162,194,.12); color: var(--sc-muted); }
.vosyn-sched-session-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* table */
.vosyn-sched-scroll { overflow-x: auto; }
.vosyn-sched-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.vosyn-sched-table th {
    text-align: left; color: var(--sc-muted); font-size: .66rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; padding: 8px 8px; border-bottom: 1px solid var(--sc-border);
}
.vosyn-sched-table td { padding: 9px 8px; border-bottom: 1px solid rgba(35,46,86,.6); color: var(--sc-text); vertical-align: middle; }
.vosyn-sched-table tr:last-child td { border-bottom: 0; }
.vosyn-sched-table a { color: var(--sc-accent); }
.vosyn-sched-editform { display: flex; gap: 6px; flex-wrap: wrap; }
.vosyn-sched-editform input, .vosyn-sched-editform select,
.vosyn-sched-addform input, .vosyn-sched-addform select {
    background: #0f1530; border: 1px solid var(--sc-border); color: var(--sc-text);
    border-radius: 8px; padding: 7px 9px; font-size: .78rem; min-height: 34px;
}
.vosyn-sched-editform input[name="timezone"] { width: 150px; }
.vosyn-sched-editform input[name="link"] { flex: 1 1 170px; min-width: 0; }
.vosyn-sched-editform input::placeholder, .vosyn-sched-addform input::placeholder { color: #6b7699; }

/* Kick-Off BUG_11/12 (IT report 5 Aug): Edit/Review anchors used to land
   underneath the fixed WP admin bar, forcing a manual scroll-up. Every anchor
   target on this screen now reserves headroom for it. */
.vosyn-sched [id^="sched-row-"], .vosyn-sched [id^="sched-view-"],
.vosyn-sched [id^="sched-add-"], #sched-attendance, #sched-past, #roster { scroll-margin-top: 56px; }

/* S-4 (6 Aug): the row shows, the Edit row edits. The editor row is hidden
   until its anchor is targeted (card Edit buttons, attention-rail links and
   the row's own Edit all navigate to it). Close navigates to the view row,
   which clears :target without moving the viewport. */
.vosyn-sched-editrow { display: none; }
.vosyn-sched-editrow:target { display: table-row; }
/* QA 5 Aug BUG_07: the native fragment jump parks the target flush against
   the top of the viewport, which on the console puts it under the sticky
   header. Kept even though the script scrolls explicitly — this is the
   fallback whenever the browser gets there first. */
.vosyn-sched-editrow { scroll-margin-top: 96px; scroll-margin-bottom: 96px; }
.vosyn-sched-editrow td { background: rgba(35,46,86,.35); border-left: 3px solid var(--sc-accent); }
.vosyn-sched-linkstate.is-set { color: #4cd7a4; font-weight: 700; white-space: nowrap; }
.vosyn-sched-linkstate.is-missing { color: #ffb454; font-weight: 700; white-space: nowrap; }
.vosyn-sched-rowstatus { text-transform: uppercase; font-size: .68rem; font-weight: 800; letter-spacing: .05em; }
.vosyn-sched-rowstatus.is-active { color: #4cd7a4; }
.vosyn-sched-rowstatus.is-past { color: var(--sc-muted); }
.vosyn-sched-rowstatus.is-cancelled { color: #ff7d6b; }

/* S-2 (6 Aug): past sessions fold away instead of padding the table. */
.vosyn-sched-past summary {
    cursor: pointer; color: var(--sc-muted); font-size: .78rem; font-weight: 700;
    padding: 10px 4px; user-select: none;
}
.vosyn-sched-past summary:hover { color: var(--sc-text); }
.vosyn-sched-past[open] summary { border-bottom: 1px solid var(--sc-border); margin-bottom: 6px; }
.vosyn-sched-exportrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }

/* attendance desk */
.vosyn-sched-attendance { display: flex; flex-direction: column; gap: 4px; }
.vosyn-sched-attendance label {
    display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px;
    background: var(--sc-raised); border: 1px solid var(--sc-border); font-size: .82rem; color: var(--sc-text);
}
.vosyn-sched-attendance label small { color: var(--sc-muted); }
.vosyn-sched-attendance input[type="checkbox"] { accent-color: #7c3aed; }

/* rail: attention queue */
.vosyn-sched-attnlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vosyn-sched-attnlist li {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--sc-raised); border: 1px solid var(--sc-border); border-left-width: 3px; border-radius: 10px;
}
.vosyn-sched-attnlist li.is-warn { border-left-color: var(--sc-warn); }
.vosyn-sched-attnlist li.is-crit { border-left-color: var(--sc-crit); }
.vosyn-sched-attnmain { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vosyn-sched-attnmain strong { font-size: .8rem; }
.vosyn-sched-attnmain small { color: var(--sc-muted); font-size: .7rem; }

/* rail: hosts */
.vosyn-sched-hosts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vosyn-sched-hosts li { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--sc-text); }
.vosyn-sched-hosts li strong { margin-left: auto; color: var(--sc-muted); font-weight: 600; font-size: .76rem; }
.vosyn-sched-hosts li.is-warn, .vosyn-sched-hosts li.is-warn strong { color: var(--sc-warn); }
.vosyn-sched-hostdot {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 28px;
    background: linear-gradient(135deg, #5f6fd8, #7c3aed); color: #fff; font-weight: 800; font-size: .74rem;
}
.vosyn-sched-hosts li.is-warn .vosyn-sched-hostdot { background: var(--sc-raised); color: var(--sc-warn); border: 1px dashed var(--sc-warn); }

/* rail: week strip */
.vosyn-sched-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.vosyn-sched-weekday {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px;
    background: var(--sc-raised); border: 1px solid var(--sc-border); border-radius: 9px; min-height: 62px;
}
.vosyn-sched-weekday.is-today { border-color: var(--sc-accent); }
.vosyn-sched-weekday small { color: var(--sc-muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.vosyn-sched-weekday strong { font-size: .9rem; }
.vosyn-sched-weekday span { font-size: .66rem; color: var(--sc-muted); display: flex; align-items: center; gap: 3px; }
.vosyn-sched-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-gds); display: inline-block; }
.vosyn-sched-dot.is-kick { background: var(--sc-kick); }
.vosyn-sched-legend { color: var(--sc-muted); font-size: .68rem; margin: 8px 0 0; }

/* add forms */
.vosyn-sched-addrow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.vosyn-sched-add h3 { margin: 0 0 10px; font-size: .92rem; }
.vosyn-sched-addform { display: flex; flex-wrap: wrap; gap: 8px; }
.vosyn-sched-addform input[name="link"] { flex: 1 1 200px; }

/* roster (existing feature) gets the dark treatment inside this module */
.vosyn-sched + #roster, .vosyn-sched #roster { color: var(--sc-text); }

/* responsive */
@media (max-width: 1439px) {
    .vosyn-sched-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .vosyn-sched-grid, .vosyn-sched-addrow { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .vosyn-sched-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vosyn-sched { padding: 14px; }
    .vosyn-sched-session { flex-direction: column; align-items: stretch; }
    .vosyn-sched-session-actions { justify-content: flex-end; }
    /* The card turns into a column here, which turned the row-axis basis of
       .vosyn-sched-session-main (1 1 220px) into 220px of EMPTY HEIGHT in
       every card — a ~220px void between the host line and the readiness
       pill. On the column axis the block sizes to its text. */
    .vosyn-sched-session-main { flex: 0 1 auto; }
    /* Identity stays one bar: type fills it, DEMO caps it. */
    .vosyn-sched-typecol { flex-direction: row; gap: 6px; }
    .vosyn-sched-typecol .vosyn-sched-type { flex: 1 1 auto; }
    .vosyn-sched-typecol .vosyn-sched-demo { display: grid; place-items: center; padding: 3px 14px; }
}

/* ---------- console-worksheet reconciliation for the dark sched module ----
   The re-hosted screen shell (.vosyn-hrc-screen) paints a LIGHT worksheet and
   asserts text colours with !important — correct for the wp-admin tables it
   hosts, wrong inside this dark module. Rather than fighting each rule, the
   console TOKENS themselves are remapped to dark values inside .vosyn-sched,
   so every worksheet rule (headings, tables, inputs, roster card) resolves
   dark automatically. */
.vosyn-sched, .vosyn-darkmod {
    --vs-console-text: #e8ecf8;
    --vs-console-text-secondary: #b9c1dc;
    --vs-console-text-muted: #98a2c2;
    --vs-console-surface: #121936;
    --vs-console-surface-raised: #1a2347;
    --vs-console-border: #232e56;
    --vs-console-border-strong: #232e56;
    --vs-console-table-header: #0f1530;
    --vs-console-row-hover: #1d2750;
    --vs-console-link: #7c8cf8;
    --vs-console-link-strong: #a5b0fa;
    --vs-console-ok: #34d399;
    --vs-console-ok-tint: rgba(52, 211, 153, .12);
    --vs-console-warn: #fbbf24;
    --vs-console-warn-tint: rgba(251, 191, 36, .12);
    --vs-console-danger: #f87171;
}
/* The hosting shell around the module goes dark too (modern engines). */
.vosyn-hrc-screen:has(.vosyn-sched), .vosyn-hrc-screen:has(.vosyn-darkmod) {
    background: #0a0f22;
    border-color: #232e56;
}
/* Inputs/selects inside the module: dark regardless of worksheet control styling. */
.vosyn-sched input[type="text"], .vosyn-sched input[type="date"], .vosyn-sched input[type="url"],
.vosyn-sched input:not([type="checkbox"]):not([type="radio"]), .vosyn-sched select,
.vosyn-darkmod input:not([type="checkbox"]):not([type="radio"]), .vosyn-darkmod select, .vosyn-darkmod textarea {
    background: #0f1530 !important;
    border-color: #232e56 !important;
    color: #e8ecf8 !important;
}
.vosyn-sched ::placeholder, .vosyn-darkmod ::placeholder { color: #6b7699 !important; }
/* Table chrome: transparent over the module's own card. */
.vosyn-sched .vosyn-sched-table,
.vosyn-sched .vosyn-sched-table th,
.vosyn-sched .vosyn-sched-table td { background: transparent !important; border-left: 0; border-right: 0; }
.vosyn-sched .vosyn-sched-table thead th { background: #0f1530 !important; }
.vosyn-sched .vosyn-sched-table tbody tr:hover { background: #1d2750 !important; }
/* Primary CTAs keep white labels no matter what link rules assert. */
.vosyn-sched .vosyn-sched-btn { color: #e8ecf8 !important; }
.vosyn-sched .vosyn-sched-btn.is-primary { color: #fff !important; }
/* Muted/status text inside the module resolves via the remapped tokens, but
   the module's own semantic classes must keep their colours. */
.vosyn-sched .vosyn-sched-kpi-label, .vosyn-sched .vosyn-sched-kpi-sub,
.vosyn-sched .vosyn-sched-sub, .vosyn-sched .vosyn-sched-note,
.vosyn-sched .vosyn-sched-empty, .vosyn-sched .vosyn-sched-muted { color: #98a2c2 !important; }
.vosyn-sched .vosyn-sched-kpi-n { color: #e8ecf8 !important; }
.vosyn-sched .vosyn-sched-kpi.is-warn .vosyn-sched-kpi-n { color: #fbbf24 !important; }
.vosyn-sched .vosyn-sched-kpi.is-crit .vosyn-sched-kpi-n { color: #f87171 !important; }
.vosyn-sched .vosyn-sched-kpi.is-ok .vosyn-sched-kpi-n { color: #34d399 !important; }
.vosyn-sched .vosyn-sched-kpi.is-kick .vosyn-sched-kpi-n { color: #60a5fa !important; }
.vosyn-sched .vosyn-sched-state.is-ok { color: #34d399 !important; }
.vosyn-sched .vosyn-sched-state.is-warn { color: #fbbf24 !important; }
.vosyn-sched .vosyn-sched-state.is-crit { color: #f87171 !important; }
.vosyn-sched .vosyn-sched-unassigned { color: #fbbf24 !important; }
.vosyn-sched .vosyn-sched-attnmain strong { color: #e8ecf8 !important; }
.vosyn-sched .vosyn-sched-attnmain small { color: #98a2c2 !important; }

/* ==========================================================================
   MESSAGE TEMPLATE OPERATIONS (work order 2026-07-25) — .vosyn-tpl module.
   Rides the .vosyn-darkmod token remap; borrows .vosyn-sched primitives
   (buttons, tabs, chips, states, tables, cards) so the modules stay one
   family. Rollback: revert this block.
   ========================================================================== */

.vosyn-tpl {
    background: #0a0f22;
    border: 1px solid #232e56;
    border-radius: 16px;
    padding: 22px 24px 26px;
    color: #e8ecf8;
    max-width: none;
}
.vosyn-tpl a { text-decoration: none; }

.vosyn-tpl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.vosyn-tpl-head h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 800; padding: 0; color: #e8ecf8 !important; }
.vosyn-tpl-sub { margin: 0; color: #98a2c2 !important; font-size: .85rem; }
.vosyn-tpl-sub code { color: #98a2c2; background: #1a2347; border-radius: 5px; padding: 1px 6px; }
.vosyn-tpl-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.vosyn-tpl-crumb { margin: 0 0 6px; font-size: .78rem; }
.vosyn-tpl-crumb a { color: #7c8cf8 !important; }
.vosyn-tpl-notice { margin: 0 0 14px !important; }

/* summary cards */
.vosyn-tpl-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.vosyn-tpl-card {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
    background: #121936; border: 1px solid #232e56; border-radius: 12px;
}
.vosyn-tpl-card:hover { border-color: #5f6fd8; }
.vosyn-tpl-card-label { color: #98a2c2 !important; font-size: .7rem; font-weight: 700; }
.vosyn-tpl-card-n { color: #e8ecf8 !important; font-size: 1.5rem; font-weight: 800; line-height: 1; }
.vosyn-tpl-card-sub { color: #98a2c2 !important; font-size: .66rem; line-height: 1.35; }
.vosyn-tpl-card.is-warn { border-color: rgba(251,191,36,.5); } .vosyn-tpl-card.is-warn .vosyn-tpl-card-n { color: #fbbf24 !important; }
.vosyn-tpl-card.is-crit { border-color: rgba(248,113,113,.55); } .vosyn-tpl-card.is-crit .vosyn-tpl-card-n { color: #f87171 !important; }
.vosyn-tpl-card.is-ok .vosyn-tpl-card-n { color: #34d399 !important; }

/* filters */
.vosyn-tpl-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.vosyn-tpl-filters input[type="search"] { flex: 1 1 260px; min-width: 0; }
.vosyn-tpl-filters input, .vosyn-tpl-filters select { border-radius: 8px; padding: 7px 10px; font-size: .8rem; min-height: 36px; }

/* attention strip */
.vosyn-tpl-attn {
    background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.35); border-radius: 10px;
    padding: 10px 14px; margin: 0 0 12px; font-size: .82rem; color: #fbbf24;
}
.vosyn-tpl-attn a { color: #fbbf24 !important; text-decoration: underline; }

/* table */
.vosyn-tpl-table td { height: 52px; }
.vosyn-tpl-name a { display: flex; flex-direction: column; line-height: 1.3; }
.vosyn-tpl-name strong { color: #e8ecf8; font-size: .86rem; }
.vosyn-tpl-name small { color: #98a2c2; font-size: .7rem; }
.vosyn-tpl-name a:hover strong { color: #7c8cf8; }
.vosyn-tpl-trigger { color: #b9c1dc; font-size: .78rem; }
.vosyn-tpl-fail { color: #f87171; font-weight: 700; font-size: .74rem; }
.vosyn-tpl-actions { text-align: right; white-space: nowrap; }
.vosyn-chip.is-info { background: rgba(96,165,250,.15); color: #60a5fa; }
.vosyn-chip.is-ok { background: rgba(52,211,153,.14); color: #34d399; }
.vosyn-chip.is-warn { background: rgba(251,191,36,.14); color: #fbbf24; }
.vosyn-chip.is-muted { background: rgba(152,162,194,.12); color: #98a2c2; }

/* workflow map */
.vosyn-tpl-maphead { margin: 18px 0 10px; font-size: .95rem; font-weight: 800; color: #e8ecf8 !important; }
.vosyn-tpl-mapgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vosyn-tpl-mapcard {
    display: flex; flex-direction: column; gap: 5px; padding: 12px 14px;
    background: #121936; border: 1px solid #232e56; border-radius: 12px;
}
.vosyn-tpl-mapcard:hover { border-color: #5f6fd8; }
.vosyn-tpl-mapcard.is-flagged { border-color: rgba(248,113,113,.5); }
.vosyn-tpl-mapkind { color: #7c8cf8; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vosyn-tpl-mapcard strong { color: #e8ecf8; font-size: .84rem; }
.vosyn-tpl-mapcard small { color: #98a2c2 !important; font-size: .72rem; line-height: 1.4; }
.vosyn-tpl-mapmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.vosyn-tpl-mapmeta code { color: #6b7699; font-size: .68rem; background: transparent; margin-left: auto; }

/* editor workspace */
.vosyn-tpl-editor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vosyn-tpl-editmain, .vosyn-tpl-editrail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vosyn-tpl-form label { display: block; color: #98a2c2 !important; font-size: .74rem; font-weight: 700; margin-bottom: 3px; }
.vosyn-tpl-form input.large-text, .vosyn-tpl-form textarea.large-text { width: 100%; }
.vosyn-tpl-vars { line-height: 2.1; }
.vosyn-tpl-var {
    cursor: pointer; margin-right: 6px; background: #1a2347; border: 1px solid #232e56;
    border-radius: 6px; padding: 2px 7px; font-size: .72rem; color: #a5b0fa;
}
.vosyn-tpl-var:hover { border-color: #5f6fd8; color: #fff; }
.vosyn-hrc-screen .vosyn-tpl-ok, .vosyn-tpl-ok { color: #34d399 !important; font-weight: 700; font-size: .85rem; margin: 0; }
.vosyn-tpl-blockedline { color: #f87171; font-weight: 700; font-size: .8rem; }
.vosyn-tpl-issues { margin: 8px 0 0 18px; color: #fbbf24; font-size: .8rem; }
.vosyn-tpl-issues li { margin-bottom: 4px; }
.vosyn-tpl-adv { margin-top: 10px; color: #6b7699; font-size: .74rem; }
.vosyn-tpl-adv summary { cursor: pointer; }
.vosyn-tpl-adv code { color: #98a2c2; }
.vosyn-tpl-uses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .8rem; color: #e8ecf8; }

/* candidate-facing preview stays on a LIGHT canvas (work order §7) */
.vosyn-tpl-preview {
    background: #ffffff; border-radius: 10px; padding: 14px 16px; color: #1f2430;
    border: 1px solid #d9dce6;
}
/* The preview card is a LIGHT island inside the dark console, so its text
   colours must survive the console's own dark-surface rule. That rule
   (.vosyn-hrc-screen p, li, td … { color: var(--vs-console-text) !important })
   is class+element = 0-1-1; these were plain single-class = 0-1-0, so it beat
   them even though both carry !important — and the From/To line and the whole
   SUBJECT rendered near-white on white at 1.18:1, unreadable, on EVERY
   template preview in the catalogue. The body survived only by being a <div>,
   which that selector list happens not to name.
   Prefixing with .vosyn-hrc-screen makes these 0-2-0, which outranks 0-1-1 on
   class count. Same reason the success tick above is prefixed.
   Measured after the change, not assumed: meta 5.74:1, subject 17.74:1.
   ui-verifier finding, 12 Aug — the same shape as the invisible terms card. */
.vosyn-hrc-screen .vosyn-tpl-preview-meta,
.vosyn-tpl-preview-meta { margin: 0 0 6px; color: #6b7280 !important; font-size: .7rem; }
.vosyn-hrc-screen .vosyn-tpl-preview-subject,
.vosyn-tpl-preview-subject { margin: 0 0 10px; font-weight: 800; font-size: .92rem; color: #111827 !important; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; }
.vosyn-hrc-screen .vosyn-tpl-preview-body,
.vosyn-tpl-preview-body { font-size: .82rem; line-height: 1.6; color: #1f2430 !important; }
.vosyn-tpl-testform { margin: 12px 0 0; }
.vosyn-tpl-delete { border-color: rgba(248,113,113,.55) !important; color: #f87171 !important; }
.vosyn-tpl-delete:hover { background: rgba(248,113,113,.12); }

@media (max-width: 1200px) {
    .vosyn-tpl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vosyn-tpl-mapgrid { grid-template-columns: 1fr 1fr; }
    .vosyn-tpl-editor { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .vosyn-tpl { padding: 14px; }
    .vosyn-tpl-cards { grid-template-columns: 1fr 1fr; }
    .vosyn-tpl-mapgrid { grid-template-columns: 1fr; }
}

/* ---------- Dashboard v2 (operator mock 2026-07-25) ---------- */
.vosyn-kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vosyn-kpi-spark { width: 100%; height: 28px; margin-top: 6px; color: #7c8cf8; opacity: .85; }
.vosyn-kpi.is-ok .vosyn-kpi-spark { color: #34d399; }
.vosyn-kpi.is-crit .vosyn-kpi-spark { color: #f87171; }

.vosyn-funnel-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding: 4px 0 0; }
.vosyn-funnel-col {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 5px; height: 100%; min-width: 0;
}
.vosyn-funnel-col strong { color: var(--ud-text, #e8ecf8); font-size: .92rem; }
.vosyn-funnel-bar {
    display: block; width: 70%; border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #a78bfa, #5f6fd8);
}
.vosyn-funnel-col small { color: var(--ud-muted, #98a2c2); font-size: .62rem; text-align: center; line-height: 1.25; min-height: 2.6em; }
.vosyn-funnel-conv { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6b7699; font-size: .7rem; flex: 0 0 auto; padding-bottom: 40px; }
.vosyn-funnel-conv span { color: var(--ud-ok, #34d399); font-weight: 800; font-size: .72rem; }

.vosyn-trend-chart { width: 100%; height: 150px; }
.vosyn-trend-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; color: var(--ud-muted, #98a2c2); font-size: .72rem; }
.vosyn-trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.vosyn-trend-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.vosyn-src-barcell { min-width: 70px; }

@media (max-width: 1439px) {
    .vosyn-kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .vosyn-kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vosyn-funnel-conv { display: none; }
}

/* ---------- gap-free dashboard reflow (operator 2026-07-25) ---------- */
.vosyn-udash-cols {
    display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr);
    gap: 18px; align-items: start;
}
.vosyn-udash-maincol, .vosyn-udash-sidecol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vosyn-udash-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.vosyn-udash-2col > .vosyn-widget { height: 100%; box-sizing: border-box; }
@media (max-width: 1250px) {
    .vosyn-udash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    .vosyn-udash-2col { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CHANGE REQUESTS — GOVERNANCE INBOX (work order 2026-07-25). Rides the
   .vosyn-darkmod token remap + .vosyn-tpl/.vosyn-sched primitives.
   Calmer than the dashboard by design: a review surface, not a cockpit.
   ========================================================================== */

.vosyn-cr {
    background: #0a0f22; border: 1px solid #232e56; border-radius: 16px;
    padding: 22px 24px 26px; color: #e8ecf8; max-width: none;
}
.vosyn-cr a { text-decoration: none; }
.vosyn-cr-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* detail layout: reading pane + governance rail */
.vosyn-cr-detail { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.vosyn-cr-main, .vosyn-cr-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.vosyn-cr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0 0 12px; }
.vosyn-cr-facts dt { color: #98a2c2; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.vosyn-cr-facts dd { margin: 0; color: #e8ecf8; font-size: .84rem; }
.vosyn-cr-facts dd.is-overdue { color: #f87171; font-weight: 700; }
.vosyn-cr-rationale { color: #b9c1dc; font-size: .84rem; line-height: 1.55; margin: 8px 0 0; }
.vosyn-cr-rationale strong { color: #e8ecf8; }

/* diff */
.vosyn-cr-diffhead { margin: 16px 0 8px; font-size: .82rem; font-weight: 800; color: #e8ecf8 !important; display: flex; align-items: center; gap: 10px; }
.vosyn-cr-diffstats { font-weight: 700; font-size: .72rem; }
.vosyn-cr-diffstats .is-add { color: #34d399; }
.vosyn-cr-diffstats .is-del { color: #f87171; }
.vosyn-cr-diff {
    background: #0f1530; border: 1px solid #232e56; border-radius: 10px;
    padding: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .76rem; line-height: 1.55; overflow-x: auto;
}
.vosyn-cr-diffline { margin: 0; padding: 1px 14px; white-space: pre-wrap; word-break: break-word; color: #98a2c2; }
.vosyn-cr-diffline.is-add { background: rgba(52, 211, 153, .1); color: #6ee7b7; }
.vosyn-cr-diffline.is-del { background: rgba(248, 113, 113, .1); color: #fca5a5; text-decoration: line-through; text-decoration-color: rgba(252, 165, 165, .5); }

/* validation banner */
.vosyn-cr-validation.is-blocked {
    background: rgba(248, 113, 113, .09); border: 1px solid rgba(248, 113, 113, .4);
    border-radius: 10px; padding: 12px 16px; margin: 10px 0; color: #fca5a5; font-size: .82rem;
}
.vosyn-cr-validation.is-blocked ul { margin: 8px 0 8px 18px; }

/* discussion + timeline */
.vosyn-cr-comments { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vosyn-cr-comments li { background: #1a2347; border: 1px solid #232e56; border-radius: 10px; padding: 9px 13px; }
.vosyn-cr-comments strong { color: #e8ecf8; font-size: .8rem; }
.vosyn-cr-comments small { color: #6b7699; font-size: .68rem; margin-left: 8px; }
.vosyn-cr-comments p { margin: 4px 0 0; color: #b9c1dc; font-size: .82rem; line-height: 1.5; }
.vosyn-cr-commentform { display: flex; gap: 8px; }
.vosyn-cr-commentform input[type="text"] { flex: 1 1 auto; min-width: 0; border-radius: 8px; padding: 8px 11px; font-size: .8rem; }

.vosyn-cr-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.vosyn-cr-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: #232e56; }
.vosyn-cr-timeline li { display: flex; gap: 12px; padding: 6px 0; position: relative; }
.vosyn-cr-dot { width: 12px; height: 12px; border-radius: 50%; background: #5f6fd8; border: 2px solid #0a0f22; flex: 0 0 12px; margin-top: 3px; z-index: 1; }
.vosyn-cr-timeline strong { display: block; color: #e8ecf8; font-size: .8rem; }
.vosyn-cr-timeline small { color: #6b7699; font-size: .68rem; }

/* action bar */
.vosyn-cr-actionbar {
    position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #0d1329; border: 1px solid #232e56; border-radius: 12px;
    padding: 12px 16px; margin-top: 4px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}
.vosyn-cr-decideform { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; }
.vosyn-cr-notefield { flex: 1 1 240px; min-width: 0; border-radius: 8px; padding: 9px 12px; font-size: .8rem; }
.vosyn-cr-actionnote { margin: 0; color: #98a2c2; font-size: .8rem; font-style: italic; }
.vosyn-cr-revise summary { list-style: none; cursor: pointer; display: inline-flex; }
.vosyn-cr-revise summary::-webkit-details-marker { display: none; }
.vosyn-cr-revise[open] { flex: 1 1 100%; }
.vosyn-cr-reviseform { margin-top: 12px; background: #121936; border: 1px solid #232e56; border-radius: 10px; padding: 14px 16px; }
.vosyn-cr-reviseform label { display: block; color: #98a2c2; font-size: .72rem; font-weight: 700; margin-bottom: 3px; }

/* creation */
.vosyn-cr-createcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

@media (max-width: 1200px) {
    .vosyn-cr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vosyn-cr-detail, .vosyn-cr-createcols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .vosyn-cr { padding: 14px; }
    .vosyn-cr-cards { grid-template-columns: 1fr 1fr; }
    .vosyn-cr-facts { grid-template-columns: 1fr; }
}

/* ---------- header control fix (operator 2026-07-25) ----------
   The theme's global input styling painted the header's date fields white
   and left the select with a washed native gradient. The admin header owns
   its controls outright now — dark, bordered, consistent — and tells the
   browser the whole strip is dark-scheme so native pickers follow. */
.vosyn-hd { color-scheme: dark; }
.vosyn-hd input[type="date"],
.vosyn-hd input[type="search"],
.vosyn-hd select {
    background: #1a2347 !important;
    border: 1px solid #232e56 !important;
    color: #e8ecf8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    font-size: .82rem;
    min-height: 36px;
    padding: 6px 10px;
}
.vosyn-hd select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2398a2c2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
}
.vosyn-hd input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.75); }
.vosyn-hd-filters { align-items: flex-end; }
.vosyn-hd-filters label { gap: 4px; }
.vosyn-hd-apply { min-height: 36px; }

/* ==========================================================================
   REPORTS & ANALYTICS (work order 2026-07-25) — .vosyn-rpt module.
   ========================================================================== */
.vosyn-rpt {
    background: #0a0f22; border: 1px solid #232e56; border-radius: 16px;
    padding: 22px 24px 26px; color: #e8ecf8; max-width: none;
}
.vosyn-rpt a { text-decoration: none; }
.vosyn-rpt-controls {
    display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
    background: #0d1329; border: 1px solid #232e56; border-radius: 12px;
    padding: 12px 16px; margin-bottom: 8px; color-scheme: dark;
}
.vosyn-rpt-controls label { display: flex; flex-direction: column; gap: 4px; color: #98a2c2; font-size: .72rem; font-weight: 700; }
.vosyn-rpt-controls input, .vosyn-rpt-controls select { border-radius: 8px; padding: 7px 10px; font-size: .82rem; min-height: 36px; }
.vosyn-rpt-controls input[disabled] { opacity: .35; }
.vosyn-rpt-modeline { color: #98a2c2 !important; font-size: .76rem; margin: 0 0 4px; line-height: 1.5; }
.vosyn-rpt-modeline strong { color: #b9c1dc; }
.vosyn-rpt-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.vosyn-rpt-kpis .vosyn-tpl-card { cursor: help; }
.vosyn-rpt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.vosyn-rpt-lib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.vosyn-rpt-lib-q { color: #98a2c2 !important; font-size: .74rem; line-height: 1.45; }
.vosyn-rpt-libtitle { margin: 18px 0 12px; font-size: 1.15rem; font-weight: 800; color: #e8ecf8 !important; }
@media (max-width: 1300px) {
    .vosyn-rpt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vosyn-rpt-lib { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .vosyn-rpt-grid { grid-template-columns: 1fr; }
    .vosyn-rpt-kpis { grid-template-columns: 1fr 1fr; }
    .vosyn-rpt { padding: 14px; }
}

/* ==========================================================================
   UNIFIED ADMIN SHELL (operator 2026-07-25): one page surround, one sidebar,
   one header treatment across EVERY admin page. The light-era console
   surround (#26314F) and sidebar (#2E3A5C) are retokened to the dashboard's
   dark family, so screens still carrying light worksheets sit on the same
   shell as the rebuilt dark modules.
   ========================================================================== */
body.vosyn-console-body {
    --vs-console-bg: #070c1c;       /* page surround — one shade below modules */
    --vs-console-sidebar: #0d1329;  /* rail matches the header band */
}
body.vosyn-console-body .vosyn-adm-rail,
.vosyn-hrc .vosyn-adm-rail {
    background: #0d1329 !important;
    border: 1px solid #232e56 !important;
    border-radius: 14px;
}
body.vosyn-console-body .vosyn-adm-brand { color: #6b7699; }
body.vosyn-console-body a.vosyn-adm-rail-item {
    color: #b9c1dc !important;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    font-size: .875rem; font-weight: 600;
    border-left: 3px solid transparent;
}
body.vosyn-console-body a.vosyn-adm-rail-item:hover { background: #1a2347; color: #fff !important; }
body.vosyn-console-body a.vosyn-adm-rail-item.is-active {
    background: #1d2750; color: #fff !important;
    border-left-color: #34d399;
}
body.vosyn-console-body .vosyn-adm-railhead { color: #6b7699; }
/* The header band and the rail read as one chrome system. */
body.vosyn-console-body .vosyn-hd { border-radius: 0 0 14px 14px; }
/* Light worksheet screens (not yet rebuilt) keep their readable surface but
   sit on the unified surround; their card border matches the family. */
body.vosyn-console-body .vosyn-hrc-screen:not(:has(.vosyn-darkmod)):not(:has(.vosyn-sched)) {
    border-color: #232e56;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ==========================================================================
   ROLE CONFIGURATION STUDIO (work order 2026-07-25) — .vosyn-rb module.
   ========================================================================== */
.vosyn-rb {
    background: #0a0f22; border: 1px solid #232e56; border-radius: 16px;
    padding: 22px 24px 26px; color: #e8ecf8; max-width: none;
}
.vosyn-rb a { text-decoration: none; }
.vosyn-rb-savestate { color: #98a2c2; font-size: .74rem; align-self: center; }

/* start-from cards */
.vosyn-rb-startrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vosyn-rb-start h3 { margin: 0 0 6px; font-size: .92rem; color: #e8ecf8 !important; }
.vosyn-rb-start p { color: #98a2c2 !important; font-size: .78rem; line-height: 1.5; margin: 0 0 8px; }
.vosyn-rb-start.is-active { border-color: #5f6fd8; }
.vosyn-rb-start.is-muted { opacity: .65; }
.vosyn-rb-cloneform { display: flex; gap: 8px; }
.vosyn-rb-cloneform select { flex: 1 1 auto; min-width: 0; border-radius: 8px; }

/* stepper */
.vosyn-rb-stepper { display: flex; align-items: center; gap: 6px; margin: 4px 0 16px; flex-wrap: wrap; }
.vosyn-rb-stepnode {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    background: transparent; border: 0; padding: 6px 8px; border-radius: 10px; text-align: left;
}
.vosyn-rb-stepnode:hover { background: #121936; }
.vosyn-rb-stepnum {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 30px;
    background: #121936; border: 2px solid #232e56; color: #98a2c2; font-weight: 800; font-size: .8rem;
}
.vosyn-rb-stepnode.is-current .vosyn-rb-stepnum { background: linear-gradient(135deg, #5f6fd8, #7c3aed); border-color: transparent; color: #fff; }
.vosyn-rb-stepnode.is-done .vosyn-rb-stepnum { background: rgba(52,211,153,.15); border-color: #34d399; color: #34d399; }
.vosyn-rb-steplabel { display: flex; flex-direction: column; line-height: 1.2; }
.vosyn-rb-steplabel { color: #b9c1dc; font-size: .78rem; font-weight: 700; }
.vosyn-rb-stepnode.is-current .vosyn-rb-steplabel { color: #fff; }
.vosyn-rb-steplabel small { color: #6b7699; font-weight: 500; font-size: .66rem; }
.vosyn-rb-stepnode.is-done .vosyn-rb-steplabel small { color: #34d399; }
.vosyn-rb-stepline { flex: 1 1 12px; height: 2px; background: #232e56; min-width: 12px; }

/* 70/30 */
.vosyn-rb-cols { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.vosyn-rb-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vosyn-rb-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; position: sticky; top: 70px; }
.vosyn-rb-step { display: none; }
.vosyn-rb-step.is-active { display: block; }
.vosyn-rb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.vosyn-rb label { display: block; color: #98a2c2; font-size: .74rem; font-weight: 700; margin-bottom: 3px; }
.vosyn-rb input.large-text, .vosyn-rb textarea.large-text, .vosyn-rb select { width: 100%; border-radius: 8px; }
.vosyn-rb-namingrule { color: #34d399; font-size: .72rem; }
.vosyn-req { color: #f87171; }

/* standard-vs-custom */
.vosyn-rb-stdcustom { border: 1px solid #232e56; border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.vosyn-rb-stdcustom legend { color: #e8ecf8; font-weight: 800; font-size: .82rem; padding: 0 6px; }
.vosyn-rb-radio { display: flex !important; align-items: baseline; gap: 8px; color: #b9c1dc !important; font-size: .82rem !important; font-weight: 600 !important; margin-bottom: 6px; }
.vosyn-rb-radio small { color: #6b7699; font-weight: 500; }
.vosyn-rb-radio input { accent-color: #7c3aed; }

/* questions */
.vosyn-rb-modes { display: flex; gap: 18px; }
.vosyn-rb-modes label { display: inline-flex !important; gap: 6px; color: #b9c1dc !important; font-size: .82rem !important; }
.vosyn-rb-q { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.vosyn-rb-q textarea { flex: 1 1 auto; min-width: 0; }
.vosyn-rb-q select { flex: 0 0 170px; }
.vosyn-rb-qx { flex: 0 0 auto; }

/* rail widgets */
.vosyn-rb-facts { grid-template-columns: 1fr; }
.vosyn-rb-completion, .vosyn-rb-outputs, .vosyn-rb-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: .8rem; }
.vosyn-rb-completion li.is-complete { color: #34d399; }
.vosyn-rb-completion li.is-progress { color: #fbbf24; }
.vosyn-rb-completion li.is-empty { color: #98a2c2; }
.vosyn-rb-completion li.is-optional { color: #6b7699; }
.vosyn-rb-outputs li { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #b9c1dc; }
.vosyn-rb-issues li.is-crit { color: #f87171; }
.vosyn-rb-issues li.is-warn { color: #fbbf24; }
.vosyn-rb-overall { margin: 10px 0 0; color: #e8ecf8; font-weight: 800; }
.vosyn-rb-overall span { font-size: 1.3rem; color: #7c8cf8; }

/* review artifacts */
.vosyn-rb-artifacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.vosyn-rb-artifact {
    background: #121936; border: 1px solid #232e56; border-radius: 10px; padding: 11px 13px;
    display: flex; flex-direction: column; gap: 4px;
}
.vosyn-rb-artifact strong { color: #e8ecf8; font-size: .82rem; display: flex; justify-content: space-between; }
.vosyn-rb-artifact .vosyn-chip { align-self: flex-start; }
.vosyn-rb-artifact small { color: #98a2c2; font-size: .72rem; }

.vosyn-rb-bar { margin-top: 14px; }
.vosyn-rb-barstate { color: #98a2c2; font-size: .74rem; }
#rb-create[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 1200px) {
    .vosyn-rb-cols { grid-template-columns: 1fr; }
    .vosyn-rb-rail { position: static; }
    .vosyn-rb-startrow { grid-template-columns: 1fr; }
    .vosyn-rb-artifacts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FULL DARK PASS (operator 2026-07-25): the worksheet token set itself goes
   dark, converting EVERY hosted admin screen (Candidates, Delayed Starts,
   Letters, Documents, Users & Access, Permissions, Audit, Settings, Review
   & Approvals, Jobs) in one move — the same trick the dark modules used,
   now applied at the shell. Candidate-facing previews keep their explicit
   light canvases. Rollback: revert this block.
   ========================================================================== */
body.vosyn-console-body,
body.vosyn-console-body .vosyn-hrc {
    --vs-console-surface: #121936;         /* worksheet card */
    --vs-console-surface-raised: #1a2347;  /* inputs, inner cards */
    --vs-console-text: #e8ecf8;
    --vs-console-text-secondary: #b9c1dc;
    --vs-console-text-muted: #98a2c2;
    --vs-console-border: #232e56;
    --vs-console-border-strong: #232e56;
    --vs-console-table-header: #0f1530;
    --vs-console-row-hover: #1d2750;
    --vs-console-link: #7c8cf8;
    --vs-console-link-strong: #a5b0fa;
    --vs-console-ok: #34d399;
    --vs-console-ok-tint: rgba(52, 211, 153, .1);
    --vs-console-warn: #fbbf24;
    --vs-console-warn-tint: rgba(251, 191, 36, .1);
    --vs-console-danger: #f87171;
    color-scheme: dark;
}
/* Hosted-screen chrome that used literals rather than tokens. */
body.vosyn-console-body .vosyn-hrc-screen {
    background: #121936;
    border-radius: 14px;
}
body.vosyn-console-body .vosyn-hrc-screen input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body.vosyn-console-body .vosyn-hrc-screen select,
body.vosyn-console-body .vosyn-hrc-screen textarea {
    background: #0f1530 !important;
    border: 1px solid #232e56 !important;
    color: #e8ecf8 !important;
    border-radius: 8px;
}
body.vosyn-console-body .vosyn-hrc-screen ::placeholder { color: #6b7699 !important; }
body.vosyn-console-body .vosyn-hrc-screen .button,
body.vosyn-console-body .vosyn-hrc-screen button:not(.vosyn-sched-btn):not([class*="vosyn-"]) {
    background: #1a2347 !important;
    border: 1px solid #232e56 !important;
    color: #e8ecf8 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.vosyn-console-body .vosyn-hrc-screen .button:hover { border-color: #5f6fd8 !important; }
body.vosyn-console-body .vosyn-hrc-screen .button-primary {
    background: #5f6fd8 !important; border-color: transparent !important; color: #fff !important;
}
body.vosyn-console-body .vosyn-hrc-screen .button-primary:hover { background: #7c8cf8 !important; }
body.vosyn-console-body .vosyn-hrc-screen .button-link-delete { color: #f87171 !important; }
body.vosyn-console-body .vosyn-hrc-screen .notice {
    background: #1a2347; border: 1px solid #232e56; border-left-width: 4px;
    color: #e8ecf8; border-radius: 8px;
}
body.vosyn-console-body .vosyn-hrc-screen .notice p { color: #e8ecf8 !important; }
body.vosyn-console-body .vosyn-hrc-screen .notice-success { border-left-color: #34d399; }
body.vosyn-console-body .vosyn-hrc-screen .notice-error { border-left-color: #f87171; }
body.vosyn-console-body .vosyn-hrc-screen .notice-info { border-left-color: #7c8cf8; }
body.vosyn-console-body .vosyn-hrc-screen code {
    background: #0f1530; color: #a5b0fa; border-radius: 5px; padding: 1px 6px;
}
body.vosyn-console-body .vosyn-hrc-screen table.widefat.striped > tbody > tr:nth-child(odd),
body.vosyn-console-body .vosyn-hrc-screen table.striped > tbody > tr:nth-child(odd) {
    background: rgba(15, 21, 48, .5);
}
/* The dark modules already define their own surfaces — the shell shadow
   exception from D-32 is superseded by everything being dark now. */
body.vosyn-console-body .vosyn-hrc-screen { box-shadow: none; }

/* ---------- official logo in the admin header ---------- */
.vosyn-hd-brand { display: flex; align-items: center; gap: 12px; }
.vosyn-hd-logoimg { height: 26px; width: auto; display: block; }
.vosyn-hd-app { position: relative; top: 1px; }

/* ---------- automation pacing control (operator 2026-07-25) ---------- */
.vosyn-pacing { display: flex; flex-direction: column; gap: 8px; }
.vosyn-pacing-opt {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--ud-card-raised, #1a2347); border: 1px solid var(--ud-border, #232e56); border-radius: 10px;
}
.vosyn-pacing-opt strong { color: var(--ud-text, #e8ecf8); font-size: .82rem; white-space: nowrap; }
.vosyn-pacing-opt small { color: var(--ud-muted, #98a2c2); font-size: .7rem; line-height: 1.35; }
.vosyn-pacing-opt .vosyn-chip { margin-left: auto; }
.vosyn-pacing-opt.is-live { border-color: rgba(52, 211, 153, .45); }
.vosyn-pacing form { margin-top: 2px; }

/* The pacing TOGGLE (operator ruling 2026-08-02): two side-by-side states,
   the live one filled and outlined. A single flip-button labelled "Turn the
   4-hour timer OFF" was being read as the current state rather than as the
   action, so both states are now on screen at once. */
.vosyn-pacing-toggle { display: flex; gap: 8px; flex-wrap: wrap; }
.vosyn-pacing-toggle .vosyn-sched-btn { flex: 1 1 0; min-width: 140px; justify-content: center; }
.vosyn-pacing-toggle .vosyn-sched-btn.is-current {
    box-shadow: 0 0 0 2px rgba(52, 211, 153, .55);
    font-weight: 700;
}
.vosyn-pacing-toggle .vosyn-sched-btn:not(.is-current) { opacity: .72; }
.vosyn-pacing-toggle .vosyn-sched-btn:not(.is-current):hover { opacity: 1; }
@media (max-width: 600px) {
    .vosyn-pacing-toggle .vosyn-sched-btn { flex: 1 1 100%; }
}

/* Two explicit choices + the live value on show (operator 2026-07-26). The
   old card said "invite buffer per setting", which made a buffer of 0 look
   exactly like a buffer of 4 hours. */
.vosyn-pacing-opt { flex-wrap: wrap; align-items: flex-start; }
.vosyn-pacing-opt strong { white-space: normal; flex: 0 0 auto; }
.vosyn-pacing-opt small { flex: 1 1 100%; order: 3; }
.vosyn-pacing-opt .vosyn-pacing-form { flex: 1 1 100%; order: 4; margin-top: 8px; }
.vosyn-pacing-opt .vosyn-sched-btn { width: 100%; }
.vosyn-pacing-opt .vosyn-sched-btn[disabled] { opacity: .45; cursor: default; }
.vosyn-pacing-now {
    margin: 0 0 2px; padding: 10px 12px; border-radius: 10px;
    background: var(--ud-card-raised, #1a2347); border: 1px solid var(--ud-border, #232e56);
    color: var(--ud-muted, #98a2c2); font-size: .74rem;
}
.vosyn-pacing-now strong { color: var(--ud-text, #e8ecf8); font-size: .84rem; }
.vosyn-pacing-warn {
    margin: 0; padding: 10px 12px; border-radius: 10px;
    background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .45);
    color: #fca5a5; font-size: .72rem; line-height: 1.45;
}
.vosyn-pacing-warn strong { color: #fecaca; }

/* ---------- Start Management (D-35) ---------- */
.vosyn-startmgmt h1 { color: #e8ecf8 !important; }
.vosyn-startmgmt-resolved { margin-top: 14px; color: #98a2c2; }
.vosyn-startmgmt-resolved summary { cursor: pointer; font-size: .84rem; }

/* ---------- Letters ops (D-36) ---------- */
.vosyn-lettersops h1 { color: #e8ecf8 !important; }
.vosyn-lettersops-types { display: flex; flex-direction: column; gap: 9px; }
.vosyn-lettersops-type { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: #e8ecf8; }
.vosyn-lettersops-type > span:first-child { flex: 0 0 220px; color: #b9c1dc; }
.vosyn-lettersops-type strong { min-width: 24px; text-align: right; }
.vosyn-sched-grid { align-items: start; }

/* ---------- Permissions & Access Policies (D-37) ---------- */
.vosyn-perms h1 { color: #e8ecf8 !important; }
.vosyn-perms-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vosyn-perms-role { background: #121936; border: 1px solid #232e56; border-radius: 12px; padding: 14px 16px; }
.vosyn-perms-role.is-locked { opacity: .8; }
.vosyn-perms-role-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.vosyn-perms-role-head strong { color: #e8ecf8; font-size: .95rem; }
.vosyn-perms-role p { margin: 0 0 8px; color: #b9c1dc; font-size: .8rem; line-height: 1.5; }
.vosyn-perms-role small { color: #98a2c2; font-size: .72rem; }
.vosyn-perms-cell label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* ------------------------------------------------------------------ *
 * Access levels (11 Aug 2026). The matrix was five separate tables, each
 * sizing its own columns from its own contents, so "HR Admin" landed in a
 * different place in every card and the whole thing read as unrelated grids.
 * It is now ONE fixed-layout table: the column widths are declared once, in
 * the colgroup, and cannot drift between areas.
 * ------------------------------------------------------------------ */
.vosyn-perms-table { table-layout: fixed; }
.vosyn-perms-col-area { width: 30%; }
.vosyn-perms-col-risk { width: 10%; }
.vosyn-perms-col-tier { width: 20%; }

.vosyn-perms-table th,
.vosyn-perms-table td { vertical-align: top; }

/* The area cell is a ROW header, so it inherits the column-header styling —
   uppercase, letter-spaced, 800 weight. On a column label that is right; on
   this cell it shouted the area name, mangled the sentence beneath it, and
   printed the capability identifiers as VIEW_VOSYN_CANDIDATES when the real
   capability is lowercase. A technical identifier must be shown exactly as it
   is written or it cannot be searched for. Reset here, deliberately. */
.vosyn-perms-area {
    text-align: left;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    font-size: .8rem;
}
.vosyn-perms-area strong {
    display: block;
    color: #e8ecf8;
    font-size: .84rem;
    font-weight: 700;
    margin-bottom: 3px;
}
.vosyn-perms-area small {
    display: block;
    line-height: 1.45;
    margin-bottom: 5px;
    text-transform: none;
    letter-spacing: normal;
    font-size: .72rem;
    font-weight: 400;
}
.vosyn-perms-caps {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .66rem;
    color: #7f8ab0;
    word-break: break-word;
    text-transform: none; /* these are literal capability names — never re-cased */
    letter-spacing: normal;
    font-weight: 400;
}

.vosyn-perms-cell { line-height: 1.45; }

/* The level control. Sized to the column rather than the theme's
   full-width default, which is what stretched every other input on the
   console into a bar. */
.vosyn-perms-level {
    width: 100%;
    max-width: 210px;
    min-width: 0;
    margin-bottom: 6px;
}

.vosyn-perms-meaning {
    display: block;
    color: #98a2c2;
    font-size: .7rem;
    line-height: 1.45;
}

.vosyn-perms-mixed {
    display: block;
    margin-top: 5px;
    color: #f0b45e;
    font-size: .68rem;
    line-height: 1.45;
}

/* The "two levels only" explanation belongs to the row above it, so it is
   quiet and unboxed rather than looking like another area. */
.vosyn-perms-note-row td {
    padding-top: 0;
    border-bottom: 1px solid rgba(35, 46, 86, .6);
}
.vosyn-perms-note-row small { display: block; max-width: 70ch; }

@media (max-width: 900px) {
    /* Below this the five columns cannot hold their meaning side by side;
       the table scrolls inside its own container rather than stretching the
       page, and the area column keeps enough room to stay readable. */
    .vosyn-perms-table { table-layout: auto; min-width: 760px; }
}
.vosyn-perms-save { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 900px) { .vosyn-perms-roles { grid-template-columns: 1fr; } }

/* ---------- Users & Access + shared final-batch polish (D-39) ---------- */
.vosyn-uacc h1, .vosyn-syset h1, .vosyn-lettersops h1 { color: #e8ecf8 !important; }

/* ============================================================
   P1-39 (2026-07-31, verifier-refuted closure → real fix).
   On the REAL cascade (plugin + child theme + Avada) at 390px,
   long department names ("Marketing & Communications") collided
   with the row chevron on 8 of 71 cards — a genuine glyph
   overlap, not a box artifact. These rules pin the row geometry
   at small widths regardless of what the theme layers on top:
   the text column owns everything left of the chevron, the
   chevron can never be overlapped, and the department line
   wraps inside its own column.
   ============================================================ */
@media (max-width: 640px) {
    .vosyn-careers .vosyn-row-link {
        align-items: flex-start;
        /* Keep icon | text | chevron on ONE line (the parent rule wraps):
           the text column wraps internally, the chevron stays inline-right —
           the familiar affordance, without the collision (verifier note). */
        flex-wrap: nowrap;
    }
    .vosyn-careers .vosyn-row-main {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }
    .vosyn-careers .vosyn-row-chevron {
        flex: 0 0 auto;
        margin-left: 0.5em;
        align-self: center;
    }
    .vosyn-careers .vosyn-row-dept {
        display: block;
        max-width: 100%;
    }
}

/* ============================================================
   P1-43 (2026-07-31, verifier-refuted closure → real fix).
   Avada's responsive typography inflates JD section headings to
   48px on phones; "Key Responsibilities" then exceeds the 330px
   column and overflow-wrap splits it mid-word ("Responsibilitie
   / s") — the exact C6 screenshot-27 bug. Headings never break
   mid-word, and on small screens they render at a size the
   column can actually hold. The !important is deliberate: it
   must out-rank Avada's typography variables, which already
   out-rank this stylesheet's normal rules.
   ============================================================ */
.vosyn-careers .vosyn-jd-section h2,
.vosyn-careers .vosyn-jd-section h3 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
@media (max-width: 640px) {
    .vosyn-careers .vosyn-jd-section h2 {
        font-size: clamp(1.15rem, 5.5vw, 1.6rem) !important;
        line-height: 1.3;
    }
    .vosyn-careers .vosyn-jd-section h3 {
        font-size: clamp(1.05rem, 4.8vw, 1.35rem) !important;
        line-height: 1.3;
    }
}


/* D-17 — Candidate Portal Terms accordion (account creation + application).
   Redesigned 8 Aug (operator: the raw white slab looked pasted onto the
   navy page): the component is ONE dark elevated card in the theme's own
   surface tones — accordion header with a magenta document chip + chevron,
   the consent row as the card's footer. The legal text stays a LIGHT
   "document" sheet deliberately inset INSIDE the dark card, with its own
   EXPLICIT dark text color on EVERY descendant (!important): the theme
   colors children DIRECTLY ("#main h2" at specificity 1,0,1;
   ".post-content p") so a color on the container never gets a turn —
   forcing dark text inside the self-contained sheet is correct by
   construction (ui-verifier blocker, 8 Aug). Same reason the accept row
   pins justify-content and wraps its label text in a span: the theme's own
   label flex rules (space-between) were scattering checkbox, text and
   asterisk to opposite screen edges. */
.vosyn-terms { margin: 22px 0; }
.vosyn-terms-panel {
    background: var(--vt-elevated, #161f44);
    color: var(--vt-off-white, #f7f9ff);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
/* interpolate-size lets the open/close animate to block-size:auto where
   supported (Chrome 129+); elsewhere the accordion just snaps — fine. */
.vosyn-terms-details { background: transparent; color: var(--vt-off-white, #f7f9ff); border: 0; interpolate-size: allow-keywords; }
.vosyn-terms-details > summary.vosyn-terms-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
}
.vosyn-terms-summary::-webkit-details-marker { display: none; }
.vosyn-terms-summary:hover { background: rgba(255, 255, 255, 0.045); }
.vosyn-terms-summary:focus-visible { outline: 2px solid var(--vosyn-a11y-focus, #ef86e4); outline-offset: -3px; border-radius: 12px; }
.vosyn-terms-doc-ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(211, 38, 197, 0.16);
    border: 1px solid rgba(211, 38, 197, 0.28);
    color: #ef86e4; /* 6.1:1 on the chip tint — icons need ≥3:1 */
}
.vosyn-terms-summary-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.vosyn-terms-title { font-weight: 700; font-size: 0.97rem; line-height: 1.35; color: var(--vt-off-white, #f7f9ff); }
.vosyn-terms-hint { font-weight: 500; font-size: 0.8rem; line-height: 1.35; color: #aab3cb; /* 7.6:1 on the card */ }
.vosyn-terms-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin: -3px 4px 0 0;
    border-right: 2px solid #ef86e4;
    border-bottom: 2px solid #ef86e4;
    transform: rotate(45deg); /* points down when closed */
    transition: transform 0.22s ease;
}
.vosyn-terms-details[open] > .vosyn-terms-summary { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.vosyn-terms-details[open] .vosyn-terms-chevron { transform: rotate(225deg); margin-top: 3px; }
.vosyn-terms-details::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.28s ease, content-visibility 0.28s allow-discrete; }
.vosyn-terms-details[open]::details-content { block-size: auto; }
.vosyn-terms-scroll {
    max-height: 340px;
    overflow-y: auto;
    margin: 14px 16px 16px;
    padding: 18px 22px;
    background: #ffffff;
    color: #1f2430;
    border-radius: 10px;
    font-size: 0.9rem;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: #c4cad8 #eef0f5;
}
.vosyn-terms-scroll::-webkit-scrollbar { width: 10px; }
.vosyn-terms-scroll::-webkit-scrollbar-track { background: #eef0f5; border-radius: 10px; }
.vosyn-terms-scroll::-webkit-scrollbar-thumb { background: #c4cad8; border-radius: 8px; border: 2px solid #eef0f5; }
.vosyn-terms-scroll::-webkit-scrollbar-thumb:hover { background: #a9b1c4; }
.vosyn-terms-scroll, .vosyn-terms-scroll * { color: #1f2430 !important; }
.vosyn-terms-scroll h2, .vosyn-terms-scroll h3, .vosyn-terms-scroll h4 { color: #10131c !important; }
.vosyn-terms-scroll a { color: #2a4bd7 !important; text-decoration: underline; }
.vosyn-terms-scroll h2 { font-size: 1.15em; margin: 12px 0 6px; }
.vosyn-terms-scroll h3 { font-size: 1.02em; margin: 14px 0 4px; }
.vosyn-terms-scroll h4 { font-size: .97em; margin: 10px 0 3px; }
.vosyn-terms-scroll p, .vosyn-terms-scroll li { margin: 5px 0; }
/* Consent footer: divided from the accordion, with a faint magenta wash so
   the one action on the card reads as the point of the card. */
.vosyn-terms-panel .vosyn-terms-accept {
    margin: 0;
    padding: 14px 18px 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(211, 38, 197, 0.055);
}
.vosyn-terms .vosyn-terms-accept label {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start !important;
    align-items: flex-start;
    gap: 11px;
    width: 100%;
    max-width: none;
    float: none;
    text-align: left;
    line-height: 1.5;
    cursor: pointer;
}
.vosyn-terms .vosyn-terms-accept input[type="checkbox"] {
    margin-top: 3px;
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: #d326c5;
    cursor: pointer;
}
/* This was the ring the A11Y-FOCUS block later generalised to the whole
   journey; it reads the token so there is one definition of the colour. */
.vosyn-terms .vosyn-terms-accept input[type="checkbox"]:focus-visible { outline: 2px solid var(--vosyn-a11y-focus, #ef86e4); outline-offset: 2px; }
.vosyn-terms .vosyn-terms-accept-text { flex: 1 1 auto; min-width: 0; display: inline; font-size: 0.92rem; color: #eef1fa; /* 13.6:1 on the washed row */ }
/* No color override: the asterisk keeps the global .vosyn-req red — 5.6:1
   on the consent row's washed background. */
.vosyn-terms .vosyn-req { margin-left: 2px; }
/* "Already accepted" state: a quiet confirmation chip in the same card
   tones. Explicit paired colors with !important on the text: the theme
   recolors bare <p> descendants directly, and this chip sets its own dark
   background, so forcing the light text is correct by construction. */
.vosyn-terms-accepted-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    background: var(--vt-elevated, #161f44);
    color: var(--vt-off-white, #f7f9ff) !important;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.5;
}
.vosyn-terms-accepted-note::before { content: "✓"; color: #ef86e4; font-weight: 800; flex: 0 0 auto; }
@media (max-width: 640px) {
    .vosyn-terms-details > summary.vosyn-terms-summary { padding: 13px 14px; gap: 11px; }
    .vosyn-terms-scroll { margin: 10px 10px 12px; padding: 14px 16px; }
    .vosyn-terms-panel .vosyn-terms-accept { padding: 13px 14px 14px; }
}

/* D-16 — the "is this correct?" confirmation under an application-closing
   "No" (both interview questionnaires + the Next Step Form). Explicit colors
   throughout: this panel renders inside theme pages (see the terms-card
   lesson above — backgrounds and colors always travel together; the first
   cut inherited the theme's near-black body color onto a navy panel).
   Amber frames the caution — it slows the candidate down without reading
   as an error — while the checkbox keeps the D-17 magenta accent so
   consent controls stay one idiom site-wide. Measured on the rendered
   dark page: head 12.0:1, amber strong 9.2:1, consent row 14.9:1 (11.3:1
   checked), button 13.8:1, icon 5.5:1. */
.vq-decline-confirm {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 13px;
    align-items: start;
    margin-top: 16px;
    padding: 16px 18px 17px;
    background: linear-gradient(180deg, rgba(232, 169, 79, .13), rgba(232, 169, 79, .055)), var(--vt-elevated, #161f44);
    color: #f7f9ff;
    border: 1px solid rgba(232, 169, 79, .38);
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .25);
}
.vq-decline-confirm[hidden] { display: none; }
/* Same chip idiom as the terms card's document icon, in caution amber. */
.vq-dc-ic {
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(232, 169, 79, .15);
    border: 1px solid rgba(232, 169, 79, .32);
    color: #f2c176; /* 5.5:1 on the chip tint — icons need ≥3:1 */
}
.vq-dc-ic svg { width: 19px; height: 19px; }
.vq-decline-confirm .vq-dc-head { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: .95rem; line-height: 1.55; color: #f7f9ff !important; }
/* Presentation only — the ruled copy is untouched; the lead sentence just
   sits as a heading line above the consequence sentence. */
.vq-decline-confirm .vq-dc-head strong { display: block; margin-bottom: 2px; font-size: 1rem; color: #f6d7a0; }
/* The confirmation is a deliberate act: it gets its own darker inset row
   (the terms-accept pattern), and the checked state answers in the site's
   magenta, not more amber. Flex pinned with !important — the theme's label
   rules attack justify-content and display directly. */
.vq-decline-confirm .vq-dc-yes {
    grid-column: 1 / -1;
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start !important;
    align-items: flex-start;
    gap: 11px;
    margin: 14px 0 12px;
    padding: 12px 14px;
    background: rgba(5, 12, 34, .5);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.vq-decline-confirm .vq-dc-yes:hover { border-color: rgba(255, 255, 255, .24); }
.vq-decline-confirm .vq-dc-yes:has(input:checked) { border-color: rgba(239, 134, 228, .5); background: rgba(211, 38, 197, .10); }
.vq-decline-confirm .vq-dc-yes input[type="checkbox"] { margin-top: 3px; flex: none; width: 17px; height: 17px; accent-color: #d326c5; cursor: pointer; }
.vq-decline-confirm .vq-dc-yes input[type="checkbox"]:focus-visible { outline: 2px solid var(--vosyn-a11y-focus, #ef86e4); outline-offset: 2px; }
.vq-decline-confirm .vq-dc-yes span { color: #eef1fa !important; font-size: .92rem; }
/* Both hosts style ghost buttons differently (base ghost is magenta-on-
   light, the quiz ghost is !important-pinned) — three classes out-rank
   both so the escape hatch renders identically everywhere. */
.vq-decline-confirm .vosyn-btn-ghost.vq-dc-clear {
    grid-column: 1 / -1;
    justify-self: start;
    background: transparent !important;
    color: #f7f9ff !important;
    border: 1px solid rgba(255, 255, 255, .26) !important;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}
.vq-decline-confirm .vosyn-btn-ghost.vq-dc-clear:hover { background: rgba(255, 255, 255, .07) !important; }
.vq-decline-confirm .vosyn-btn-ghost.vq-dc-clear:focus-visible { outline: 2px solid var(--vosyn-a11y-focus, #ef86e4); outline-offset: 2px; }
/* Reveal: the wizard flips [hidden], so display goes none→grid and the
   animation re-runs on every reveal. Motion respects the OS setting. */
@media (prefers-reduced-motion: no-preference) {
    .vq-decline-confirm:not([hidden]) { animation: vqDcReveal .32s cubic-bezier(.2, .7, .3, 1); }
}
@keyframes vqDcReveal { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px) {
    .vq-decline-confirm { padding: 14px 14px 15px; column-gap: 11px; }
    .vq-decline-confirm .vosyn-btn-ghost.vq-dc-clear { justify-self: stretch; width: 100%; }
}

/* ============================================================
   A11Y-FOCUS (2026-08-12, accessibility audit S3/S4/B3)
   ------------------------------------------------------------
   ONE focus indicator for the whole candidate journey.

   The audit measured the two translucent glows this site had been
   using and they do not carry: the radio "ring"
   `box-shadow rgba(229,125,220,.35)` composites to rgb(82,51,102)
   over the card and scores 1.87:1; the apply-form text ring
   `rgba(104,192,240,.3)` composites to rgb(40,74,117) and scores
   1.92:1. Both are under the 3:1 floor of WCAG 1.4.11, and both
   pages set `outline: none`, so the browser's own ring — the only
   thing that would have saved them — was suppressed too.

   #ef86e4 at 2px with a 2px offset was already in this stylesheet
   on the terms checkbox and measures 8.5:1 against the page
   ground rgb(3,11,38). It is now the single answer everywhere.

   The offset is load-bearing, not decoration. On the contract
   signature field the input's own fill is WHITE; #ef86e4 against
   white is only 2.28:1. The 2px gap keeps the whole ring on the
   dark card, where it reads at 8.5:1 on both of its edges.

   Everything here is `:focus-visible`, so a mouse click never
   paints a ring — only keyboard (and AT) focus does.

   THE SHAPE OF IT (design pass, same day). A ring never sits
   flush and never sits at an arbitrary distance: 2px off a
   control that is its own box (checkbox, field, the terms
   sheet), 3px where it wraps a whole composite surface (an
   answer card, the board chip) and has to clear that surface's
   own 1px border. `outline` follows each control's radius on
   its own, so a 17px checkbox and a 370x48 answer card read as
   one idea at two sizes. Outside the ring sits the halo, which
   is not new language: the journey stepper already marks the
   current step with `0 0 0 4px rgba(211,38,197,.18)`. "You are
   here in the journey" and "you are here on the page" now look
   related on purpose.

   FOCUS IS NOT SELECTION. Arrowing through a radio group moves
   focus AND answers the question, so a keyboard candidate must
   be able to tell the two apart in one frame. Selection keeps
   everything it had and all of it INSIDE the card — orchid
   border, magenta wash, gradient letter badge. Focus is only
   ever the detached ring and halo OUTSIDE it. The focused card
   deliberately no longer takes the selected border-colour; that
   made "I am here" pixel-identical to "I chose this" on an
   unanswered question.
   ============================================================ */
:root {
    --vosyn-a11y-focus: #ef86e4;   /* 8.5:1 on rgb(3,11,38) */
    /* Halo, not glow: it reads OUTSIDE the ring, its spread starting past the
       ring's outer edge (offset + 2px width). It is decoration and is never
       what carries the 3:1 — the solid ring is.
       It costs no text contrast anywhere, and that is a measured fact rather
       than an assumption: an outer box-shadow is clipped to outside the
       border box, so it does not tint a control that has a translucent fill
       of its own. Pixel-sampled on the board chip — with a wash lit, the
       pixel one inside the border edge stayed rgb(22,31,68) while the pixel
       in the gap went rgb(53,46,91). The focused answer card's option text
       measures 17.85:1 with the halo up, exactly as without it. */
    --vosyn-a11y-halo: 0 0 0 4px rgba(239, 134, 228, .12), 0 0 14px 3px rgba(239, 134, 228, .20);
    --vosyn-a11y-halo-card: 0 0 0 5px rgba(239, 134, 228, .10), 0 0 18px 4px rgba(239, 134, 228, .18);
}

/* Screen-reader-only utility. Used by the careers board status region
   (audit S5) — announced, never painted. Not `display:none`, which
   would remove it from the accessibility tree along with the pixels. */
.vosyn-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* --- B3 · the contract signature card -------------------------------
   A candidate types their legal name here and ticks a box that carries
   "the same effect as a handwritten signature". Both controls measured
   byte-identical focused vs unfocused. `!important` on purpose: the
   theme sets `outline: none` on dashboard inputs from a later sheet,
   and this is not a control anyone may lose. */
#vosyn-typed-signature:focus-visible,
.vosyn-esign-consent input[type="checkbox"]:focus-visible,
#vosyn-esign-consent:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4) !important;
    outline-offset: 2px !important;
}
/* The field's fill is white, so it keeps the orchid border it already had
   — on this one control the border is the "live" cue and the ring is the
   focus cue, and they are different colours of the same family, not two
   systems. The halo replaces the flat 4px glow this rule shipped with. */
#vosyn-typed-signature:focus-visible {
    border-color: var(--vosyn-a11y-focus, #ef86e4) !important;
    box-shadow: var(--vosyn-a11y-halo) !important;
}
.vosyn-esign-consent input[type="checkbox"]:focus-visible,
#vosyn-esign-consent:focus-visible,
.vosyn-terms .vosyn-terms-accept input[type="checkbox"]:focus-visible {
    box-shadow: var(--vosyn-a11y-halo) !important;
}

/* --- S3 · interview + assessment radios ------------------------------
   The card is the target a candidate actually sees (370x48+), so the
   card takes the ring and the raw 18px input takes one too. Both, not
   either: `:has()` is unsupported in a small tail of browsers, and the
   input's own ring is the fallback that always renders. Where :has()
   DOES work the input's ring is suppressed, because two rings for one
   focus is noise rather than emphasis — and the small one was drawn
   square around a round control, which is exactly the leftover browser
   default this system exists to replace. Where :has() does not work it
   is all the candidate gets, so there it follows the radio's shape. */
.vosyn-quiz .vosyn-quiz-opt input:focus-visible,
.vosyn-quiz-opt input:focus-visible,
.vosyn-quiz-choice input[type="radio"]:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4) !important;
    outline-offset: 2px !important;
    border-radius: 50%;   /* the fallback ring follows the control's shape */
}
@supports selector(:has(*)) {
    .vosyn-quiz-opt:has(input:focus-visible) input:focus-visible {
        outline-color: transparent !important;
    }
}
/* No border-colour here: that belongs to the checked state. */
.vosyn-quiz-opt:has(input:focus-visible) {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4);
    outline-offset: 3px;
    box-shadow: var(--vosyn-a11y-halo-card);
}

/* --- S4 · every text-entry control on the journey --------------------
   Same ring, kept alongside the existing coloured border so the
   "this field is live" language does not change — only its contrast.
   The halo also lands ON PURPOSE over the apply form's `:focus` glow
   (`0 0 0 3px rgba(104,192,240,.3)`): a blue 3px ring inside a magenta
   2px ring was two focus systems stacked, and the blue one is the one
   the audit measured at 1.92:1. Mouse focus keeps it; keyboard focus
   answers in the brand's own colour. */
.vosyn-quiz .vosyn-quiz-textarea:focus-visible,
.vosyn-quiz-otherinput:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4) !important;
    outline-offset: 2px !important;
    box-shadow: var(--vosyn-a11y-halo) !important;
}
.vosyn-apply-wrap .vosyn-application input:focus-visible,
.vosyn-apply-wrap .vosyn-application select:focus-visible,
.vosyn-apply-wrap .vosyn-application textarea:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4) !important;
    outline-offset: 2px !important;
    box-shadow: var(--vosyn-a11y-halo) !important;
}
.vosyn-nsf-page .vosyn-nsf select:focus-visible,
.vosyn-nsf-page .vosyn-nsf input:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4) !important;
    outline-offset: 2px !important;
    box-shadow: var(--vosyn-a11y-halo) !important;
}

/* --- S1 · the terms sheet is now a real, reachable region ------------
   It is a 340px window onto 39,246 characters, so it must show that it
   holds the keyboard. The ring sits on the dark panel, clear of the
   light document sheet inside. */
.vosyn-terms-scroll:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4) !important;
    outline-offset: 2px !important;
    box-shadow: var(--vosyn-a11y-halo) !important;
}
/* KNOWN, MEASURED, DELIBERATELY LEFT (ui-verifier 12 Aug, non-blocker):
   inside the open disclosure this ring paints as two full-height vertical
   BARS rather than a closed ring — left/right ~332 of 346px, top/bottom 0.
   Still unmistakable (2px x 338px of #ef86e4 at 7:1 down both sides of a
   340px window) and the sheet is a real tab stop, so a candidate always sees
   where they are; it is the ring's SHAPE that is wrong, not its presence.
   Two fixes were tried and both rejected on evidence:
     - outline-offset:-4px (the suggested fix) closes the ring but lands it on
       the WHITE document sheet, where #ef86e4 measures 2.28:1 — under the 3:1
       floor of WCAG 1.4.11. A complete ring is not worth an invisible one.
     - overflow-clip-margin:6px on ::details-content, applied only while the
       sheet holds focus. Confirmed to APPLY (computed overflow-y:clip,
       overflow-clip-margin:6px, :has() matching) and to change nothing —
       top/bottom stayed 0/732 at 1280, 768 and 375. So ::details-content is
       not the real clipper and that diagnosis is still open.
   Left as-is rather than shipping CSS that measures as dead. */

/* --- B1 · the department chip is operable, so it must look focusable -
   Ring only, no halo. Not a contrast decision — the wash is clipped to the
   gap and leaves the chip's orchid text at 6.32:1 either way — a shape one:
   the chip is inline text that wraps to a four-line block at 375px, where a
   filled gap stops reading as light around a control and starts reading as a
   slab behind a paragraph. The ring is 7:1 on the row at every width. */
.vosyn-careers .vosyn-row-dept:focus-visible {
    outline: 2px solid var(--vosyn-a11y-focus, #ef86e4);
    outline-offset: 3px;
    border-radius: 6px;
    text-decoration: underline;
}
/* KNOWN, MEASURED, DELIBERATELY LEFT (ui-verifier 12 Aug, non-blocker):
   at 375px this ring loses its left and right edges — painted top/bottom
   139 of 139px, left/right 0 of 84px. Below 640px the row's text column
   takes `overflow: hidden` (to keep icon | text | chevron on one line) and
   the chip is display:block, max-width:100%, so it fills that column exactly
   and the ring is clipped flush against both sides. At 768 and 1280 the
   column is wider than the chip and all four edges paint.
   A focus-scoped `overflow: clip; overflow-clip-margin: 6px` on the row's
   text column was tried: it did restore the side edges, but the measurement
   was not clean (the top edge then read 0/147 on a differently-sized chip),
   and it changes overflow behaviour on the responsive row that keeps this
   board free of horizontal scroll. Not worth that trade for a ring that
   already brackets the chip with two full-width bars at 7:1 and keeps its
   underline. Left as-is; the shape is wrong, the indicator is not missing. */

/* The ring arrives; it does not travel far or for long (.18s, the file's
   reveal curve). Guarded, so a candidate who asked the OS for less motion
   gets the ring at its final offset on the first painted frame. */
@media (prefers-reduced-motion: no-preference) {
    #vosyn-typed-signature:focus-visible,
    #vosyn-esign-consent:focus-visible,
    .vosyn-esign-consent input[type="checkbox"]:focus-visible,
    .vosyn-terms .vosyn-terms-accept input[type="checkbox"]:focus-visible,
    .vosyn-quiz-opt:has(input:focus-visible),
    .vosyn-quiz .vosyn-quiz-textarea:focus-visible,
    .vosyn-quiz-otherinput:focus-visible,
    .vosyn-apply-wrap .vosyn-application input:focus-visible,
    .vosyn-apply-wrap .vosyn-application select:focus-visible,
    .vosyn-apply-wrap .vosyn-application textarea:focus-visible,
    .vosyn-nsf-page .vosyn-nsf select:focus-visible,
    .vosyn-nsf-page .vosyn-nsf input:focus-visible,
    .vosyn-terms-scroll:focus-visible,
    .vosyn-careers .vosyn-row-dept:focus-visible {
        animation: vosynFocusRingIn .18s cubic-bezier(.2, .7, .3, 1);
    }
}
/* Offset only. Nothing here fades the ring in from nothing — a ring that
   starts transparent is a ring that is missing on the first frame. */
@keyframes vosynFocusRingIn { from { outline-offset: 9px; } }

/* Forced-colours: outlines survive, colours do not. Hand the ring back
   to the OS so a high-contrast user keeps an indicator. */
@media (forced-colors: active) {
    #vosyn-typed-signature:focus-visible,
    #vosyn-esign-consent:focus-visible,
    .vosyn-quiz-opt input:focus-visible,
    .vosyn-quiz-opt:has(input:focus-visible),
    .vosyn-terms-scroll:focus-visible,
    .vosyn-careers .vosyn-row-dept:focus-visible,
    .vosyn-apply-wrap .vosyn-application input:focus-visible {
        outline: 2px solid Highlight !important;
    }
    /* The suppressed inner ring comes back: in forced colours the card's
       ring is the OS Highlight on both, and one of them may be all the
       user's palette can draw. */
    .vosyn-quiz-opt:has(input:focus-visible) input:focus-visible {
        outline-color: Highlight !important;
    }
}

/* ==========================================================================
   TIME ZONE SELECT (audit F1, 2026-08-12) — .vosyn-tz-select
   The zone question went from eight flat labels to ~75 IANA zones under
   eight region headings. A list that long is only usable if the headings
   read as headings, so this styles the two surfaces a <select> really has,
   each as far as it can actually be styled.

   CLOSED CONTROL — ours outright. appearance:none is load-bearing, not
   decoration: the native menulist cut the selected zone mid-word hard
   against the arrow at 390px ("…Seattle, San"). With the control's own box
   we get an ellipsis, a real gutter, and one chevron shared by every select
   on the form — a lone custom arrow beside two native ones reads as an
   accident, so the treatment is scoped to the selects of the two forms that
   carry this question rather than to the zone select alone.

   OPEN LIST — NOT ours, and deliberately left alone on colour. The child
   theme pins `option, optgroup { color:#16233b; background:#fff;
   -webkit-text-fill-color:#16233b } !important` (operator report 27 Jul,
   iPhone/Safari): the OS draws that panel WHITE on iOS and Android and
   paints the choices with the inherited colour, so every near-white option
   on this site went white-on-white the moment a phone user tapped it, and
   the bug is invisible on desktop. Recolouring the list here would
   reintroduce exactly that, so the headings are separated TYPOGRAPHICALLY
   only: case, tracking, weight and size, no colour.

   CORRECTION 2026-08-12 (ui-verifier, measured): an earlier draft of this
   comment said setting `color-scheme: dark` would reintroduce the bug. It is
   ALREADY set — Avada-Child-Theme/style.css:700-708 puts it on
   .vosyn-apply-wrap / .vosyn-application (the 27-Jul autofill fix) and it
   inherits down to this select and all 76 of its options. So dark
   color-scheme alongside the pinned #16233b ink is the SHIPPING state, not a
   hypothetical. On desktop the author pin wins outright and every row
   measures 15.7:1 (#16233b on #ffffff, confirmed in rendered pixels). The
   pin also forces `background-color:#ffffff !important`, which is the
   property iOS honours and which the 27-Jul operator report confirmed
   working. UNVERIFIED here: how iOS/Android actually draw that panel — no
   such device is reachable from this machine. One 10-second check on a real
   iPhone (open /apply/, tap "Your time zone", confirm dark text on a white
   sheet) closes it. Do not "fix" the colour on theory; measure first.

   Candidate surfaces are dark-only; there is no light variant to keep in
   step.
   ========================================================================== */
.vosyn-apply-wrap .vosyn-application select,
.vosyn-nsf-page .vosyn-nsf select {
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    padding-right: 46px !important;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2398a2c2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
}
/* Hover/keyboard focus warm the chevron to the brand orchid; the focus ring
   itself is left to the existing per-form :focus rules. */
.vosyn-apply-wrap .vosyn-application select:hover,
.vosyn-apply-wrap .vosyn-application select:focus-visible,
.vosyn-nsf-page .vosyn-nsf select:hover,
.vosyn-nsf-page .vosyn-nsf select:focus-visible {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e57ddc' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Eight region headings inside 75 rows. Small caps with tracking against
   regular sentence case is the one separation every engine honours and the
   only one that survives the pinned ink above: on the white OS panel both
   still measure 15.7:1, so the hierarchy costs no contrast. */
.vosyn-tz-select optgroup {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 12px 0 4px;   /* the gap above a heading is what groups the rows */
}
/* An optgroup's typography inherits into its own options — without this
   reset the whole 75-row list renders uppercase and letter-spaced. Size is
   pinned to the closed control's 15px rather than left to inherit 12px. */
.vosyn-tz-select option {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: normal;
    text-transform: none;
    padding: 7px 14px;
}

/* The zone hint carries a clock and a reading measure; it is the one field
   note long enough to run the full 760px column otherwise. */
.vosyn-tz-note {
    max-width: 62ch;
    padding-left: 20px;
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat left 1px;
    background-size: 13px 13px;
}

/* ---------- Kick-Off Exports (Adeel, 15 Aug 2026) ----------
   One row per kick-off Monday, each with its own file. Rebuilt from a single
   clustered roster on his ruling: "we need to be able to export the candidates
   that have attended each kickoff on each Monday… without it being clustered."
   Row rhythm deliberately matches .vosyn-up7 directly above it in the rail, so
   the two read as one column rather than two competing cards. */
.vosyn-koex { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vosyn-koex li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 2px; border-bottom: 1px solid rgba(35, 46, 86, .6);
}
.vosyn-koex li:last-child { border-bottom: 0; }
.vosyn-koex-date { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.vosyn-koex-date strong { color: var(--ud-text); font-size: .85rem; }
.vosyn-koex-date small { color: var(--ud-muted); font-size: .72rem; }
.vosyn-koex .vosyn-btn {
    font-size: .72rem; padding: .42em .95em; border-radius: 7px;
    white-space: nowrap; flex: 0 0 auto;
}
.vosyn-koex-none {
    color: var(--ud-muted); font-size: .72rem; font-style: italic;
    white-space: nowrap; flex: 0 0 auto;
}
.vosyn-roster-empty {
    margin: 0; color: var(--ud-muted); font-size: .78rem; line-height: 1.55;
}