/* Shared components and adapters for existing page class names.
 * New screens use ui-*; legacy pages keep their JS hooks and layout.
 * Loaded last: change a component here, not by adding a page-specific variant.
 */
.ui-avatar {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ui-accent-soft); color: var(--ui-accent);
    font: 700 14px/1 var(--ui-font); vertical-align: middle;
}
.ui-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.ui-avatar--lg { width: 80px; height: 80px; font-size: 28px; }
.ui-avatar--photo { display: inline-block; object-fit: cover; }
.ui-avatar-loader { position: relative; isolation: isolate; overflow: hidden; }
.ui-avatar-loader::before {
    content: ''; position: absolute; z-index: 2; inset: 50% auto auto 50%;
    width: min(46%, 18px); aspect-ratio: 1; border: 2px solid color-mix(in srgb, var(--ui-accent) 24%, transparent);
    border-top-color: var(--ui-accent); border-radius: 50%; translate: -50% -50%;
    animation: ui-avatar-loader-spin .72s linear infinite;
}
.ui-avatar-loader > [data-avatar-image] {
    position: absolute; z-index: 3; inset: 0; width: 100% !important; height: 100% !important;
    max-width: none; border-radius: inherit; object-fit: cover; opacity: 0; visibility: hidden;
}
.ui-avatar-loader__fallback { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; opacity: 0; }
.ui-avatar-loader.is-loaded::before,.ui-avatar-loader.is-error::before { display: none; }
.ui-avatar-loader.is-loaded > [data-avatar-image] { opacity: 1; visibility: visible; }
.ui-avatar-loader.is-error > .ui-avatar-loader__fallback { opacity: 1; }
@keyframes ui-avatar-loader-spin { to { rotate: 1turn; } }
@media (prefers-reduced-motion: reduce) { .ui-avatar-loader::before { animation: none; } }
body.ui-application .candidate-person .ui-avatar { display: inline-grid; }
body.ui-application :is(.candidate-drawer__identity, .qualification-avatar) > .ui-avatar { width: 80px; height: 80px; }
body.ui-application .rh-account-button .ui-avatar { display: inline-grid; }
body.ui-application .profile-avatar-row > .ui-avatar { width: 80px; height: 80px; border-radius: 50%; }

/* Compact recruiter avatars, including photos, initials and loading states.
   The prominent candidate-profile portrait has its own local size below. */
body.ui-recruiter :is(
    .ui-avatar,.rh-avatar,.rh-initials,.account-avatar,
    .jobs-owner-avatar,.ta-avatar,.le-avatar,.cd-avatar,
    .ri-list-avatar,.ri-list-recruiter-avatar,.ri-person-avatar,
    .agenda-avatar,.agenda-event-popover__avatar,.dashboard-offer-avatar,
    .jc-avatar,.ms-avatar,.mc-avatar,.jb-avatar,.ae-avatar,
    .information-account-avatar,.information-author-avatar,.rh-support-thread__avatar,
    .pool-generated-avatar,.member-row__avatar,.workspace-account__avatar,
    .profile-card__avatar,.portal-sidebar__avatar,.portal-application__avatar,.rh-sk-avatar,
    .rh-account-button > img,.candidate-person > img,.candidate-drawer__identity > img,
    .qualification-avatar > img,.profile-avatar-row > img,.jobs-owner > img,.rb-license-person > img
) {
    box-sizing:border-box;
    width:var(--ui-avatar-size,42px)!important; min-width:var(--ui-avatar-size,42px)!important; max-width:var(--ui-avatar-size,42px)!important;
    height:var(--ui-avatar-size,42px)!important; min-height:var(--ui-avatar-size,42px)!important; max-height:var(--ui-avatar-size,42px)!important;
    flex:0 0 var(--ui-avatar-size,42px)!important; font-size:14px!important; line-height:1; object-fit:cover;
}
body.ui-recruiter .candidate-drawer__identity { grid-template-columns:var(--ui-avatar-size,42px) minmax(0,1fr); }
body.ui-recruiter .qualification-identity { grid-template-columns:var(--ui-avatar-size,42px) minmax(0,1fr) auto; }
body.ui-recruiter .rcp-identity { grid-template-columns:var(--ui-avatar-size,42px) minmax(0,1fr) minmax(260px,340px); }
body.ui-recruiter .rcp-identity > .ui-avatar { border-width:2px; }
body.ui-recruiter .rcp-profile-summary > .ui-avatar {
    --ui-avatar-size:112px;
    border-width:4px;
    font-size:32px!important;
}
body.ui-recruiter .rcp-identity > .ui-avatar { margin-top:0; }
body.ui-recruiter .ae-avatar { font-size:25px!important; }
@media(max-width:980px) {
    body.ui-recruiter .rcp-identity { grid-template-columns:var(--ui-avatar-size,42px) minmax(0,1fr); }
}
@media(max-width:620px) {
    body.ui-recruiter .qualification-identity { grid-template-columns:var(--ui-avatar-size,42px) minmax(0,1fr); }
}

:root {
    --ui-side-panel-open-duration: 280ms;
    --ui-side-panel-close-duration: 220ms;
    --ui-side-panel-ease-out: cubic-bezier(.16, 1, .3, 1);
    --ui-side-panel-ease-in: cubic-bezier(.4, 0, 1, 1);
    --ui-side-panel-scrim: rgba(11, 38, 55, .32);
}
body.ui-application {
    font-family: var(--ui-font); color: var(--ui-text); background: var(--ui-page);
    --ink: var(--ui-text); --navy: var(--ui-text); --navy-soft: var(--ui-muted);
    --muted: var(--ui-muted); --action: var(--ui-accent); --teal: var(--ui-accent);
    --teal-dark: var(--ui-accent-hover); --teal-pale: var(--ui-accent-soft);
    --brand: var(--ui-accent); --mint: var(--ui-accent-soft); --page: var(--ui-page);
    --surface: var(--ui-surface); --surface-soft: var(--ui-subtle);
    --border: var(--ui-border); --line: var(--ui-border); --danger: var(--ui-danger);
    --success: var(--ui-accent); --shadow: var(--ui-shadow);
}

/* Lateral panels all use the same directional motion. Page scripts call the
 * small ProPulseSidePanels helper so closing content remains mounted until its
 * exit animation has completed. */
.ui-side-panel-motion { will-change: transform, opacity; }
/* Layout is animated on the same clock by ProPulseSidePanels.layout. Avoid
   competing legacy grid transitions and route-driven padding keyframes. */
.ui-side-panel-layout { transition:none!important; animation:none!important; }
/* A few legacy drawers declare their own entry animation while open. Once the
 * shared animation ends, do not let that legacy animation restart. */
.ui-side-panel-motion:not(.is-ui-panel-opening):not(.is-ui-panel-closing) { animation: none !important; }
.ui-side-panel-motion.ui-side-panel--right.is-ui-panel-opening {
    animation: ui-side-panel-in-right var(--ui-side-panel-open-duration) var(--ui-side-panel-ease-out) both !important;
}
.ui-side-panel-motion.ui-side-panel--right.is-ui-panel-closing {
    animation: ui-side-panel-out-right var(--ui-side-panel-close-duration) var(--ui-side-panel-ease-in) both !important;
    pointer-events: none;
}
.ui-side-panel-motion.ui-side-panel--left.is-ui-panel-opening {
    animation: ui-side-panel-in-left var(--ui-side-panel-open-duration) var(--ui-side-panel-ease-out) both !important;
}
.ui-side-panel-motion.ui-side-panel--left.is-ui-panel-closing {
    animation: ui-side-panel-out-left var(--ui-side-panel-close-duration) var(--ui-side-panel-ease-in) both !important;
    pointer-events: none;
}
.ui-side-panel-backdrop.is-ui-panel-opening {
    animation: ui-side-panel-backdrop-in var(--ui-side-panel-open-duration) ease-out both !important;
}
.ui-side-panel-backdrop.is-ui-panel-closing {
    animation: ui-side-panel-backdrop-out var(--ui-side-panel-close-duration) ease-in both !important;
    pointer-events: none;
}
/* One visual scrim for native dialogs and panels embedded in the page grid. */
body .ui-side-panel-scrim {
    position:fixed; inset:0; pointer-events:none; opacity:0;
    background:var(--ui-side-panel-scrim);
    transition:opacity var(--ui-side-panel-close-duration) ease-in;
}
body .ui-side-panel-scrim.is-visible { opacity:1; transition:opacity var(--ui-side-panel-open-duration) ease-out; }
body .ui-side-panel-scrim-target { z-index:var(--ui-side-panel-scrim-z,50)!important; }
body .ui-side-panel-scrim-positioned { position:relative; }
body .ui-side-panel-scrim-source { background:var(--ui-side-panel-scrim)!important; }
body :is(.ui-side-panel-scrim,.ui-side-panel-scrim-source) {
    top:var(--ui-side-panel-header-bottom,0px)!important;
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
}
body .ui-side-panel-scrim-source.ui-side-panel-scrim-muted { background:transparent!important; }
body dialog.ui-side-panel-scrim-managed::backdrop { background:transparent!important; transition:background-color var(--ui-side-panel-close-duration) ease-in; }
body dialog.ui-side-panel-scrim-managed.ui-side-panel-scrim-current::backdrop { background:var(--ui-side-panel-scrim)!important; transition:background-color var(--ui-side-panel-open-duration) ease-out; }
body dialog:is(.ui-side-panel-scrim-managed,.ui-workspace-drawer,.ui-side-panel-motion,[class*='drawer'],[data-ui-side-panel-auto],.pool-preview)::backdrop {
    inset:var(--ui-side-panel-header-bottom,var(--rh-header-height,var(--candidate-header-height,0px))) 0 0;
    -webkit-backdrop-filter:none!important; backdrop-filter:none!important;
}
:root[data-theme='dark'] { --ui-side-panel-scrim:rgba(0,0,0,.48); }
/* Only centered modals blur the viewport; native lateral dialogs remain drawers. */
body.ui-recruiter {
    --ui-recruiter-modal-scrim:rgba(7,22,44,.68);
    --ui-recruiter-modal-blur:6px;
}
body.ui-recruiter dialog:modal:not(.ui-side-panel-scrim-managed,.ui-workspace-drawer,.ui-side-panel-motion,[class*='drawer'],[data-ui-side-panel-auto],.pool-preview)::backdrop {
    background:var(--ui-recruiter-modal-scrim,rgba(7,22,44,.68))!important;
    -webkit-backdrop-filter:blur(var(--ui-recruiter-modal-blur,6px));
    backdrop-filter:blur(var(--ui-recruiter-modal-blur,6px));
}
body.ui-recruiter dialog:modal.ui-side-panel-scrim-managed:not(.ui-side-panel-scrim-current)::backdrop {
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
@media (prefers-reduced-motion:reduce) { body .ui-side-panel-scrim,body dialog.ui-side-panel-scrim-managed::backdrop { transition:none!important; } }
@media print { body .ui-side-panel-scrim { display:none; } }
@keyframes ui-side-panel-in-right { from { opacity: .72; transform: translate3d(100%,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes ui-side-panel-out-right { from { opacity: 1; transform: translate3d(0,0,0); } to { opacity: .72; transform: translate3d(100%,0,0); } }
@keyframes ui-side-panel-in-left { from { opacity: .72; transform: translate3d(-100%,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes ui-side-panel-out-left { from { opacity: 1; transform: translate3d(0,0,0); } to { opacity: .72; transform: translate3d(-100%,0,0); } }
@keyframes ui-side-panel-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-side-panel-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ui-side-panel-motion,
    .ui-side-panel-backdrop { animation: none !important; transition: none !important; }
}

/* Icon-only dialog dismissals float above their surface with a square hit area.
   A real SVG avoids the font-dependent baseline of the multiplication glyph. */
body .ui-dialog-close {
    --ui-dialog-close-size:36px;
    display:inline-grid!important; grid-template:1fr / 1fr!important; place-items:center!important;
    width:var(--ui-dialog-close-size)!important; height:var(--ui-dialog-close-size)!important;
    min-width:var(--ui-dialog-close-size)!important; min-height:var(--ui-dialog-close-size)!important;
    max-width:var(--ui-dialog-close-size)!important; max-height:var(--ui-dialog-close-size)!important;
    flex:0 0 var(--ui-dialog-close-size)!important; padding:0!important; gap:0!important;
    border:0!important; background:transparent!important; box-shadow:none!important;
    color:var(--ui-muted,#526580); line-height:1!important; text-decoration:none; vertical-align:middle; cursor:pointer;
    transition:color 160ms ease!important;
}
body .ui-dialog-close::before,body .ui-dialog-close::after { content:none!important; display:none!important; }
body .ui-dialog-close>[data-ui-dialog-close-icon] {
    display:block!important; grid-area:1/1!important; position:static!important;
    width:22px!important; height:22px!important; min-width:0!important; min-height:0!important;
    margin:0!important; padding:0!important; transform:none!important; pointer-events:none!important;
}
body .ui-dialog-close:hover { color:var(--ui-accent,#008b88); }
body .ui-dialog-close:focus-visible { outline:2px solid var(--ui-focus,#008b88)!important; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { body .ui-dialog-close { transition:none!important; } }

/* Native modals enter quickly without changing their existing centering,
   focus handling or exit behavior. Sliding drawers keep their own motion. */
@media (prefers-reduced-motion:no-preference) {
    body dialog[open]:modal:not(.ui-side-panel-motion,.ui-side-panel-scrim-managed,.is-closing,.is-ui-panel-closing,[class*='drawer'],.pool-preview) {
        animation:ui-modal-enter 170ms cubic-bezier(.16,1,.3,1) backwards;
    }
    body dialog[open]:modal:not(.ui-side-panel-motion,.ui-side-panel-scrim-managed,.is-closing,.is-ui-panel-closing,[class*='drawer'],.pool-preview)::backdrop {
        animation:ui-modal-backdrop-enter 140ms ease-out backwards;
    }
}
@keyframes ui-modal-enter {
    from { opacity:0; translate:0 6px; scale:.99; }
    to { opacity:1; translate:0 0; scale:1; }
}
@keyframes ui-modal-backdrop-enter { from { opacity:0; } to { opacity:1; } }
/* Full-screen mobile dialogs keep their footer flush with the viewport. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
    body dialog[open]:modal:not(.ui-side-panel-motion,.ui-side-panel-scrim-managed,.is-closing,.is-ui-panel-closing,[class*='drawer'],.pool-preview) { animation-name:ui-modal-backdrop-enter; }
}
body.ui-application .app-shell { --ui-header-height: 72px; }
body.ui-application [hidden] { display: none !important; }
body.ui-application :is(.rh-shell, .app-shell, .rh-main, .main-content) { background-color: var(--ui-page); }

/* Shared desktop inset takes precedence over page-specific padding shorthands. */
@media screen and (min-width: 761px) {
    .main-content { padding-top: 50px !important; }
}

/* One button system: primary, secondary (default), quiet, danger, compact. */
body.ui-application :is(.ui-button, .button, .agenda-button, .analytics-button, .jc-button, .ae-button, .jb-button):not(.button--text):not(.text) {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
    min-height: var(--ui-control-height); padding: 10px 16px; border-radius: var(--ui-radius);
    border: 1px solid var(--ui-input-border); background: var(--ui-surface); color: var(--ui-accent);
    font-family: var(--ui-font); font-size: var(--ui-text-sm); line-height: 1.35; font-weight: 650;
    text-decoration: none; cursor: pointer; box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
body.ui-application :is(.ui-button, .button, .agenda-button, .analytics-button, .jc-button, .ae-button, .jb-button):hover:not(.button--text):not(.text) {
    background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent);
}
body.ui-application :is(.ui-button--primary, .button.primary, .button--primary, .agenda-button.primary, .analytics-button.primary, .jc-button--primary, .ae-button--primary, .jb-primary):not(.button--text) {
    background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-on-accent); box-shadow: none;
}
body.ui-application :is(.ui-button--primary, .button.primary, .button--primary, .agenda-button.primary, .analytics-button.primary, .jc-button--primary, .ae-button--primary, .jb-primary):hover:not(.button--text) {
    background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); color: var(--ui-on-accent);
}
body.ui-application :is(.ui-button--quiet, .button--ghost, .button.ghost):not(.button--text) { background: transparent; border-color: transparent; }
body.ui-application :is(.ui-button--quiet, .button--ghost, .button.ghost):hover:not(.button--text) { background: var(--ui-accent-soft); border-color: transparent; }
body.ui-application :is(.ui-button--danger, .agenda-button.danger):not(.button--text) { color: var(--ui-danger); border-color: var(--ui-danger); background: var(--ui-danger-soft); }
body.ui-application :is(.ui-button--danger, .agenda-button.danger):hover:not(.button--text) { color: var(--ui-danger); border-color: var(--ui-danger); background: var(--ui-danger-soft); text-decoration: underline; }
body.ui-application :is(.ui-button--compact, .button--small, .button.small):not(.button--text) { min-height: var(--ui-control-compact); padding: 6px 12px; }
body.ui-application :is(.button--text, .button.text) { color: var(--ui-accent); font-size: var(--ui-text-sm); }
body.ui-application .agenda-button.square { width: var(--ui-control-height); padding: 3px; }
body.ui-application :is(.ui-button, .button, .agenda-button, .analytics-button, .jc-button, .ae-button, .jb-button):is(:disabled, [aria-disabled="true"]):not(.button--text):not(.text) {
    color: var(--ui-muted); background: var(--ui-subtle); border-color: var(--ui-border); cursor: not-allowed; box-shadow: none; opacity: 1;
}
body.ui-application :is(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ui-focus); outline-offset: 3px;
}
body.ui-application :is(input, select, textarea):focus-visible { outline: none; }
body.ui-application :is(input, textarea, select) { accent-color: var(--ui-accent); }
body.ui-application :is(.field__input, .ui-input) {
    color: var(--ui-text); background-color: var(--ui-surface); border-color: var(--ui-input-border); border-radius: var(--ui-radius);
    font-family: var(--ui-font); font-size: var(--ui-text-sm); min-height: var(--ui-control-height);
}
body.ui-application :is(input, textarea)::placeholder { color: var(--ui-muted); opacity: 1; }
body.ui-application .ui-input { padding: 10px 12px; border: 1px solid var(--ui-input-border); }

/* Composite controls own one surface and one border on their outer shell.
   The inner field stretches inside that border, even when a page's generic
   Aquarium input rule assigns its own background or minimum height. Keep
   controls whose border belongs to the input (e.g. .le-search) out of this list. */
body.ui-application :is(.candidate-aquarium-page,.propulse-aquarium-page) :is(
    .ta-search,.widgets-search,.technical-search,.connectors-search,.assistant-search,
    .ri-list-search,.ri-list-select,.jobs-search,.recruitment-search,.recruitment-sort,
    .candidate-offers-search,.candidate-offers-location,.ca-search,.help-search,
    .prep-search,.prep-select,.simulation-history-search,.cd-search,.pool-search,
    .talent-bulk-panel__search,.sc-search,.ix-search,.resource-search,
    .training-search,.rh-help-search,.rb-search-field,.nc-search,.ui-input-shell
) {
    min-height:var(--ca-control-height,44px); box-sizing:border-box;
}
body.ui-application :is(.candidate-aquarium-page,.propulse-aquarium-page) :is(
    .ta-search,.widgets-search,.technical-search,.connectors-search,.assistant-search,
    .ri-list-search,.ri-list-select,.jobs-search,.recruitment-search,.recruitment-sort,
    .candidate-offers-search,.candidate-offers-location,.ca-search,.help-search,
    .prep-search,.prep-select,.simulation-history-search,.cd-search,.pool-search,
    .talent-bulk-panel__search,.sc-search,.ix-search,.resource-search,
    .training-search,.rh-help-search,.rb-search-field,.nc-search,.ui-input-shell
) > :is(input:not([type='hidden']),select) {
    /* These ownership rules must also beat the high-specificity theme adapters. */
    min-width:0; margin:0; padding-block:0; align-self:stretch; box-sizing:border-box;
    height:auto!important; min-height:0!important;
    border:0!important; border-radius:0!important; background:transparent!important;
    box-shadow:none!important; outline:none!important;
}
body.ui-application :is(.candidate-aquarium-page,.propulse-aquarium-page) :is(
    .ta-search,.widgets-search,.technical-search,.connectors-search,.assistant-search,
    .ri-list-search,.ri-list-select,.jobs-search,.recruitment-search,.recruitment-sort,
    .candidate-offers-search,.candidate-offers-location,.ca-search,.help-search,
    .prep-search,.prep-select,.simulation-history-search,.cd-search,.pool-search,
    .talent-bulk-panel__search,.sc-search,.ix-search,.resource-search,
    .training-search,.rh-help-search,.rb-search-field,.nc-search,.ui-input-shell
):focus-within {
    outline:2px solid var(--ui-focus); outline-offset:2px;
}

/* Every single-value combobox shares the branded picker, including compact
   steppers. A hidden picker icon changes only the trigger, never its menu.
   The option rules remain a fallback for browsers without base-select. */
body select option,
body select optgroup {
    color: var(--ui-text); background-color: var(--ui-surface);
    font-family: var(--ui-font); font-size: var(--ui-text-sm);
}
body select option { min-height: 38px; padding: 9px 12px; }
body select option:checked {
    color: var(--ui-accent); background-color: var(--ui-accent-soft);
    background-image: linear-gradient(var(--ui-accent-soft), var(--ui-accent-soft));
    font-weight: 750;
}
body select option:disabled { color: var(--ui-muted); background-color: var(--ui-subtle); }
body select optgroup { color: var(--ui-muted); font-weight: 750; }

/* Search suggestions and hierarchical comboboxes keep their existing layout
   and keyboard behavior, but use the same palette as standard selects. */
body [role="listbox"] {
    color: var(--ui-text); background-color: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius);
}
body [role="listbox"] [role="option"] {
    color: var(--ui-text); background-color: var(--ui-surface); border-radius: var(--ui-radius-sm); font-family: var(--ui-font);
}
body [role="listbox"] [role="option"]:is(:hover, :focus-visible, [aria-selected="true"]):not(:disabled):not([aria-disabled="true"]) {
    color: var(--ui-accent); background-color: var(--ui-accent-soft);
}
body [role="listbox"] [role="option"]:is(:disabled, [aria-disabled="true"]) {
    color: var(--ui-muted); background-color: var(--ui-subtle); cursor: not-allowed;
}

@supports (appearance: base-select) {
    body select:not([multiple]):not([size]),
    body select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }
    body select:not([multiple]):not([size]) {
        display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; cursor: pointer;
    }
    body select:not([multiple]):not([size])::picker-icon {
        margin-inline-start: auto; color: var(--ui-accent); rotate: 0deg; transition: transform .16s ease;
    }
    body select:not([multiple]):not([size]):open::picker-icon { transform: rotate(180deg); }
    body select:not([multiple]):not([size])[data-ui-select-icon="hidden"] { justify-content: center; }
    body select:not([multiple]):not([size])[data-ui-select-icon="hidden"]::picker-icon { display: none; }
    body select:not([multiple]):not([size])::picker(select) {
        max-height: min(320px, 55vh); overflow-y: auto;
        max-width: calc(100vw - 24px); box-sizing: border-box;
        margin-block: 5px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
        padding: 6px; background: var(--ui-surface); color: var(--ui-text);
        box-shadow: 0 14px 34px #10264824;
    }
    body select:not([multiple]):not([size]) option {
        min-height: 38px; display: flex; align-items: center; gap: 10px;
        border-radius: var(--ui-radius-sm); padding: 9px 11px;
        color: var(--ui-text); background: var(--ui-surface); cursor: pointer;
        white-space: normal; overflow-wrap: anywhere;
    }
    body select:not([multiple]):not([size]) option:hover,
    body select:not([multiple]):not([size]) option:focus-visible {
        color: var(--ui-accent); background: var(--ui-accent-soft); outline: none;
    }
    body select:not([multiple]):not([size]) option:checked {
        color: var(--ui-accent); background: var(--ui-accent-soft); font-weight: 750;
    }
    body select:not([multiple]):not([size]) option::checkmark {
        order: 1; margin-inline-start: auto; color: var(--ui-accent); font-weight: 800;
    }
    body select:not([multiple]):not([size]) option:disabled {
        color: var(--ui-muted); background: var(--ui-subtle); cursor: not-allowed;
    }
}

/* Recruiter Aquarium panels use the recruiter radius rather than the candidate scale. */
body.ui-recruiter .propulse-aquarium-page { --ca-radius-panel: var(--ui-recruiter-radius,8px); }

/* The two page templates: standard and wide. Full-bleed editors retain their grids. */
body.ui-application .rh-main:where(:not(.ta):not(.technical-console):not(.jc):not(.ae):not(.jb):not(.company-editor-main)) {
    padding-inline: var(--ui-page-gutter); padding-top: var(--ui-space-5); max-width: var(--ui-page-width);
}
body.ui-application .rh-main.agenda-page { max-width: var(--ui-page-wide); }
/* Reports and library screens fill the available width, like the recruiter dashboard.
   Keep the shared page gutters and the internal preview/editor panel layouts. */
body.ui-application .rh-main:is(.analytics-page, [data-rh-screen="analytics"], [data-rh-screen="library-home"], [data-rh-screen="library-assistants"], [data-rh-screen="journeys"], [data-rh-screen="library-resources"], [data-rh-screen="library-tests"], [data-rh-screen="library-projects"], [data-rh-screen="library-criteria"]) {
    width: 100%; max-width: none; justify-self: stretch; box-sizing: border-box;
}
body.ui-application :is(.ta-content, .technical-settings-content, .company-editor-content) { padding-inline: var(--ui-page-gutter); }
body.ui-application :is(.rh-heading, .rh-page-heading, .page-heading, .ta-title, .analytics-heading, .agenda-heading, .assistant-heading, .library-heading, .journey-library__heading, .technical-settings-heading, .company-editor-heading, .profile-heading, .prep-heading, .jc) h1,
body.ui-application :is(.ui-page-title, .job-create__title) {
    font: 750 var(--ui-title)/1.2 var(--ui-font); letter-spacing: -.03em; color: var(--ui-text);
}
body.ui-application :is(.rh-page-heading, .page-heading, .ta-heading, .analytics-heading, .agenda-heading, .assistant-heading, .library-heading, .technical-settings-heading, .company-editor-heading, .profile-heading) p {
    color: var(--ui-muted); font-size: var(--ui-text-sm); line-height: 1.6;
}
/* All recruiter page headers follow the Jobs page rhythm: breadcrumb, title,
   subtitle, then the page controls. Page-specific badges and actions remain. */
body.ui-application :is(.rh-heading, .candidate-list-heading, .recruitment-heading, .library-heading, .analytics-heading, .assistant-heading, .agenda-heading) {
    display: flex; flex-direction:row; flex-wrap:wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; min-width:0; text-align:left;
}
/* Wrap according to the space left by a drawer, rather than the viewport.
   Keep title blocks left-aligned even when actions move to a second line. */
body.ui-application :is(.rh-heading, .candidate-list-heading, .recruitment-heading, .library-heading, .analytics-heading, .assistant-heading, .agenda-heading) > :first-child {
    min-width:0; max-width:100%;
}
body.ui-application :is(.rh-heading, .candidate-list-heading, .recruitment-heading, .library-heading, .analytics-heading, .assistant-heading, .agenda-heading) > :is(.rh-heading-actions,.candidate-list-actions,.analytics-actions,.assistant-heading__actions) {
    flex:0 1 auto; min-width:0; max-width:100%; margin-left:0;
}
@media (min-width:761px) {
    body.ui-application :is(.rh-heading, .candidate-list-heading, .recruitment-heading, .library-heading, .analytics-heading, .assistant-heading, .agenda-heading) > div:first-child:not(.rh-heading-actions,.candidate-list-actions,.analytics-actions,.assistant-heading__actions) { flex:1 1 320px; }
}
body.ui-application :is(.rh-heading, .candidate-list-heading, .library-heading, .analytics-heading, .assistant-heading) h1 {
    margin: 0; color: var(--ui-text); font-size: clamp(28px, 2.5vw, 38px); font-weight: 750; line-height: 1.08; letter-spacing: -.035em;
}
body.ui-application :is(.rh-heading, .candidate-list-heading, .library-heading, .analytics-heading, .assistant-heading) p {
    margin: 5px 0 0; color: var(--ui-muted); font-size: 15px; line-height: 1.5;
}
body.ui-application :is(.rh-heading, .candidate-list-heading, .recruitment-heading, .library-heading, .analytics-heading, .assistant-heading, .agenda-heading) :is(h1,h2,p) { overflow-wrap:anywhere; }
body.ui-application :is(.rh-heading-actions, .candidate-list-actions, .analytics-actions) { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
body.ui-application :is(.rh-quick-actions, .candidate-quick-actions) { padding: 5px; gap: 8px; border: 1px solid var(--ui-border); border-radius: 12px; background: rgba(255,255,255,.76); box-shadow: 0 3px 14px rgba(22,54,72,.045); }
body.ui-application :is(.rh-quick-actions, .candidate-quick-actions) :is(.button, .analytics-button, .cp-button) { min-height: 44px; margin: 0; }
body.ui-application :is(.rh-quick-actions, .candidate-quick-actions) > form { margin: 0; }

/* Recruiter directories and resource hubs share the same page rhythm.
   Opt in without changing their grids, filters, menus or dialogs. */
body.ui-recruiter .rh-main.rh-workspace-page {
    --rh-workspace-inset: 20px;
    --rh-workspace-gap: 16px;
    min-width: 0; width: 100%; max-width: none; margin: 0;
    justify-self: stretch; box-sizing: border-box;
    padding: var(--ui-space-5) var(--ui-page-gutter) 48px;
    color: var(--ui-text); background-color: var(--ui-page);
}

/* The seven recruiter destinations exposed in the primary navigation share
   the same horizontal canvas. Individual screens retain their own vertical
   rhythm and their existing full-width/editor behaviour. */
@media screen {
    body.ui-application.ui-recruiter .rh-main.rh-menu-page[class] {
        min-width: 0; width: 100%; max-width: none; margin-inline: 0;
        justify-self: stretch; box-sizing: border-box;
        padding-left: var(--ui-page-gutter);
        padding-right: var(--ui-page-gutter);
    }
    /* Detail drawers legitimately consume the right gutter while open. */
    body.ui-application.ui-recruiter .rh-main.rh-menu-page.recruiter-candidates--detail {
        padding-right: var(--candidate-content-right-padding);
    }
    body.ui-application.ui-recruiter .rh-main.rh-menu-page.jobs-workspace.drawer-open {
        padding-right: calc(var(--ui-page-gutter) + 316px);
    }
    @media (max-width: 820px) {
        body.ui-application.ui-recruiter .rh-main.rh-menu-page:is(.recruiter-candidates--detail, .jobs-workspace.drawer-open) {
            padding-right: var(--ui-page-gutter);
        }
    }
}
body.ui-recruiter .rh-workspace-page > .rh-breadcrumb { margin-bottom: 12px; }
body.ui-recruiter .rh-workspace-page :is(.le-heading-actions, .rh-heading-actions) > .button:not(.button--text):not(.text) { min-height: var(--ui-control-height); }
body.ui-recruiter .rh-workspace-page .le-heading-actions > .le-menu > summary { width: var(--ui-control-height); height: var(--ui-control-height); border-radius: var(--ui-radius); }
body.ui-recruiter .rh-workspace-page :is(.le-directory, .ri-list-card, .library-card, .library-model-callout, .library-configuration-callout) {
    border-color: var(--ui-border); border-radius: var(--ui-radius-card);
    color: var(--ui-text); background-color: var(--ui-surface);
    box-shadow: 0 3px 14px color-mix(in srgb, var(--ui-text) 4%, transparent);
}
body.ui-recruiter .rh-workspace-page .library-grid { grid-template-columns: repeat(auto-fill,minmax(min(100%,380px),1fr)); gap: var(--rh-workspace-gap); }
body.ui-recruiter .rh-workspace-page .library-card { padding: var(--rh-workspace-inset); }
body.ui-recruiter .rh-workspace-page .library-card:is(:hover,:focus-within):not(.library-card--soon) { border-color: var(--ui-input-border); box-shadow: var(--ui-shadow); }
body.ui-recruiter .rh-workspace-page .library-card h2 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
body.ui-recruiter .rh-workspace-page .library-category-icon { width: 48px; height: 48px; border-radius: var(--ui-radius); }
body.ui-recruiter .rh-workspace-page .library-category-icon .lib-icon { width: 26px; height: 26px; }
body.ui-recruiter .rh-workspace-page .library-card__heading { gap: 14px; }
body.ui-recruiter .rh-workspace-page .le-directory { padding: var(--rh-workspace-inset) var(--rh-workspace-inset) 0; }
body.ui-recruiter .rh-workspace-page .le-filters { margin: 0; }
body.ui-recruiter .rh-workspace-page .le-filter-note { margin: 8px 0 16px; }
body.ui-recruiter .rh-workspace-page .le-directory-footer { padding: 14px 0; }
body.ui-recruiter .rh-workspace-page .le-groups { gap: 12px; }
body.ui-recruiter .rh-workspace-page .le-group { border-radius: var(--ui-radius-card); }
body.ui-recruiter .rh-workspace-page .le-filters :is(input,select) { height: var(--ui-control-height); min-height: var(--ui-control-height); font-size: 13px; }
body.ui-recruiter .rh-workspace-page :is(.le-search,.le-sort) > .icon { top: 13px; }
body.ui-recruiter .rh-workspace-page .ri-list-toolbar { gap: 12px; padding: var(--rh-workspace-inset); }
body.ui-recruiter .rh-workspace-page .ri-list-summary { padding-inline: var(--rh-workspace-inset); }
body.ui-recruiter .rh-workspace-page .ri-list-table-wrap { margin-inline: var(--rh-workspace-inset); }
body.ui-recruiter .rh-workspace-page .ri-list-footer { padding: 14px var(--rh-workspace-inset); }
body.ui-recruiter .rh-workspace-page .ri-modal {
    --ri-ink: var(--ui-text); --ri-muted: var(--ui-muted); --ri-teal: var(--ui-accent); --ri-line: var(--ui-border);
    color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-border);
}
body.ui-recruiter .rh-workspace-page .ri-modal footer { background: var(--ui-surface); }
body.ui-recruiter .rh-workspace-page .ri-field :is(input,select,textarea) { color: var(--ui-text); background: var(--ui-surface); border-color: var(--ui-input-border); }
body.ui-recruiter .rh-workspace-page .ri-mode label { border-color: var(--ui-border); }
body.ui-recruiter .rh-workspace-page .ri-mode label:has(input:checked) { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
body.ui-recruiter .rh-workspace-page .ri-mode input { accent-color: var(--ui-accent); }
body.ui-recruiter .rh-workspace-page .ri-icon { color: var(--ui-accent); background: var(--ui-accent-soft); }
@media (max-width: 640px) {
    body.ui-recruiter .rh-main.rh-workspace-page { --rh-workspace-inset: 16px; --rh-workspace-gap: 12px; }
    body.ui-recruiter .rh-workspace-page .le-heading-actions { margin-top: 0; }
    body.ui-recruiter .rh-workspace-page .le-summary { flex-wrap: wrap; }
}

/* Gestion recruteur: all screens use one outer rhythm and one title scale.
 * Full-width editors keep their own grids; only their content column is aligned. */
body.ui-recruiter-configuration {
    --rh-management-gutter: var(--ui-page-gutter);
    --rh-management-top: var(--ui-space-5);
    /* The technical-settings overview is the reference for all 11 screens. */
    --rh-management-heading-gap: 16px;
    --rh-management-section-title: 17px;
    --rh-management-copy: 12px;
    --rh-management-card-gap: 14px;
    --rh-management-card-padding: 16px 20px;
}
/* Management pages fill the area left by the navigation. Put the shared inset
   on the content column, never on both an editor shell and its inner content. */
body.ui-recruiter.ui-recruiter-configuration .rh-main {
    width: 100%; min-width: 0; max-width: none; margin: 0;
    justify-self: stretch; box-sizing: border-box;
}
body.ui-recruiter-configuration :is(
    .organization-account, .ta-content, .company-editor-content,
    .connectors-content, .widgets-content,
    .rh-main:not([data-rh-screen^="business-"]):where(:not(.ta):not(.technical-console):not(.company-editor-main):not(.connectors-page):not(.widgets-main):not(.de-editor))
) {
    box-sizing: border-box;
    padding-top: var(--rh-management-top);
    padding-inline: var(--rh-management-gutter);
}
body.ui-recruiter-configuration :is(
    .ta-content, .company-editor-content, .technical-settings-content,
    .connectors-content, .widgets-content, .br-detail-content
) {
    min-width: 0; width: 100%; max-width: none; margin: 0; box-sizing: border-box;
}
/* Billing already receives its gutter from .rh-main: its nested grid must
   occupy the available column without adding a second page inset. */
body.ui-recruiter-configuration :is(.rb-page, .rb-page__layout, .rb-page__content) {
    width: 100%; min-width: 0; max-width: none; margin: 0; padding: 0; box-sizing: border-box;
}
body.ui-recruiter-configuration .rh-main.technical-console .technical-settings-content {
    padding-top: var(--rh-management-top);
    padding-left: var(--rh-management-gutter);
    padding-right: calc(var(--rh-management-gutter) + var(--technical-panel-width) + var(--technical-panel-gap));
}
body.ui-recruiter-configuration .br-detail-content {
    padding-top: var(--rh-management-top);
    padding-inline: var(--rh-management-gutter);
}
body.ui-recruiter-configuration .br-detail-actions {
    margin-inline: calc(var(--rh-management-gutter) * -1);
    padding-inline: var(--rh-management-gutter);
}
body.ui-recruiter-configuration .rh-main :is(.rh-breadcrumb, .training-breadcrumb) {
    min-height: 0; margin: 0 0 5px; gap: 8px;
    font-size: var(--rh-management-copy); line-height: 1.45;
}
body.ui-recruiter-configuration .rh-main :is(.rh-breadcrumb .breadcrumb__separator, .training-breadcrumb > [aria-hidden]) {
    margin-inline: 2px;
}
/* A legacy form footer shares this class with the overview search toolbar. */
body.ui-recruiter-configuration .technical-settings-heading > .technical-settings-actions { margin: 0; }
body.ui-recruiter-configuration :is(
    .organization-account__heading, .ta-heading, .company-editor-heading,
    .connectors-heading, .widgets-heading, .br-page-heading,
    .rb-heading, .rs-heading, .rh-help-heading, .training-heading
) {
    margin-top: 0;
    margin-bottom: var(--rh-management-heading-gap);
    min-height: 0;
    gap: 14px 24px;
}
body.ui-recruiter-configuration :is(
    .organization-account__heading, .ta-heading, .company-editor-heading,
    .technical-settings-heading, .connectors-heading, .widgets-heading,
    .br-page-heading, .rh-page-heading, .rb-heading, .rs-heading,
    .rh-help-heading, .training-heading
) h1 {
    margin: 0;
    color: var(--ui-text);
    font: 750 var(--ui-title)/1.2 var(--ui-font);
    letter-spacing: -.03em;
}
body.ui-recruiter-configuration :is(
    .organization-account__heading, .ta-heading, .company-editor-heading,
    .technical-settings-heading, .connectors-heading, .widgets-heading,
    .br-page-heading, .rh-page-heading, .rb-heading, .rs-heading,
    .rh-help-heading, .training-heading
) p {
    margin: 4px 0 0;
    color: var(--ui-muted);
    font-size: var(--ui-text-sm);
    line-height: 1.6;
}
/* Deliberately target editor/card text, not the candidate-facing employer-brand
   modal, embedded widget preview, metrics, or dialog typography. */
body.ui-recruiter-configuration :is(
    .organization-account__import, .organization-account__card, .company-editor-card,
    .ta-toolbar, .ta-access-guide, .connectors-panel, .connectors-catalog,
    .widgets-card-heading, .rb-card, .rs-card, .rh-help-tickets, .rh-help-center,
    .rh-help-guidance, .training-featured, .training-aside, .training-empty
) h2,
body.ui-recruiter-configuration .br-rule-copy > strong,
body.ui-recruiter-configuration .connectors-card strong,
body.ui-recruiter-configuration .training-copy h3 {
    font-size: var(--rh-management-section-title);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
}
body.ui-recruiter-configuration :is(
    .organization-account__import, .organization-account__card, .company-editor-card,
    .ta-access-guide, .connectors-panel, .connectors-notice,
    .widgets-card-heading, .rb-card, .rs-card, .rh-help-tickets,
    .rh-help-center, .rh-help-guidance, .training-copy, .training-aside
) p,
body.ui-recruiter-configuration :is(
    .br-rule-copy > small, .br-banner p, .connectors-card__copy > span:not(.connectors-badge),
    .connectors-details, .connectors-security, .widgets-notice,
    .training-meta, .training-price span
) {
    font-size: var(--rh-management-copy);
    line-height: 1.45;
}
/* Heading subtitles retain their own scale, including Security's nested header. */
body.ui-recruiter-configuration .rs-page .rs-heading p { font-size: var(--ui-text-sm); line-height: 1.6; }
body.ui-recruiter-configuration :is(
    .ta-access-cards h3, .rb-card h3, .rh-help-center h3, .training-benefit h3
) { font-size: var(--ui-text-sm); line-height: 1.4; }
body.ui-recruiter-configuration :is(
    .organization-account__import, .organization-account__card > header,
    .organization-account__grid, .company-editor-card,
    .ta-toolbar, .ta-access-cards article, .br-rule-card,
    .connectors-panel, .connectors-card, .widgets-card,
    .rb-card, .rs-secured, .rs-score, .rs-authentication, .rs-api, .rs-users, .rs-activity,
    .rh-help-tickets, .rh-help-center, .rh-help-guidance,
    .training-benefits, .training-help, .training-advice
) { padding: var(--rh-management-card-padding); }
body.ui-recruiter-configuration :is(
    .organization-account__grid, .company-field-grid, .ta-access-cards,
    .br-rule-grid, .connectors-overview, .connectors-catalog__grid,
    .widgets-editor-grid, .widgets-lower-grid, .rb-card-grid,
    .rb-page__content, .rs-security-overview, .rs-shortcuts, .rs-main-grid,
    .rs-bottom-grid, .rh-help-layout, .training-layout, .training-featured-grid,
    .training-list, .training-aside
) { gap: var(--rh-management-card-gap); }
body.ui-recruiter-configuration :is(
    .connectors-toolbar, .widgets-filters, .training-filters
) { gap: var(--rh-management-card-gap); margin-bottom: var(--rh-management-card-gap); }
body.ui-recruiter-configuration :is(
    .organization-account__grid label > span, .company-editor-card .field > span
) { font-size: var(--rh-management-copy); line-height: 1.5; }
body.ui-recruiter-configuration :is(
    .organization-account__grid, .company-editor-card
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
    min-height: 37px;
    height: 37px;
    font-size: var(--rh-management-copy);
}
body.ui-recruiter-configuration :is(.ta-search, .connectors-search, .widgets-search, .training-search, .rh-help-search, .br-search-control) {
    height: 40px; min-height: 40px; padding-inline: 12px; gap: 10px;
}
body.ui-recruiter-configuration :is(.ta-search, .connectors-search, .widgets-search, .training-search, .rh-help-search, .br-search-control) input {
    min-width: 0; font-size: var(--rh-management-copy);
}
body.ui-recruiter-configuration :is(.connectors-select, .widgets-filters .widgets-company, .training-filters select) {
    height: 40px; min-height: 40px; font-size: var(--rh-management-copy);
}
body.ui-recruiter-configuration :is(.connectors-button, .widgets-button, .rh-help-primary) {
    min-height: var(--ui-control-height); font-size: var(--ui-text-sm); line-height: 1.35;
}
body.ui-recruiter-configuration .training-heading-actions .button {
    min-width: 0; min-height: var(--ui-control-height); padding: 10px 16px;
}
body.ui-recruiter-configuration :is(.connectors-footer, .widgets-page-footer) {
    padding-inline: var(--rh-management-gutter);
}
body.ui-recruiter-configuration .ta-access-guide { margin-top: 24px; }
body.ui-recruiter-configuration .ta-table-scroll { position: relative; }
body.ui-recruiter-configuration :is(.company-editor-nav h2, .ta-panel-header h2, .rb-aside h2) {
    font-size: 20px; line-height: 1.45;
}
body.ui-recruiter-configuration :is(.company-editor-nav nav > button, .company-editor-nav nav > a, .ta-view, .rb-aside nav a) {
    font-size: 12.5px;
}
body.ui-recruiter-configuration .training-card { padding: var(--rh-management-card-padding); }
body.ui-recruiter-configuration .training-card--featured { grid-template-rows: minmax(98px,auto) auto auto; }
body.ui-recruiter-configuration .training-featured { margin-bottom: var(--rh-management-card-gap); }
@media (max-width: 760px) {
    body.ui-application :is(.rh-heading, .candidate-list-heading, .recruitment-heading, .library-heading, .analytics-heading, .assistant-heading, .agenda-heading) { flex-direction: column; align-items: stretch; gap: 12px; }
    body.ui-application :is(.rh-heading-actions, .candidate-list-actions, .analytics-actions) { justify-content: flex-start; }
    body.ui-application :is(.rh-quick-actions, .candidate-quick-actions) { width: 100%; box-sizing: border-box; }
}
@media (max-width: 820px) {
    body.ui-recruiter-configuration {
        --rh-management-gutter: var(--ui-space-4);
        --rh-management-top: 20px;
    }
    body.ui-recruiter-configuration .rh-main.technical-console .technical-settings-content {
        padding-right: var(--rh-management-gutter);
    }
    body.ui-recruiter-configuration .br-detail-actions {
        margin-inline: 0;
    }
    body.ui-recruiter-configuration .widgets-heading-actions {
        max-width: 100%; flex-wrap: wrap;
    }
}
@media (max-width: 560px) {
    body.ui-recruiter-configuration {
        --rh-management-gutter: var(--ui-space-3);
        --rh-management-top: 18px;
        --rh-management-card-padding: 16px 14px;
    }
}
@media (max-width: 600px) {
    body.ui-recruiter-configuration .training-card--featured { grid-template-rows: auto; }
}
body.ui-application :is(.ui-card, .card, .rh-card, .ta-card, .analytics-card, .assistant-card, .company-editor-card, .profile-card) {
    background-color: var(--ui-surface); border-color: var(--ui-border); border-radius: var(--ui-radius-card);
}
/* Card surfaces across public, candidate and recruiter pages. Keep controls,
   avatars, menus and dialogs on their own radius tokens. */
body :is(
    .ui-card, .card, .rh-card, .ta-card, .analytics-card, .assistant-card,
    .company-editor-card, .profile-card, .qualification-card, .pricing-card,
    .auth-card--recovery, .job-card, .feature-card, .interview-card,
    .consent-card, .complete-card, .question-card, .admin-table-card,
    .candidate-scorecard, .candidate-interview-card, .candidate-offer-card,
    .ci-offer-card, .ae-card, .jc-card, .ri-card, .mc-card, .mc-card-select,
    .jb-palette-card, .jb-template-card, .jb-step, .library-card,
    .prep-explore-card, .prep-list-card, .prep-side-card, .public-job-card,
    .qualification-score-card, .candidate-table-card, .agenda-event-card,
    .offer-card, .session-card, .rh-info-card, .rh-help-card, .rh-ready-card,
    .technical-help-card, .technical-overview-card, .ta-access-cards article,
    .team-panel, .form-panel, .access-panel, .score-panel, .criteria-panel,
    .decision-panel, .admin-panel, .portal-panel, .company-facts-panel,
    .progress-panel
) { border-radius: var(--ui-radius-card); }
/* This card joins a cover image: only the outside corners are rounded. */
body .company-hero > img { border-radius: var(--ui-radius-card) var(--ui-radius-card) 0 0; }
body .company-card { border-radius: 0 0 var(--ui-radius-card) var(--ui-radius-card); }
body .rh-sticky-actions.company-profile-actions,
body .technical-settings-actions { border-radius: 0 0 var(--ui-radius-card) var(--ui-radius-card); }
.ui-card { padding: var(--ui-space-5); border: 1px solid var(--ui-border); }
.ui-muted { color: var(--ui-muted); }
.ui-stack { display: grid; gap: var(--ui-space-5); }

/* Navigation panels share a width, top offset, spacing and scroll model.
 * Detail drawers keep a separate, wider token. Their existing open/close JS is preserved. */
body.ui-application :is(.ta-sidebar, .assistant-categories, .company-editor-nav, .technical-settings-panel, .ui-panel) {
    background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border);
}
body.ui-application :is(.ta-panel-header, .technical-panel-header, .ui-panel__header) { padding: var(--ui-space-5); }
body.ui-application :is(.ta-panel-footer, .assistant-categories-footer, .ui-panel__footer) { padding: var(--ui-space-4) var(--ui-space-5); border-top: 1px solid var(--ui-border); }
@media (prefers-reduced-motion: no-preference) {
    body.ui-application :is(.agenda-layout, .ta, .company-editor-workspace, .assistant-library) {
        transition: grid-template-columns .3s cubic-bezier(.22,.8,.3,1);
    }
}
.ui-panel { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--ui-border); }
.ui-panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--ui-space-5); }
body.ui-application .technical-settings-panel { width: min(var(--ui-panel-width), 100vw); top: var(--ui-header-height); height: calc(100dvh - var(--ui-header-height)); }
body.ui-application :is(.ta-panel-header, .technical-panel-header, .assistant-categories-heading) h2 { font-size: 20px; line-height: 1.3; }
@media (min-width: 1151px) {
    body.ui-application .agenda-layout.has-summary { grid-template-columns: minmax(0, 1fr) var(--ui-panel-width); }
    body.ui-application .agenda-layout.has-detail { grid-template-columns: minmax(0, 1fr) var(--ui-detail-width); }
}
@media (min-width: 1321px) {
    body.ui-application .ta:not(.ta--panel-closed) { grid-template-columns: minmax(0, 1fr) var(--ui-panel-width); }
    body.ui-application .ta-sidebar { width: var(--ui-panel-width); justify-self:end; top: var(--ui-header-height); height: calc(100dvh - var(--ui-header-height)); }
}
@media (min-width: 1051px) {
    body.ui-application .company-editor-workspace {
        grid-template-columns: minmax(0, 1fr) var(--ui-panel-width);
        min-height: calc(100dvh - var(--ui-header-height));
    }
    /* The recruiter scroll viewport already starts below the fixed header.
       Keep the section rail flush with both viewport edges and outside the
       save bar, which only belongs to the editable content column. */
    body.ui-application .company-editor-nav {
        top: 0;
        align-self: start;
        height: calc(100dvh - var(--ui-header-height));
        min-height: calc(100dvh - var(--ui-header-height));
        margin: 0;
        border-radius: 0;
    }
    body.ui-application .company-editor-footer { right: var(--ui-panel-width); }
    body.ui-application .assistant-library:not(.is-categories-closed) { grid-template-columns: minmax(0, 1fr) var(--ui-panel-width); }
    body.ui-application .assistant-categories { width: var(--ui-panel-width); justify-self:end; top: calc(var(--ui-header-height) + var(--ui-space-5)); max-height: calc(100dvh - var(--ui-header-height) - 48px); }
}

/* Header/popover surfaces and spacing are shared across both portals. */
body.ui-application :is(.rh-sidebar, .sidebar, .rh-topbar, .topbar, .rh-bottom-nav, .bottom-nav, .account-popover, .rh-settings-popover, .company-editor-footer) {
    background: var(--ui-surface); color: var(--ui-text); border-color: var(--ui-border);
}
body.ui-application :is(.rh-account-button, .account-button, .rh-settings-popover a, .account-popover a, .account-popover button) { color: var(--ui-text); }
body.ui-application :is(.account-popover a, .account-popover button):hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
body.ui-application .rh-top-actions__separator { background: var(--ui-border); }
body.ui-application :is(.icon-button, .rh-mobile-menu) { color: var(--ui-text); }
body.ui-application .rh-nav-item { --nav-icon-rest: var(--ui-muted); --nav-icon-active: var(--ui-accent); }
body.ui-application .icon-button:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
:root[data-theme="dark"] .ui-application :is(.rh-brand, .rh-mobile-brand, .sidebar > .brand) img { filter: brightness(0) invert(1); }

/* Analytics colors convey meaning in every theme, without repainting chart data. */
body.ui-application .analytics-metric { --metric-accent: var(--ui-purple); --metric-bg: var(--ui-purple-soft); --metric-border: var(--ui-border); background: var(--metric-bg); }
body.ui-application .analytics-metric.metric-blue { --metric-accent: var(--ui-info); --metric-bg: var(--ui-info-soft); }
body.ui-application .analytics-metric.metric-teal { --metric-accent: var(--ui-accent); --metric-bg: var(--ui-accent-soft); }
body.ui-application .analytics-metric.metric-amber { --metric-accent: var(--ui-warning); --metric-bg: var(--ui-warning-soft); }
body.ui-application .analytics-metric.metric-coral { --metric-accent: var(--ui-danger); --metric-bg: var(--ui-danger-soft); }
body.ui-application .analytics-metric h2 { color: var(--metric-accent); }
body.ui-application .analytics-metric-icon { color: var(--ui-surface); background: var(--metric-accent); }
body.ui-application .analytics-metric-value { color: var(--ui-text); }
body.ui-application :is(.analytics-metric-pill, .analytics-data-badge) { background: var(--ui-surface); color: var(--ui-muted); border-color: var(--ui-border); }
body.ui-application :is(.analytics-pending-banner, .analytics-priorities.has-priority, .analytics-priority-feature) { background: var(--ui-danger-soft); color: var(--ui-danger); border-color: var(--ui-border); }
body.ui-application :is(.analytics-priority-feature strong, .analytics-priority-feature > div > b, .has-priority > header h2) { color: var(--ui-danger); }
body.ui-application :is(.analytics-source-box, .analytics-source-icon, .analytics-source-heading > span) { background: var(--ui-info-soft); color: var(--ui-info); }
body.ui-application .analytics-text-link { color: var(--ui-info); }
body.ui-application .analytics-page .positive { color: var(--ui-accent); }
body.ui-application .analytics-page .negative { color: var(--ui-warning); }
body.ui-application .analytics-page { background: var(--ui-page); }
body.ui-application .agenda-page { background: var(--ui-page); }
body.ui-application :is(.prep-next, .ci-next-step, .ci-company-logo) { background: var(--ui-accent-soft); }
body.ui-application :is(.prep-topics a.active, .candidate-interview-card .done .interview-journey__stage) { background: var(--ui-accent); color: var(--ui-on-accent); }
body.ui-application :is(.agenda-mini-day.selected > span:first-child, .agenda-month-day.today .agenda-day-number) { background: var(--ui-accent); color: var(--ui-on-accent); }
body.ui-application .ta-table { font-size: var(--ui-text-sm); }
body.ui-application .ta-person strong { font-size: var(--ui-text-sm); }
body.ui-application :is(.ta-panel-header p, .ta-heading p, .ta-search input, .ta-search-tools select, .ta-sidebar .ta-view, .assistant-toolbar select, .assistant-search input, .analytics-filters select) { font-size: var(--ui-text-sm); }
body.ui-application :is(.analytics-card header p, .analytics-chart-legend, .analytics-metric p, .analytics-priority-counts, .analytics-metric h2) { font-size: var(--ui-text-xs); }
body.ui-application .analytics-line-chart .axis { fill: var(--ui-muted); }
body.ui-application .analytics-line-chart .grid { stroke: var(--ui-border); }
body.ui-application .analytics-page svg .track { fill: var(--ui-subtle); }

.ui-help-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: var(--ui-space-5); align-items: start; }
.ui-help-links { display: grid; gap: var(--ui-space-3); }
.ui-help-links a { color: var(--ui-accent); }
.ui-help-grid details { padding-block: var(--ui-space-4); border-bottom: 1px solid var(--ui-border); }
.ui-help-grid summary { cursor: pointer; font-weight: 650; }
.ui-help-grid p { color: var(--ui-muted); line-height: 1.65; }
@media (max-width: 820px) {
    .ui-help-grid { grid-template-columns: minmax(0, 1fr); }
    body.ui-application :is(.analytics-actions, .assistant-heading__actions, .ta-actions, .jb-header-actions) { flex-wrap: wrap; }
    body.ui-application :is(.field__input, .ui-input) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    body.ui-application *, body.ui-application *::before, body.ui-application *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    body select:not([multiple]):not([size])::picker-icon { transition: none; }
}

/* Product preference: controls keep their keyboard behaviour, but no browser
   or component focus ring remains visible after a click or a tab change. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus,
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* Title hierarchy: useful context follows the heading; decorative introductory labels are prohibited. */
.title-metadata{font-size:var(--ui-text-sm,13px);font-weight:500;line-height:1.5;letter-spacing:normal!important;text-transform:none!important;margin-block:6px 0}
.ui-recruiter-avatar-link,.ui-recruiter-avatar-slot{display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle;border-radius:50%;line-height:1;text-decoration:none;color:inherit}
.ui-recruiter-avatar-link{cursor:pointer}.ui-recruiter-avatar-link:hover{filter:brightness(.96)}