/* S2MB.Shell styles (docs/design/shell-spec.md). Loaded after bootstrap.min.css.
   Per-app tokens (--app-brand, --app-primary, --app-primary-dark, --app-accent, --app-signin-bg) come from /shell-theme.css;
   the values below are the S2MB defaults (spec 1.1, revision 2026-10-21; same blues for every app). --app-brand is decorative only (never text). */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }

:root {
    --app-brand: #5B9BD5;
    --app-primary: #2E75B6;
    --app-primary-rgb: 46, 117, 182;
    --app-primary-dark: #1F4E79;
    --app-primary-dark-rgb: 31, 78, 121;
    --app-accent: #F78618;
    --s2mb-text: #2B353B;
    --s2mb-muted: #55606A;
    --s2mb-surface: #F4F4F7;
    --s2mb-input-border: #6C757D;
    --s2mb-border: #D0D6DA;
    --s2mb-danger: #B02A37;
    --s2mb-success: #146C43;
    --s2mb-focus: #1D4ED8;
    --s2mb-shadow: 0 4px 16px rgba(43, 53, 59, .12);

    --bs-primary: var(--app-primary);
    --bs-primary-rgb: var(--app-primary-rgb);
    --bs-link-color: var(--app-primary);
    --bs-link-color-rgb: var(--app-primary-rgb);
    --bs-link-hover-color: var(--app-primary-dark);
    --bs-link-hover-color-rgb: var(--app-primary-dark-rgb);
    --bs-body-color: var(--s2mb-text);
    --bs-body-bg: #FFFFFF;
    --bs-secondary-color: var(--s2mb-muted);
    --bs-border-color: var(--s2mb-border);
    --bs-danger: var(--s2mb-danger);
    --bs-danger-rgb: 176, 42, 55;
    --bs-success: var(--s2mb-success);
    --bs-success-rgb: 20, 108, 67;
    --bs-form-invalid-color: var(--s2mb-danger);
    --bs-form-invalid-border-color: var(--s2mb-danger);
    --bs-body-font-family: Poppins, "Segoe UI", system-ui, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.6;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
}

body.shell-body { display: flex; flex-direction: column; min-height: 100vh; }

a { text-decoration: underline; text-underline-offset: .15em; }

h1, .h1 { font-size: 1.75rem; font-weight: 700; color: var(--app-primary); margin-bottom: 1rem; }
@media (min-width: 992px) { h1, .h1 { font-size: 2rem; } }
h2, .h2 { font-size: 1.25rem; font-weight: 600; color: var(--app-primary); }
.form-label { font-size: .9375rem; font-weight: 600; margin-bottom: .25rem; }
.form-text, .shell-hint, .shell-error-message { font-size: .875rem; }
.form-text, .shell-hint, .shell-muted { color: var(--s2mb-muted); }

/* Focus: 3 px outline instead of Bootstrap's faint shadow (spec 1.2). */
:focus-visible { outline: 3px solid var(--s2mb-focus); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus, .nav-link:focus-visible, .dropdown-item:focus-visible {
    box-shadow: none; outline: 3px solid var(--s2mb-focus); outline-offset: 2px;
}
.shell-nav :focus-visible { outline-color: #FFFFFF; }
.shell-nav .dropdown-menu :focus-visible { outline-color: var(--s2mb-focus); }

.form-control, .form-select, .form-check-input { border-color: var(--s2mb-input-border); }
.form-control.is-invalid, .form-check-input.is-invalid { border-color: var(--s2mb-danger); background-image: none; padding-right: .75rem; }
.form-check-input { width: 1.25em; height: 1.25em; margin-top: .2em; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }

.btn { min-height: 44px; font-weight: 600; }
.btn-sm { min-height: 36px; }
.btn-primary {
    --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-dark); --bs-btn-hover-border-color: var(--app-primary-dark);
    --bs-btn-active-bg: var(--app-primary-dark); --bs-btn-active-border-color: var(--app-primary-dark);
    --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary);
    --bs-btn-active-bg: var(--app-primary-dark);
}
.btn-outline-secondary { --bs-btn-color: var(--s2mb-text); --bs-btn-border-color: var(--s2mb-input-border); --bs-btn-hover-bg: #E9ECEF; --bs-btn-hover-color: var(--s2mb-text); --bs-btn-hover-border-color: var(--s2mb-input-border); }
.btn-outline-danger { --bs-btn-color: var(--s2mb-danger); --bs-btn-border-color: var(--s2mb-danger); --bs-btn-hover-bg: var(--s2mb-danger); --bs-btn-hover-border-color: var(--s2mb-danger); }
.shell-link-button { min-height: 24px; font-weight: 400; text-decoration: underline; color: var(--app-primary); vertical-align: baseline; }

.bi { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -.15em; flex-shrink: 0; }

/* Skip link */
.shell-skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 1100; background: #FFFFFF; color: var(--app-primary); padding: .5rem 1rem; border: 3px solid var(--s2mb-focus); border-radius: .5rem; }

.shell-container { max-width: 1140px; padding-left: 16px; padding-right: 16px; }
@media (min-width: 576px) { .shell-container { padding-left: 24px; padding-right: 24px; } }

/* Header (never sticky, WCAG 2.4.11) */
.shell-header { background: #FFFFFF; border-bottom: 3px solid var(--app-brand); }
/* Logo and app name centred (Mario, 2026-10-21); the user menu sits at the right. */
.shell-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; gap: 1rem; }
.shell-header-inner .shell-brand { grid-column: 2; }
.shell-header-inner .shell-user-menu { grid-column: 3; justify-self: end; }
.shell-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--app-primary); min-height: 44px; }
.shell-logo { height: 32px; width: auto; }
@media (min-width: 768px) { .shell-logo { height: 40px; } }
.shell-app-name { font-weight: 600; color: var(--app-primary); }
.shell-user-button { display: inline-flex; align-items: center; gap: .5rem; color: var(--app-primary); border: 1px solid transparent; }
.shell-user-button:hover { border-color: var(--s2mb-border); color: var(--app-primary-dark); }
.shell-user-button .bi { width: 1.5em; height: 1.5em; }
.dropdown-item { min-height: 44px; display: flex; align-items: center; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--app-primary); color: #FFFFFF; }

/* Main menu bar */
.shell-nav { background: var(--app-primary); padding-top: 0; padding-bottom: 0; }
.shell-nav .navbar-nav { gap: .25rem; }
.shell-nav .nav-link { color: #FFFFFF; font-weight: 600; min-height: 48px; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: 4px solid transparent; border-top: 4px solid transparent; background: none; }
/* Active/hover: --app-primary-dark background under the orange bar (orange on #1F4E79 3.5:1; on #2E75B6 only 1.9:1). */
.shell-nav .nav-link:hover, .shell-nav .nav-link.active, .shell-nav .nav-link.show, .shell-nav .nav-link[aria-current="page"] {
    color: #FFFFFF; background: var(--app-primary-dark); border-bottom-color: var(--app-accent);
}
.shell-menu-toggle { color: #FFFFFF; border: 2px solid rgba(255, 255, 255, .8); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.shell-menu-toggle .bi { width: 1.4em; height: 1.4em; }
@media (max-width: 991.98px) {
    .shell-nav .navbar-nav { padding-bottom: .5rem; }
    .shell-nav .nav-link { width: 100%; }
    .shell-nav .dropdown-menu { background: transparent; border: 0; padding: 0 0 0 1.5rem; }
    .shell-nav .dropdown-item { color: #FFFFFF; }
    .shell-nav .dropdown-item:hover, .shell-nav .dropdown-item:focus { background: var(--app-primary-dark); color: #FFFFFF; }
    .shell-nav .dropdown-menu :focus-visible { outline-color: #FFFFFF; }
}

/* Main */
.shell-main { flex: 1 0 auto; }
.shell-main:focus { outline: none; }
.shell-main-signed-in, .shell-main-plain { background: var(--s2mb-surface); }
.shell-main-plain { background: #FFFFFF; }

/* Sign-in family (Option B pages): logo, form and footer in one card; no brand panel since round 6. */
.shell-body-split { background: #FFFFFF; }
.shell-split { flex: 1 0 auto; display: flex; flex-direction: column; }
.shell-split-form {
    display: flex; flex-direction: column; background: #FFFFFF; min-width: 0;
}
.shell-split-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 48px 16px 24px; }
.shell-split-main:focus { outline: none; }
.shell-split-content { width: 100%; max-width: 440px; }
.shell-split-logo { display: block; height: 64px; width: auto; margin: 0 auto 1.5rem; }
/* Pages keep their .shell-card wrapper; inside the form column it is plain (no box, no shadow). */
.shell-split-content .shell-card { background: none; box-shadow: none; border-radius: 0; padding: 0; max-width: none; }
.shell-split-content .shell-form { max-width: none; }
.shell-signin-head { text-align: center; }
.shell-signin-register { text-align: center; margin: 1.5rem 0 0; }
.shell-btn-block, .shell-split-content .shell-btn-block { width: 100%; min-height: 48px; }

/* No brand panel on any sign-in-family page (Mario, 2026-10-21, round 6): form card only. */
@media (min-width: 576px) {
    .shell-split-main { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 992px) {
    /* Form card centred on the original sign-in background. */
    .shell-body-split {
        background-color: var(--app-primary);
        background-image: linear-gradient(rgba(46, 117, 182, .35), rgba(46, 117, 182, .35)), var(--app-signin-bg);
        background-size: cover; background-position: center; background-attachment: fixed;
        padding: 32px 0;
    }
    .shell-split {
        flex: 0 0 auto; background: #FFFFFF;
        width: calc(100% - 64px); max-width: 600px; margin: auto;
        border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    }
    .shell-split-main { padding: 48px 56px 24px; }
}

.shell-card { background: #FFFFFF; border-radius: .75rem; box-shadow: var(--s2mb-shadow); padding: 24px; color: var(--s2mb-text); }
@media (min-width: 768px) { .shell-card { padding: 32px; } }
.shell-card-narrow { width: 100%; max-width: 480px; }
.shell-card-form { max-width: 720px; }
.shell-card-page > :last-child { margin-bottom: 0; }

.shell-page-icon { width: 2.5rem; height: 2.5rem; color: var(--app-primary); margin-bottom: .75rem; }
.shell-icon-success { color: var(--s2mb-success); }

/* Sign-in family shared parts (spec 3.1): icon circle, status pages, back link, name grid, password checklist. */
.shell-icon-circle {
    display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: 50%; background: #E8EEF6; color: var(--app-primary-dark);
}
.shell-icon-circle .bi { width: 26px; height: 26px; }
.shell-icon-circle.shell-icon-success { color: var(--s2mb-success); }
.shell-status-page { text-align: center; }
.shell-back-link { text-align: center; margin: 1.5rem 0 0; }
.shell-back-link a { display: inline-flex; align-items: center; gap: .4rem; min-height: 24px; }
.shell-back-link .bi { width: 1em; height: 1em; }
.shell-name-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.shell-checklist {
    list-style: none; margin: 0 0 1rem; padding: 12px 16px; border-radius: 8px;
    background: var(--s2mb-surface); font-size: .875rem; display: grid; gap: 6px;
}
.shell-checklist li { display: flex; align-items: center; gap: .5rem; color: var(--s2mb-muted); }
.shell-checklist li.is-met { color: var(--s2mb-success); }
.shell-checklist .bi { width: 16px; height: 16px; flex: none; }
.shell-split-content .form-check-input { width: 20px; height: 20px; margin-top: .2em; }
.shell-split-content .form-check-label { padding-left: .25rem; }

.shell-form { max-width: 440px; }
.shell-card-narrow .shell-form { max-width: none; }
.shell-btn-submit { width: 100%; }
@media (min-width: 576px) { .shell-btn-submit { width: auto; min-width: 10rem; } }
.shell-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.shell-link-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.shell-link-list li { margin-bottom: .5rem; }

/* Show/Hide inside the password field (spec 3.1): 44 px tall, primary text on white, hover #F4F4F7 + primary-dark text. */
.shell-password { position: relative; }
.shell-password .form-control { padding-right: 6.5rem; }
.shell-password-toggle {
    position: absolute; top: 50%; right: 2px; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .75rem;
    background: #FFFFFF; color: var(--app-primary); border: 0; border-radius: .4rem; font-weight: 600; font-size: .9375rem;
}
.shell-password-toggle:hover { background: var(--s2mb-surface); color: var(--app-primary-dark); }
.shell-password-toggle .bi { width: 1.25em; height: 1.25em; }
.shell-field .form-control { min-height: 48px; }
.shell-label-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1rem; margin-bottom: .25rem; }
.shell-label-row .form-label { margin-bottom: 0; }
.shell-label-link { font-size: .9375rem; }
.shell-field-invalid .form-label { color: var(--s2mb-danger); }
.shell-error-message { color: var(--s2mb-danger); font-weight: 600; display: flex; gap: .4rem; align-items: baseline; margin-bottom: .25rem; }
.shell-error-summary { border-width: 2px; }
.shell-error-summary:focus { outline: 3px solid var(--s2mb-focus); outline-offset: 2px; }
.shell-error-summary h2 { color: inherit; }
.shell-error-summary a, .alert a:not(.btn) { color: var(--bs-alert-link-color, inherit); font-weight: 600; }
.shell-alert { display: flex; gap: .5rem; align-items: baseline; }

.shell-readonly dt { font-size: .9375rem; font-weight: 600; }
.shell-readonly dd { margin-bottom: .75rem; }
.shell-steps li { margin-bottom: .75rem; }
.shell-qr { border: 1px solid var(--s2mb-border); }
.shell-key { font-size: 1rem; color: var(--s2mb-text); word-break: break-all; }
.shell-recovery-codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.shell-recovery-codes code { color: var(--s2mb-text); }

.shell-inline-form { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .125rem .5rem .125rem 0; }
.shell-inline-form .form-select { width: auto; }
.shell-search { width: auto; min-width: 14rem; }
.shell-table { --bs-table-bg: #FFFFFF; }
/* Keeps absolutely positioned screen-reader text inside the scroll box, so wide tables never widen the page (WCAG 1.4.10, QA D4). */
.table-responsive { position: relative; }

/* Legal pages */
.shell-legal { max-width: 72ch; }
.shell-legal h2 { margin-top: 2rem; }
.shell-review { background: #FFF3CD; color: #664D03; padding: 0 .25rem; border-radius: .25rem; font-weight: 600; }

/* Footer */
.shell-footer { background: #FFFFFF; border-top: 3px solid var(--app-brand); color: var(--s2mb-muted); font-size: .875rem; padding: 1rem 0; flex-shrink: 0; }
.shell-footer-logo { height: 24px; width: auto; vertical-align: middle; margin-right: .5rem; }
.shell-footer-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; padding: 0; margin: 0; }
.shell-footer-links a { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; color: var(--app-primary); text-decoration: none; }
.shell-footer-links a:hover, .shell-footer-links a:focus-visible { text-decoration: underline; }

/* Sign-in page ONLY: Option C (spec 3.1 round 4). Messages left on a scrim, floating card right.
   DOM order card first; row-reverse >= 1000 px puts the card on the right. Option B rules above are untouched. */
/* QA F1 (2026-10-22): the message column stays transparent, so the page background is darkened by a
   20% navy layer (the same amount as the old tint) to keep white text at 4.5:1 or better. */
.shell-body-signin {
    --signin-shade: linear-gradient(rgba(10, 20, 40, .2), rgba(10, 20, 40, .2));
    background-color: var(--app-primary);
    background-image: var(--signin-shade), linear-gradient(rgba(46, 117, 182, .35), rgba(46, 117, 182, .35)), var(--app-signin-bg);
    background-size: cover; background-position: center;
}
.shell-signin {
    flex: 1 0 auto; width: 100%; max-width: calc(1440px + 64px); margin: 0 auto; padding: 16px 12px;
    display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.shell-signin-card {
    width: 100%; max-width: 420px; background: #FFFFFF; color: var(--s2mb-text); border-radius: 12px;
    padding: 24px; box-shadow: 0 12px 40px rgba(10, 20, 40, .35);
}
.shell-signin-card:focus { outline: none; }
.shell-signin-logo { display: block; height: 56px; width: auto; margin: 0 auto 1rem; }
.shell-signin-card .shell-signin-head { margin-bottom: 1.25rem; }
.shell-signin-card .shell-signin-head h1 { margin-bottom: .5rem; }
.shell-signin-card .shell-signin-register { margin: 0; }
.shell-signin-card .shell-form { max-width: none; }
.shell-signin-card .shell-btn-block { width: 100%; min-height: 48px; }
.shell-forgot-link { text-align: right; font-size: .9375rem; margin: -.25rem 0 1rem; }
.shell-forgot-link a { display: inline-flex; align-items: center; min-height: 24px; }
.shell-signin-help {
    margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--s2mb-border);
    text-align: center; font-size: .875rem; color: var(--s2mb-muted);
}
/* Legal links under "Need help": 2 px smaller (14 -> 12 px), no underline except hover/focus. */
.shell-signin-legal ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: .5rem 0 0; padding: 0; font-size: .75rem; }
.shell-signin-legal a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: none; }
.shell-signin-legal a:hover, .shell-signin-legal a:focus-visible { text-decoration: underline; }

/* Message column: transparent in every app (Mario, 2026-10-22; replaces the QA D2 20% navy tint).
   The stronger text shadow keeps the white text readable on the background; QA re-checks contrast. */
.shell-signin-messages {
    width: 100%; max-width: 820px; color: #FFFFFF; background: transparent; border-radius: 16px;
    padding: 24px; text-shadow: 0 1px 4px rgba(10, 20, 40, .75);
}
.shell-signin-messages :focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.shell-signin-app { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 .5rem; }
.shell-signin-short { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }
.shell-signin-bar { display: inline-block; width: 4px; height: 36px; border-radius: 2px; background: var(--app-accent); }
.shell-signin-appname { font-size: 1.25rem; font-weight: 600; }
.shell-signin-welcome { font-size: 1.375rem; margin: 0 0 2.5rem; }
.shell-message-label { color: #FFFFFF; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .75rem; }
.shell-message-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
.shell-message h2 { color: #FFFFFF; font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0 0 .75rem; }
.shell-message p { font-size: 1.1875rem; line-height: 1.6; max-width: 62ch; margin: 0; }
.shell-message a { color: #FFFFFF; text-decoration: underline; }
.shell-message-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 1.5rem; }
.shell-message-arrow {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 2px solid #FFFFFF; border-radius: 50%; background: transparent; color: #FFFFFF;
}
.shell-message-arrow:hover, .shell-message-arrow:active { background: rgba(255, 255, 255, .18); }
.shell-message-arrow .bi { width: 20px; height: 20px; }
.shell-message-dots { display: flex; flex-wrap: wrap; gap: 0; }
.shell-message-dot {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    border: 0; background: transparent;
}
.shell-message-dot span { display: block; width: 8px; height: 8px; border-radius: 4px; background: #FFFFFF; }
.shell-message-dot[aria-current="true"] span { width: 24px; background: var(--app-accent); }

@media (min-width: 576px) {
    .shell-signin { padding: 24px 16px; }
    .shell-signin-card, .shell-signin-messages { padding: 32px; }
}
@media (min-width: 992px) {
    .shell-signin { padding: 48px 32px; }
    .shell-message h2 { font-size: 3.25rem; }
}
@media (min-width: 1000px) {
    .shell-signin { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 64px; }
    .shell-signin-card { flex: 0 0 420px; } /* never shrinks (QA D3: was 280-332 px at 1000-1300 px wide) */
    .shell-signin-messages { flex: 1 1 0; min-width: 0; }
    /* Side by side: shade the left (message) side only, fading out before the card. */
    .shell-body-signin { --signin-shade: linear-gradient(to right, rgba(10, 20, 40, .2) 0, rgba(10, 20, 40, .2) 62%, rgba(10, 20, 40, 0) 85%); }
}

/* Shell:SignIn:OpenMessages (MET/ARTS, Mario 2026-10-22): no tint behind the messages, and at >= 1000 px
   the column runs top to bottom: app name at the top, the message in the middle, dots at the bottom.
   Without the tint, the stronger text shadow keeps the white text readable. */
.shell-signin-open .shell-signin-messages { background: transparent; text-shadow: 0 1px 4px rgba(10, 20, 40, .75); }
/* Register: full app name right under the logo (Mario, 2026-10-22). */
.shell-register-app { color: var(--app-primary); font-weight: 600; font-size: 1.125rem; text-align: center; margin: -1rem 0 1.25rem; }
@media (min-width: 1000px) {
    .shell-body-signin.shell-signin-open .shell-signin { align-items: stretch; min-height: 100vh; }
    .shell-signin-open .shell-signin-card { align-self: center; }
    .shell-signin-open .shell-signin-messages {
        max-width: none; padding: 16px 0; display: flex; flex-direction: column;
    }
    .shell-signin-open .shell-carousel { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-between; }
    .shell-signin-open .shell-message-area { margin: auto 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ===== Business components (arts-business-spec section 1) ===== */
.shell-page-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.shell-page-head h1 { margin-bottom: 0; }
.shell-help-link { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; min-height: 44px; }
.shell-legend { float: none; width: auto; margin-bottom: .25rem; font-size: .9375rem; font-weight: 600; }
.shell-form-admin { max-width: 640px; }
.shell-card-admin { max-width: 760px; }
.shell-counter { margin-top: .25rem; }
.shell-num { font-variant-numeric: tabular-nums; }
.shell-muted.small, .small.shell-muted { font-size: .875rem; }

/* Badges: subtle background + emphasis text + border, icon and word */
.shell-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 600; padding: .3em .55em; white-space: normal; text-align: left; }
.shell-badge .bi { width: .9em; height: .9em; }

/* Data table */
.shell-table-filters .form-label { margin-bottom: .25rem; }
.shell-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.shell-table-result:focus { outline: 3px solid var(--s2mb-focus); outline-offset: 2px; }
.shell-table-export { display: flex; flex-wrap: wrap; gap: .5rem; }
.shell-table-export .btn, .shell-table-bulk .btn { min-height: 44px; display: inline-flex; align-items: center; gap: .375rem; }
.shell-data-table { margin-top: 1rem; }
.shell-data-table th { white-space: nowrap; }
.shell-sort-button { display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--app-primary); font-weight: 600; text-align: left; }
/* Headers that can't be sorted: same color, weight and height as the sort buttons. */
.shell-th-static { display: inline-flex; align-items: center; min-height: 44px; color: var(--app-primary); font-weight: 600; }
/* Positive status word in a table cell (for example "Available"). */
.shell-text-success { color: var(--bs-success-text-emphasis); font-weight: 700; }
.shell-text-warning { color: var(--bs-warning-text-emphasis); font-weight: 700; }
.shell-text-secondary { color: var(--bs-secondary-text-emphasis); font-weight: 700; }
.shell-sort-button:hover { color: var(--app-primary-dark); text-decoration: underline; }
.shell-sort-button .bi { width: .8em; height: .8em; }
.shell-select-col { width: 3rem; }
.shell-table-cards { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .75rem; }
.shell-table-card { border: 1px solid var(--s2mb-border); border-radius: .5rem; padding: 1rem; background: #FFFFFF; }
.shell-table-card-title { margin-bottom: .5rem; font-size: 1rem; }
.shell-table-card-fields { margin: 0; }
.shell-table-card-fields > div { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .5rem; padding: .25rem 0; border-top: 1px solid #EEF0F2; }
.shell-table-card-fields dt { font-weight: 600; font-size: .9375rem; }
.shell-table-card-fields dd { margin: 0; overflow-wrap: anywhere; }
.shell-table-empty { text-align: center; padding: 2rem 1rem; border: 1px dashed var(--s2mb-border); border-radius: .75rem; }
.shell-table-empty-icon { width: 2rem; height: 2rem; color: var(--s2mb-muted); margin-bottom: .5rem; }
.shell-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.shell-pager .pagination { flex-wrap: wrap; }
.shell-pager .page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--app-primary); }
.shell-pager .page-item.active .page-link { background: var(--app-primary); border-color: var(--app-primary); color: #FFFFFF; }
.shell-page-size { display: flex; align-items: center; gap: .5rem; }
.shell-page-size .form-select { width: auto; min-height: 44px; }
.shell-js [data-shell-nojs] { display: none; }

/* Detail view */
.shell-detail-grid { display: grid; grid-template-columns: 1fr; gap: .25rem 1.5rem; }
@media (min-width: 768px) { .shell-detail-grid { grid-template-columns: 1fr 1fr; } }
.shell-detail-item dt { font-weight: 600; font-size: .9375rem; }
.shell-detail-item dd { margin-bottom: .75rem; overflow-wrap: anywhere; }
@media (min-width: 768px) { .shell-detail-wide { grid-column: 1 / -1; } }
.shell-detail-section h2, .shell-timeline-card h2, .shell-decision-panel h2 { margin-bottom: 1rem; }

/* Step form */
.shell-step-list { list-style: none; padding: 0; margin: 0; gap: .5rem 1.5rem; flex-wrap: wrap; }
.shell-step { display: flex; align-items: center; gap: .5rem; color: var(--s2mb-muted); }
.shell-step-number { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--s2mb-input-border); font-weight: 600; }
.shell-step-current, .shell-step[aria-current="step"] { color: var(--s2mb-text); font-weight: 600; }
.shell-step[aria-current="step"] .shell-step-number { background: var(--app-primary); border-color: var(--app-primary); color: #FFFFFF; }
.shell-step-done .shell-step-number { border-color: var(--app-primary); color: var(--app-primary); }
.shell-step a { min-height: 44px; display: inline-flex; align-items: center; }
.shell-reveal-hint { font-size: .875rem; color: var(--s2mb-muted); }
.shell-js .shell-reveal-hint { display: none; }

/* Approval history */
.shell-timeline { list-style: none; padding: 0 0 0 1rem; border-left: 3px solid var(--s2mb-border); }
.shell-timeline-item { position: relative; padding: 0 0 1rem .75rem; }
.shell-timeline-item::before { content: ""; position: absolute; left: -1.6rem; top: .45rem; width: .9rem; height: .9rem; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--app-primary); }
.shell-timeline-title { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-weight: 600; }
.shell-timeline-comment { border-left: 3px solid var(--s2mb-border); padding-left: .75rem; font-style: italic; }

/* Dashboard tiles */
.shell-tiles { list-style: none; padding: 0; }
.shell-tile { display: flex; flex-direction: column; height: 100%; padding: 1.25rem; background: #FFFFFF; border-radius: .75rem; box-shadow: var(--s2mb-shadow); color: var(--s2mb-text); text-decoration: none; border: 1px solid transparent; }
.shell-tile:hover { border-color: var(--app-primary); }
.shell-tile:hover .shell-tile-label { text-decoration: underline; }
.shell-tile:focus-visible { outline: 3px solid var(--s2mb-focus); outline-offset: 2px; }
.shell-tile-count { font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--app-primary); }
.shell-tile-label { font-weight: 600; }
.shell-tile-zero { color: var(--s2mb-muted); font-size: .875rem; }

/* Help */
.shell-help-toc ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.shell-help-toc li { padding: .125rem 0; }
.shell-help-toc .shell-toc-level-3 { padding-left: 1rem; font-size: .9375rem; }
.shell-help-toc-details summary { font-weight: 600; min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.shell-help-article h2 { margin-top: 2rem; }
.shell-help-article h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 1.25rem; }
.shell-help-article table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.shell-help-article th, .shell-help-article td { border: 1px solid var(--s2mb-border); padding: .375rem .5rem; vertical-align: top; }
.shell-help-article img { max-width: 100%; height: auto; }
.shell-back-to-top { font-size: .875rem; }
.shell-help-guides, .shell-help-results { padding-left: 1.25rem; }
.shell-help-guides li, .shell-help-results li { margin-bottom: .75rem; }
.shell-print-only { display: none; }

/* Print view (/.../Print), on screen */
.shell-print-view { background: #FFFFFF; }
.shell-print-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 3px solid var(--app-brand); }
.shell-print-appname { font-weight: 600; color: var(--app-primary); }
.shell-print-main { padding: 1.5rem; max-width: 1000px; }
.shell-print-stamp { color: var(--s2mb-muted); font-size: .875rem; }