html, body {
    font-family: 'Outfit', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Reserve clearance at the bottom of every layout's scrollable content so the
   fixed AI chat FAB (bottom-right, see QaiChatFab.razor.css) never sits on top
   of trailing page content - most commonly a form's Save/Cancel action bar. */
.mud-main-content {
    padding-bottom: 88px;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ===== Nav Link — TailAdmin Style ===== */
.q-navlink.mud-nav-link {
    transition: all 0.15s ease;
}

.q-navlink.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--q-primary-rgb, 70, 95, 255), 0.08);
}

.q-navlink.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--q-primary-rgb, 70, 95, 255), 0.12);
    color: var(--q-drawer-active-text, var(--q-primary));
}

.q-navlink.mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--q-primary-rgb, 70, 95, 255), 0.12);
}

.q-navlink.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--q-drawer-active-text, var(--q-primary));
}

.dark .q-navlink.mud-nav-link {
    color: #98a2b3;
}

.dark .q-navlink.mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--q-primary-rgb, 70, 95, 255), 0.1);
}

.dark .q-navlink.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--q-primary-rgb, 70, 95, 255), 0.15);
    color: #7592ff;
}

.dark .q-navlink.mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
    background-color: rgba(var(--q-primary-rgb, 70, 95, 255), 0.15);
}

.dark .q-navlink.mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: #7592ff;
}

/* MudBlazor's own closed-mini-drawer label-hiding rule only matches when the
   icon is the link's literal :first-child with the label as its immediate
   sibling; a ripple/wrapper element in between breaks that match and leaves
   a sliver of the label peeking past the icon rail. Hide it unconditionally
   instead of relying on that fragile structural match. */
.mud-drawer--closed.mud-drawer-mini .mud-navmenu .mud-nav-link .mud-nav-link-text {
    display: none;
}

/* MudBlazor never hides a MudNavGroup's own expand chevron in mini mode -
   only ever designed the mini variant for flat nav links. Left as-is, the
   chevron still tries to sit flush against the row's right edge, which in a
   ~56px-wide icon rail lands right on the drawer's own border. */
.mud-drawer--closed.mud-drawer-mini .mud-navmenu .mud-nav-link .mud-nav-link-expand-icon {
    display: none;
}

/* Nav section labels — TailAdmin style */
.mud-nav-menu .mud-text.mud-typography-subtitle2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #98a2b3;
    padding: 0 0.75rem;
    margin: 1rem 0 0.25rem 0;
}

/* Drawer header spacing */
.mud-drawer-header {
    padding: 2rem 1.25rem 1.75rem;
}

/* Chat/Qai drawers rendered outside a MudLayout (SidebarShell, SubPortalShell):
   MudBlazor only makes a drawer position:fixed when its parent is a MudLayout
   (.mud-drawer:not(.mud-drawer-fixed) falls back to position:absolute), so in
   the custom shells the closed drawer sits 420px past the page's right edge and
   stretches the document with a horizontal scrollbar. Pin these overlay-style
   drawers to the viewport everywhere. */
.mud-drawer.mud-drawer-temporary.chat-drawer,
.mud-drawer.mud-drawer-temporary.qai-chat-drawer {
    position: fixed;
}

/* Global search in AppBar */
.q-global-search.mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}

.q-global-search .mud-input.mud-input-outlined {
    height: 36px;
}

.q-global-search .mud-input.mud-input-outlined .mud-input-outlined-border {
    height: 36px;
}

.q-global-search .mud-input.mud-input-outlined .mud-input-input {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.875rem;
}

.q-global-search .mud-input.mud-input-outlined .mud-icon-button {
    width: 36px;
    height: 36px;
    padding: 6px;
}

.q-global-search .mud-input.mud-input-outlined .mud-input-adornment-start {
    margin-top: 0;
    margin-bottom: 0;
}

/* Global search — semi-transparent on AppBar */
.q-global-search .mud-input.mud-input-outlined {
    background: rgba(255, 255, 255, 0.1);
}

.q-global-search .mud-input.mud-input-outlined .mud-input-input {
    color: #fff;
}

.q-global-search .mud-input.mud-input-outlined .mud-input-input::placeholder {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.q-global-search .mud-input.mud-input-outlined .mud-input-adornment-start {
    color: rgba(255, 255, 255, 0.6);
}

/* Dark mode */
.dark .q-global-search .mud-input.mud-input-outlined {
    background: rgba(255, 255, 255, 0.06);
}

.dark .q-global-search .mud-input.mud-input-outlined .mud-input-input {
    color: #fcfcfd;
}

.dark .q-global-search .mud-input.mud-input-outlined .mud-input-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.dark .q-global-search .mud-input.mud-input-outlined .mud-input-adornment-start {
    color: rgba(255, 255, 255, 0.3);
}

/* ===== Vertical tabs — TailAdmin: pill-style active, bordered containers ===== */
.mud-tabs.mud-tabs-vertical {
    border: 1px solid var(--q-divider, #E4E7EC);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--q-surface, #fff);
}
.mud-tabs.mud-tabs-vertical .mud-tabs-tabbar-wrapper {
    border-right: 1px solid var(--q-divider, #E4E7EC);
    padding: 12px 0;
    min-width: 200px;
}
.mud-tabs.mud-tabs-vertical .mud-tabs-tabbar-wrapper .mud-tab {
    align-items: flex-start;
    text-align: left;
    padding: 10px 16px;
    margin: 2px 8px;
    border-radius: 6px;
    min-height: 0;
}
.mud-tabs.mud-tabs-vertical .mud-tabs-tabbar-wrapper .mud-tab.mud-tab-active {
    background-color: var(--q-primary) !important;
    color: #fff !important;
}
.mud-tabs.mud-tabs-vertical .mud-tabs-tabbar-wrapper .mud-tab .mud-tab-icon-text {
    justify-content: flex-start;
    flex-direction: row;
}
.mud-tabs.mud-tabs-vertical .mud-tabs-tabbar-wrapper .mud-tab .mud-tab-icon-text > * + * {
    margin-left: 8px;
}
.mud-tabs.mud-tabs-vertical .mud-tabs-panels {
    padding: 24px;
}

/* ===== Buttons — TailAdmin: sentence case, rounded ===== */
.mud-button-root {
    text-transform: none;
    font-weight: 600;
    border-radius: 0.5rem;
}

/* ===== Inputs — TailAdmin: rounded, better focus ===== */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 0.5rem;
}
.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--q-text-secondary, #98a2b3);
}
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-width: 2px;
    border-color: var(--q-primary) !important;
}
.mud-input-label.mud-input-label-inputcontrol.mud-focused {
    color: var(--q-primary);
}

/* ===== Tables — TailAdmin: uppercase header, subtle hover, rounded ===== */
.mud-table-head .mud-table-cell {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.75rem;
    color: var(--q-text-secondary, #667085);
}
.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: rgba(var(--q-primary-rgb, 70, 95, 255), 0.04) !important;
}
.mud-table-container {
    border: 1px solid var(--q-divider, #E4E7EC);
    border-radius: 1rem;
    /* auto, not hidden: wide tables must scroll sideways rather than clip their last (Actions) column */
    overflow-x: auto;
}
.mud-table {
    border-radius: 1rem;
    box-shadow: none !important;
}

/* ===== Cards & Papers — TailAdmin: border + subtle shadow ===== */
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-card {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    border: 1px solid var(--q-divider, #E4E7EC);
    border-radius: 1rem;
}

/* ===== Dialogs — TailAdmin: rounded ===== */
.mud-dialog {
    border-radius: 1rem;
}
.mud-dialog .mud-dialog-content {
    padding: 24px;
}

/* ===== Horizontal tabs — TailAdmin: cleaner ===== */
.mud-tab {
    text-transform: none;
    font-weight: 500;
    min-width: auto;
    padding: 8px 16px;
}
.mud-tab.mud-tab-active {
    font-weight: 600;
    color: var(--q-primary);
}
.mud-tabs-toolbar-content .mud-tab-slider {
    background-color: var(--q-primary);
}

/* ===== Overlay backdrop ===== */
.q-login-overlay,
.mud-overlay-dialog .mud-overlay-scrim {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(130, 71, 229, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 80%, rgba(11, 165, 236, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 55% 35%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
        linear-gradient(155deg, rgba(130, 71, 229, 0.10) 0%, rgba(11, 165, 236, 0.10) 50%, rgba(16, 185, 129, 0.10) 100%) !important;
    backdrop-filter: blur(4px);
}

/* ─────────────────────────────────────────────────────────────────────────
   Crimson layout (Layout 2 + sub-portals) control theming. ALL rules are
   scoped under .layout2-crimson, so nothing here affects the standard/default
   layout. Loaded globally (app.css) so it applies inside both SidebarShell
   (admin/portal) and SubPortalShell (reviews/recruitment) content.
   ───────────────────────────────────────────────────────────────────────── */
.layout2-crimson {
    /* MudBlazor palette (drives all Mud components). */
    --mud-palette-primary: #c02418;
    --mud-palette-primary-rgb: 192, 36, 24;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-hover: rgba(192, 36, 24, 0.08);
    --mud-palette-primary-darken: #9b1c13;
    --mud-palette-primary-lighten: #d6453a;
    --mud-palette-secondary: #9b1c13;
    --mud-palette-secondary-rgb: 155, 28, 19;

    /* App accent vars (drive the q-* Tailwind utilities + icon-container-*). */
    --q-primary: #c02418;
    --q-primary-rgb: 192, 36, 24;
    --q-secondary: #9b1c13;
    --q-secondary-rgb: 155, 28, 19;
}

/* Buttons — rounded + sentence case, matching the Reviews 360 pages. */
.layout2-crimson .mud-button-root {
    border-radius: 0.5rem;
    text-transform: none;
    font-weight: 600;
}
.layout2-crimson .mud-button-filled.mud-button-filled-primary {
    background-color: #c02418;
    color: #ffffff;
}
.layout2-crimson .mud-button-filled.mud-button-filled-primary:hover {
    background-color: #9b1c13;
}
.layout2-crimson .mud-button-outlined.mud-button-outlined-primary {
    border-color: #c02418;
    color: #9b1c13;
}

/* Text / select / numeric inputs — outlined, rounded, higher-contrast border. */
.layout2-crimson .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 0.5rem;
    border-color: #B9C0CC;
}
.layout2-crimson .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #8B93A3;
}
.layout2-crimson .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #c02418 !important;
    border-width: 2px;
}
.layout2-crimson .mud-input-label.mud-input-label-inputcontrol.mud-focused {
    color: #c02418;
}
.layout2-crimson .mud-input.mud-input-outlined .mud-input-slot {
    border-radius: 0.5rem;
}

/* Cards / papers / tables — soft, rounded, lightly bordered surfaces. */
.layout2-crimson .mud-paper,
.layout2-crimson .mud-card,
.layout2-crimson .mud-table,
.layout2-crimson .mud-table-container {
    border-radius: 1rem;
}
.layout2-crimson .mud-paper.mud-elevation-1,
.layout2-crimson .mud-paper.mud-elevation-2,
.layout2-crimson .mud-card {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    border: 1px solid #EEF0F3;
}

/* Chips / badges pick up the crimson accent. */
.layout2-crimson .mud-chip.mud-chip-color-primary {
    background-color: #c02418;
    color: #ffffff;
}

/* Table header — subtle crimson-tinted heading like the reviews tables. */
.layout2-crimson .mud-table-head .mud-table-cell {
    color: #9b1c13;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.75rem;
}
.layout2-crimson .mud-table-hover .mud-table-body .mud-table-row:hover {
    background-color: rgba(192, 36, 24, 0.04) !important;
}
.layout2-crimson .mud-table-container {
    border: 1px solid #F3F4F6;
}

/* Tabs / nav underline accent. */
.layout2-crimson .mud-tab.mud-tab-active {
    color: #c02418;
}
.layout2-crimson .mud-tabs-toolbar-content .mud-tab-slider {
    background-color: #c02418;
}

/* Alerts — rounded, consistent with the card language. */
.layout2-crimson .mud-alert {
    border-radius: 0.75rem;
}

/* Progress bars — rounded track/fill. */
.layout2-crimson .mud-progress-linear,
.layout2-crimson .mud-progress-linear .mud-progress-linear-bar {
    border-radius: 9999px;
}

/* Expansion panels — rounded surfaces. */
.layout2-crimson .mud-expansion-panels .mud-expand-panel {
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
}

/* Keep h6 headings dark for readability on the white content panel. */
.layout2-crimson .mud-typography.mud-typography-h6 {
    color: #1D2939;
}

/* Links pick up crimson. */
.layout2-crimson a.mud-link.mud-link-primary,
.layout2-crimson a.mud-typography-color-primary {
    color: #9b1c13;
}

/* Avatars / badges tinted primary follow crimson. */
.layout2-crimson .mud-avatar.mud-avatar-color-primary,
.layout2-crimson .mud-badge .mud-badge-color-primary {
    background-color: #c02418;
    color: #ffffff;
}

/* ---- Likert scale (single-row, red→green blocks) ----
   Horizontal equal-width blocks on desktop; stacks to full-width rows on
   narrow phones so the scale never wraps into an uneven grid. Per-block
   colours come in as inline --accent / --tint CSS vars. */
.q-likert {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.q-likert-opt {
    flex: 1 1 90px;
    min-width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px solid #e0e0e0;
    background: #fff;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s, background-color .12s;
}

.q-likert-opt.q-likert-disabled {
    cursor: default;
}

.q-likert-opt.q-likert-selected {
    border-color: var(--accent);
    background: var(--tint);
}

.q-likert-label {
    font-size: 0.8rem;
    line-height: 1.2;
}

.q-likert-opt.q-likert-selected .q-likert-label {
    font-weight: 600;
    color: var(--accent);
}

@media (max-width: 600px) {
    .q-likert {
        flex-direction: column;
    }

    .q-likert-opt {
        flex: 1 1 auto;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        text-align: left;
        padding: 10px 16px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Dialogs. MudDialogProvider sits OUTSIDE ScopeLayoutResolver in every
   layout, so dialog content never sits inside .layout2-crimson — the crimson
   control theming above can't reach it. Re-scope the same theming onto
   dialogs via body:has() whenever the crimson shell is on the page, and give
   dialogs the rounded card language in both layouts.
   ───────────────────────────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: 1rem;
}
.mud-dialog .mud-dialog-title {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--q-divider, #E4E7EC);
}
.mud-dialog .mud-dialog-content {
    padding: 1.25rem 1.5rem;
}
.mud-dialog .mud-dialog-actions {
    padding: 0.75rem 1.5rem 1rem;
    gap: 0.5rem;
}

body:has(.layout2-crimson) .mud-dialog {
    --mud-palette-primary: #c02418;
    --mud-palette-primary-rgb: 192, 36, 24;
    --mud-palette-primary-text: #ffffff;
    --mud-palette-primary-hover: rgba(192, 36, 24, 0.08);
    --mud-palette-primary-darken: #9b1c13;
    --mud-palette-primary-lighten: #d6453a;
    --mud-palette-secondary: #9b1c13;
    --mud-palette-secondary-rgb: 155, 28, 19;
    --q-primary: #c02418;
    --q-primary-rgb: 192, 36, 24;
    --q-secondary: #9b1c13;
    --q-secondary-rgb: 155, 28, 19;
}
body:has(.layout2-crimson) .mud-dialog .mud-button-root {
    border-radius: 0.5rem;
    text-transform: none;
    font-weight: 600;
}
body:has(.layout2-crimson) .mud-dialog .mud-button-filled.mud-button-filled-primary {
    background-color: #c02418;
    color: #ffffff;
}
body:has(.layout2-crimson) .mud-dialog .mud-button-filled.mud-button-filled-primary:hover {
    background-color: #9b1c13;
}
body:has(.layout2-crimson) .mud-dialog .mud-button-outlined.mud-button-outlined-primary {
    border-color: #c02418;
    color: #9b1c13;
}
body:has(.layout2-crimson) .mud-dialog .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 0.5rem;
    border-color: #B9C0CC;
}
body:has(.layout2-crimson) .mud-dialog .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #8B93A3;
}
body:has(.layout2-crimson) .mud-dialog .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #c02418 !important;
    border-width: 2px;
}
body:has(.layout2-crimson) .mud-dialog .mud-input-label.mud-input-label-inputcontrol.mud-focused {
    color: #c02418;
}
body:has(.layout2-crimson) .mud-dialog .mud-chip.mud-chip-color-primary {
    background-color: #c02418;
    color: #ffffff;
}

/* ---- Form "content" / "submittedpage" page blocks (rich HTML authored in the builder) ----
   Gives landing and thank-you pages a centered, punchy look without needing custom inline
   styles in the sanitized HTML (the sanitizer strips style/align attributes on purpose). */
.q-form-content {
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
    padding: 0.5rem 0;
}
.q-form-content h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    line-height: 1.15;
    font-weight: 800;
    margin: 0.25rem 0 0.75rem;
}
.q-form-content h2 {
    font-size: clamp(1.35rem, 5vw, 1.9rem);
    line-height: 1.2;
    font-weight: 700;
    margin: 0.25rem 0 0.6rem;
}
.q-form-content h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0.25rem 0 0.5rem;
}
.q-form-content p {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 0.75rem;
}
.q-form-content ul,
.q-form-content ol {
    display: inline-block;
    text-align: left;
    margin: 0.25rem auto 0.75rem;
}
.q-form-content strong { font-weight: 700; }

/* An assessment item's stimulus: a passage or a table of figures the questions are about. Left-aligned
   and full width, because it is read closely rather than glanced at. */
.q-form-passage {
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}
.q-form-passage h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.75rem; }
.q-form-passage p { line-height: 1.6; margin: 0 0 0.75rem; }
.q-form-passage table { border-collapse: collapse; margin: 0.5rem 0 1rem; max-width: 100%; display: block; overflow-x: auto; }
.q-form-passage th,
.q-form-passage td { border: 1px solid var(--mud-palette-lines-default); padding: 0.35rem 0.6rem; text-align: left; }
.q-form-passage th { font-weight: 700; }
.q-form-passage img { display: block; max-width: 100%; height: auto; margin: 0.5rem auto 1rem; background: #fff; }

/* Picture answers: a wrapping row of image-and-letter choices. */
.q-form-image-options { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
.q-form-image-option { display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.q-form-image-option img { display: block; max-width: 140px; max-height: 140px; height: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; background: #fff; }

/* ── Careers pages (CareersLayout, CareersHome): see 2026-10-29-group-careers-page-design.md, section 7.
   Plain CSS rather than Tailwind utilities, which only work when present in the compiled tailwind.css.
   Primary is the tenant's brand colour for headings and dark panels, secondary its button colour. ── */
.q-careers-inter, .q-careers-inter .mud-typography, .q-careers-inter button, .q-careers-inter input, .q-careers-inter select {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.q-careers-text p { margin: 0 0 0.75rem; line-height: 1.6; }
.q-careers-text p:last-child { margin-bottom: 0; }
.q-careers-text ul { list-style: disc; padding-left: 1.25rem; margin: 0.5rem 0; }
.q-careers-text li { margin: 0.25rem 0; }

.q-careers-wrap { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.q-careers-title { text-align: center; font-size: 2rem; font-weight: 700; color: var(--q-primary); margin: 0 0 2rem; }
.q-careers-title::after { content: ""; display: block; width: 7.5rem; height: 1px; margin: 1rem auto 0; background: var(--q-divider); }
.q-careers-button {
    display: inline-block; padding: 0.7rem 1.6rem; background: var(--q-secondary); color: #fff !important;
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important;
    border: 0; border-radius: 2px; cursor: pointer;
}
.q-careers-button:hover { filter: brightness(0.92); }
.q-careers-button-light { background: rgba(255, 255, 255, 0.18); text-transform: none; letter-spacing: 0; }

.q-careers-logos { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 1.5rem; padding: 1.25rem 1rem; background: #fff; }
.q-careers-logos img { height: 4.5rem; max-width: 9rem; object-fit: contain; }

/* As tall as a typical banner photo's shape (about 2:1) at full width, so the image shows whole on a desktop. */
.q-careers-hero {
    display: flex; align-items: center; min-height: clamp(26rem, 47vw, 46rem); padding: 4rem 0;
    background: linear-gradient(90deg, rgba(var(--q-primary-rgb), 0.12), rgba(var(--q-primary-rgb), 0.04)); background-size: cover; background-position: center right;
}
.q-careers-hero > .q-careers-wrap { width: 100%; }
.q-careers-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; text-transform: uppercase; color: var(--q-primary); margin: 0; line-height: 1.1; }
.q-careers-hero p { font-size: clamp(1.2rem, 2.5vw, 1.9rem); color: var(--q-primary); margin: 0.5rem 0 2rem; }

.q-careers-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; margin-top: -2rem; margin-bottom: 4rem; position: relative; }
.q-careers-about-card { background: var(--q-primary); color: #fff; padding: 2rem; }
.q-careers-about-card h2 { font-size: 2rem; font-weight: 700; margin: 0 0 1.5rem; }
.q-careers-about-card .q-careers-button { margin-top: 1.5rem; }
.q-careers-panel { background: var(--q-surface); border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); padding: 2rem; }
.q-careers-panel h3 { text-align: center; font-weight: 700; font-size: 1.25rem; margin: 0 0 1.25rem; color: var(--q-text-primary); }
.q-careers-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.q-careers-video { position: relative; aspect-ratio: 16 / 9; background: var(--q-primary); border-radius: 6px; overflow: hidden; }
.q-careers-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.q-careers-video-placeholder { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; color: #fff; background: none; border: 0; cursor: pointer; }
.q-careers-video-placeholder small { opacity: 0.7; font-size: 0.7rem; }

.q-careers-band { background: rgba(var(--q-secondary-rgb), 0.07); padding: 4rem 0; }
.q-careers-values { display: flex; flex-direction: column; gap: 2rem; max-width: 64rem; margin: 0 auto; }
.q-careers-value { display: flex; gap: 2rem; align-items: center; background: var(--q-surface); border-radius: 8px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); }
.q-careers-value img { width: 6.25rem; height: 6.25rem; object-fit: contain; flex-shrink: 0; }
.q-careers-value h3 { font-size: 1.15rem; font-weight: 700; color: var(--q-text-primary); margin: 0 0 0.75rem; }
.q-careers-value .q-careers-text { font-size: 0.9rem; color: var(--q-text-secondary); }

.q-careers-positions { padding: 4rem 1rem; }
.q-careers-search { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; padding: 1rem; border: 1px solid var(--q-divider); background: var(--q-surface); margin-bottom: 1rem; }
.q-careers-search input, .q-careers-search select { padding: 0.55rem 0.75rem; border: 1px solid var(--q-divider); border-radius: 2px; background: var(--q-surface); color: var(--q-text-primary); font: inherit; }
.q-careers-search select { background: var(--q-primary); color: #fff; }
.q-careers-count { padding: 1rem 1.25rem; border-left: 4px solid #2ecc71; background: rgba(46, 204, 113, 0.08); margin-bottom: 2rem; color: var(--q-text-secondary); }
.q-careers-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 2rem; }
.q-careers-job { display: flex; flex-direction: column; background: var(--q-surface); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); padding: 2rem 2.5rem; text-decoration: none !important; color: var(--q-text-primary) !important; }
.q-careers-job img { height: 3rem; width: 3rem; object-fit: contain; margin-bottom: 0.75rem; }
.q-careers-job h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.q-careers-job-ref { font-size: 0.85rem; color: var(--q-text-secondary); margin: 0.25rem 0 0.75rem; }
.q-careers-job-summary { font-style: italic; color: var(--q-text-secondary); margin: 0 0 1.25rem; flex: 1; }
.q-careers-job dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.5rem; margin: 0 0 1.5rem; font-size: 0.95rem; }
.q-careers-job dt { font-weight: 700; }
.q-careers-job dt::after { content: ":"; }
.q-careers-job dd { margin: 0; }
.q-careers-job .q-careers-button { align-self: flex-start; }

.q-careers-notice { text-align: center; padding-bottom: 4rem; }
.q-careers-notice img { max-width: min(100%, 28rem); margin: 0 auto 1rem; display: block; }

.q-careers-overview { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; padding-bottom: 4rem; }
.q-careers-overview nav { display: flex; flex-direction: column; border-right: 1px solid var(--q-divider); }
.q-careers-overview nav button { text-align: left; padding: 0.6rem 0; background: none; border: 0; font: inherit; font-weight: 600; color: var(--q-primary); cursor: pointer; }
.q-careers-overview nav button.active { color: var(--q-secondary); }
.q-careers-overview-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: start; }
.q-careers-overview-body h3 { font-size: 1.6rem; font-weight: 700; color: var(--q-primary); margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid var(--q-secondary); }
.q-careers-overview-body .q-careers-text { color: var(--q-text-secondary); }
.q-careers-overview-body img { width: 9rem; max-height: 9rem; object-fit: contain; }

.q-careers-gallery { padding-bottom: 4rem; }
.q-careers-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.25rem; }
.q-careers-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.q-careers-help { text-align: center; padding-bottom: 4rem; }
.q-careers-help .q-careers-text { margin-bottom: 1.5rem; }
.q-careers-band + .q-careers-help { padding-top: 4rem; }

@media (max-width: 768px) {
    .q-careers-hero { min-height: 28rem; padding: 3rem 0; }
    .q-careers-about { grid-template-columns: 1fr; margin-top: 0; padding-top: 1.5rem; }
    .q-careers-value { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
    .q-careers-overview { grid-template-columns: 1fr; }
    .q-careers-overview nav { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1rem; border-right: 0; border-bottom: 1px solid var(--q-divider); }
    .q-careers-overview-body { grid-template-columns: 1fr; }
    .q-careers-job { padding: 1.5rem; }
}