/* Design tokens — PHYSPM-6361
   --r1-* is the brand scale from marketing's variables.css; replace wholesale on a rebrand.
   --app-* is what application CSS references. Never reference --r1-* directly from app CSS.
   Registered in BOTH entries of rspack.config.style.js ("style" and "cover"); they share nothing. */

:root {
    --r1-blue-50: #ecf0f7;
    --r1-blue-100: #d7e2f6;
    --r1-blue-200: #b2cdfe;
    --r1-blue-300: #80acfb;
    --r1-blue-400: #4886fe;
    --r1-blue-500: #0158f3;
    --r1-blue-600: #0547c1;
    --r1-blue-700: #043696;
    --r1-blue-800: #002574;
    --r1-blue-900: #021035;
    --r1-blue-950: #020b16;

    --r1-warm-gray-50: #f2f4ec;
    --r1-warm-gray-100: #e0e2db;
    --r1-warm-gray-200: #caccc6;
    --r1-warm-gray-300: #a8aaa3;
    --r1-warm-gray-400: #8b8d86;
    --r1-warm-gray-500: #6b6d66;
    --r1-warm-gray-600: #55564f;
    --r1-warm-gray-700: #3f413a;
    --r1-warm-gray-800: #2d2f29;
    --r1-warm-gray-900: #171812;
    --r1-warm-gray-950: #0a0b06;

    --r1-black-50: #f1fafc;
    --r1-black-100: #d7e4e7;
    --r1-black-200: #c3d1d3;
    --r1-black-300: #9aaeb2;
    --r1-black-400: #7d9297;
    --r1-black-500: #587076;
    --r1-black-600: #42565b;
    --r1-black-700: #2c3b3e;
    --r1-black-800: #1f2a2c;
    --r1-black-900: #0e181a;
    --r1-black-950: #050e10;

    --r1-red-50: #faf1f0;
    --r1-red-100: #fddad5;
    --r1-red-200: #ffbfb6;
    --r1-red-300: #fc877a;
    --r1-red-400: #fe3834;
    --r1-red-500: #c92322;
    --r1-red-600: #991d1b;
    --r1-red-700: #691210;

    --r1-green-50: #ecf2ec;
    --r1-green-100: #d9e5da;
    --r1-green-200: #b8d7bc;
    --r1-green-300: #76b981;
    --r1-green-400: #2ca04c;
    --r1-green-500: #117b33;
    --r1-green-600: #0b5d25;
    --r1-green-700: #044017;

    --r1-iron-500: #5e3434;
    --r1-iron-600: #381d1d;

    --r1-interactive-blue: var(--r1-blue-600);

    /* Local extensions — no brand equivalent, pending design sign-off. */
    --r1-warning-fill: #d99d0b;
    --r1-warning-text: #966d08;

    /* Text */
    --app-text-default: var(--r1-warm-gray-800);
    --app-text-secondary: var(--r1-warm-gray-700);
    --app-text-form: var(--r1-warm-gray-600);
    --app-text-tertiary: var(--r1-warm-gray-500);
    --app-text-muted: var(--r1-warm-gray-500);
    --app-text-inverse: #ffffff;

    /* Surfaces */
    --app-surface: #ffffff;
    --app-surface-subtle: var(--r1-warm-gray-50);
    --app-surface-muted: var(--r1-warm-gray-100);
    --app-surface-raised: var(--r1-warm-gray-100);
    --app-surface-dark: var(--r1-warm-gray-500);

    /* Borders */
    --app-border-default: var(--r1-warm-gray-100);
    --app-border-strong: var(--r1-warm-gray-200);
    --app-border-muted: var(--r1-warm-gray-300);

    /* Brand */
    --app-brand-primary: var(--r1-blue-500);
    --app-brand-primary-text: var(--r1-blue-600);   /* brand blue as text on a non-white fill */
    --app-brand-primary-active: var(--r1-blue-700); /* pressed brand-primary button; white text 10.64:1 */
    --app-brand-accent: var(--r1-interactive-blue); /* links on light surfaces */

    /* Links on dark surfaces only (login/error pages). Local extension: the brand
       has no cyan, but a pale blue is indistinguishable from the white body text.
       #85deff was only 3.76:1 on the brand blue; #c2eeff is 4.60:1, the minimum is 4.5.
       It sits close to white, so inline links are also bold (Cover.css). */
    --app-link-on-dark: #c2eeff;
    --app-link-on-dark-hover: #e0f6ff;

    /* Semantic state */
    --app-success: var(--r1-green-500);
    --app-danger: var(--r1-red-500);
    --app-warning: var(--r1-warning-text);
    --app-info: var(--r1-blue-500);

    /* Focus ring — darker than brand, not lighter: a lighter tint drops under 3:1 on greys. */
    --app-focus-ring: var(--r1-blue-600);
    --app-focus-ring-halo: #ffffff;

    /* Aliases kept so the var() substitution stayed a no-op. Don't use in new CSS;
       collapse into the tokens above when the call sites are cleaned up. */
    --app-text-subtle: var(--r1-black-600);
    --app-text-muted-light: var(--app-text-muted);
    --app-text-muted-mid: var(--app-text-muted);
    --app-text-muted-dark: var(--app-text-muted);
    --app-danger-soft: var(--app-danger);
    --app-success-soft: var(--app-success);
    --app-success-mid: var(--app-success);
    --app-warning-bright: var(--app-warning);
    --app-warning-orange: var(--app-warning);
}

@font-face { font-family: "Lato-Regular"; src: url(Resources/Lato-Regular.woff) format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Lato-Light"; src: url(Resources/Lato-Light.woff) format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Rogan-Bold"; src: url(Resources/324775_0_0.woff2) format("woff2"), url(Resources/324775_0_0.woff) format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Rogan-Light"; src: url(Resources/324775_1_0.woff2) format("woff2"), url(Resources/324775_1_0.woff) format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Rogan-Regular"; src: url(Resources/324775_A_0.woff2) format("woff2"), url(Resources/324775_A_0.woff) format("woff"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Rogan-Medium"; src: url(Resources/324775_B_0.woff2) format("woff2"), url(Resources/324775_B_0.woff) format("woff"); font-weight: normal; font-style: normal; }

* { margin: 0; box-sizing: border-box; }
body { font-family: "Lato-Regular", Arial, sans-serif; background: var(--app-brand-primary); color: #fff; font-size: 14px; max-height: 100%; }
/* Every surface on this page is dark (#0158f3 body, #333 footer), so links use
   the light end of the blue scale. --app-brand-accent is for links on white. */
a { color: var(--app-link-on-dark); text-decoration: none; cursor: pointer; white-space: nowrap; }
a:hover { color: var(--app-link-on-dark-hover); text-decoration: underline; }

.video-container { filter: blur(0px); display: none; position: absolute; width: 100%; z-index: -1; overflow: hidden; max-height: calc(100% - 10px); }
.video-container .overlay { background-color: rgba(1, 88, 243, 0.8); height: 100%; width: 100%; z-index: 1; display: block; position: fixed; }
.video-container video { width: 100%; height: auto; max-height: 100%; }

header { background: #fff; height: 70px; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1); }
header .logo-container { width: 97.5%; margin: 0 auto; max-width: 1180px; padding-left: 15px; }
header .logo-container a { margin-top: 15px; float: left; display: block; height: 39px; }
header .logo-container a.custom-logo { margin-top: 9px; float: left; display: block; height: 49px; }
header .logo-container a img { height: 39px; border: none; }
header .logo-container a.custom-logo img { height: 49px; border: none; }
header .logo-container h2 { float: left; font-weight: normal; margin-top: 26px; color: var(--app-text-tertiary); font-size: 16px; font-family: "Rogan-Regular", sans-serif; text-transform: uppercase; margin-left: 15px; }
header .logo-container h2 span { border-left: 1px solid #999; margin-left: 10px; padding-left: 10px; letter-spacing: 0.8px; }

.main { width: 97.5%; margin: 0 auto; max-width: 1180px; padding-top: 60px; padding-bottom: 40px; }
.main::after { content: ""; display: table; clear: both; }
.main h2 { font-family: "Rogan-Medium", sans-serif; background: #333; color: #fff; font-size: 18px; font-weight: normal; margin: 0; padding: 10px; text-align: center; }
.main h3 { font-family: "Rogan-Medium", sans-serif; font-size: 1.5em; margin-bottom: 18px; }
.main p { margin-bottom: 20px; line-height: 1.5; }
.main label { display: inline-block; margin-bottom: 10px; }

/* Floating label. The label sits over an empty field so it reads as a
   placeholder, then shrinks into the top-left corner once the field has a
   value, so the name stays on screen while the user types. It also floats on
   focus, otherwise the caret would sit behind the resting label.
   #666 on white is 5.74:1, so the shrunk text still clears AA at 11px. */
.main .field-float { position: relative; }

.main .field-float input[type="text"],
.main .field-float input[type="password"] { padding: 22px 10px 6px; margin-bottom: 18px; }

.main .field-float label {
    position: absolute;
    left: 10px;
    top: 14px;
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    color: #666;
    pointer-events: none;
    transition: top .15s ease-out, font-size .15s ease-out;
}

.main .field-float input:focus + label,
.main .field-float input:not(:placeholder-shown) + label {
    top: 5px;
    font-size: 11px;
    line-height: 12px;
}
.main input[type="text"],
.main input[type="password"],
.main input[type="email"] { line-height: 20px; color: var(--app-text-form); background: #fff; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); border: none; border-radius: 0; padding: 10px; font-size: 16px; height: initial; width: 100%; font-family: "Lato-Regular", Arial, sans-serif; margin-bottom: 18px; }
.main .btn { font-family: "Lato-Regular", Arial, sans-serif; text-decoration: none; line-height: 1.7; width: 100%; background: #9dc44a; color: var(--app-text-default); font-size: 16px; height: initial; border: 0; padding: 7px; margin: 5px 0; -webkit-appearance: none; border-radius: 0; }
.main .btn:not([disabled]) { cursor: pointer; }
.main .btn:not([disabled]):hover { background: #b4e156; text-decoration: none; }
.main .btn[disabled] { opacity: 0.5; }
.main .btn-lg { padding: 10px 16px; }
/* Panels darken the brand blue rather than lighten it: a 15% white panel left white text at
   4.4:1 and links at 2.9:1; 15% black gives 7.2:1 and 5.8:1. */
.main .page-container { padding: 40px; background: rgba(0, 0, 0, 0.15); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05); }

.main .input-section { float: left; width: 33.33333333%; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.main .input-section a { color: white; }
.main .input-section .note { font-size: 14px; color: #fdb813; background-color: rgba(0,0,0,.3); padding: 7px 10px; }
.main .input-section .page { display: none; }
.main .input-section .page.active { display: block; }
.main .input-section .actions-line { margin-top: 20px; }
.main .input-section .result-message > *:not(:empty) { display: block; margin-bottom: 20px; color: #fdb813; background-color: rgba(0,0,0,.3); padding: 11px 22px; font-size: 15px; }

.main .info-section { width: 66.66666667%; float: left; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.main .info-section h1 { font-family: "Rogan-Light", sans-serif; font-size: 70px; margin-top: 0; text-transform: uppercase; line-height: 65px; color: #fff; text-shadow: none; font-weight: normal; margin-bottom: 55px; }
.main .info-section p { margin-bottom: 20px; line-height: 1.5; font-size: 16px; }
/* Inline links inside running text need a non-colour cue (WCAG 1.4.1). On this
   dark background no colour can be both readable and 3:1 apart from the white
   body text, and underlines are out, so weight carries the distinction. */
.main .info-section p a { font-weight: bold; }

.main .error-section { width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; }
.main .error-section .page-container { min-height: 400px; background: rgba(0, 0, 0, 0.25); }
/* Same non-colour cue as .info-section p a above */
.main .error-section p a { font-weight: bold; }
.main .error-section h1 { font-family: "Rogan-Light", sans-serif; font-size: 60px; line-height: 55px; margin-top: 0; text-transform: uppercase; margin-bottom: 20px; font-weight: normal; }
.main .error-section p { margin-bottom: 15px; font-size: 16px; }
.main .error-section .btn { margin-top: 20px; width: auto; display: inline-block; text-decoration: none; }

.content { min-height: calc(100vh - 139px); padding-top: 10px; }
.error-page .content { background: var(--app-brand-primary); background-repeat: no-repeat; background-size: 100% auto; background-position: center 80px; }
@media (max-width: 1295px) {
    .error-page .content { background-size: auto; }
}

footer { height: 139px; background: #333; padding: 30px 34px; }
footer .menu { padding: 0; margin: 0; list-style: none; text-align: center; margin-bottom: 4px; }
footer .menu li { display: inline-block; padding: 0 8px; }
footer .menu li a { display: block; padding: 10px 15px; }
footer .credits { text-align: center; padding-top: 5px; }
footer .credits span { white-space: nowrap; }

.pull-right { float: right; }
iframe { visibility: collapse; width: 1px; height: 1px; position: absolute; bottom: 0; }

@media (max-width: 1200px) {
    header .logo-container { max-width: 600px; }
    .main { max-width: 600px; }
    .main .input-section,
    .main .info-section { float: none; width: 100%; margin-bottom: 30px; }
    .main .info-section h1 { margin-bottom: 30px; font-size: 50px; }
    .video-container,
    .js-is-video-visible { display: none !important; }
}

@media (max-width: 550px) {
    header .logo-container h2 span { display: none; }
    header .logo-container a { margin-left: 15px; }
}

@media (max-width: 390px) {
    footer .menu li a { display: block; padding: 10px 5px; }
}

@media (max-width: 330px) {
    .main .input-section a { float: left; clear: both; margin-bottom: 5px; }
    .main .input-section .actions-line { content: ""; display: table; clear: both; }
    .main .info-section h1 { font-size: 40px; }
}

/* FIX: prevent reload flicker (NO layout change) */
.page.login-page .js-submit-login,
.page.login-page .js-forgot-password {
    display: none;
}

/* Re-adding a focus-visible outline for accessibility.
 Outline is a dual ring, consisting of a slightly lighter tone of R1 blue, 
 with a white box shadow for dark backgrounds. */
:focus-visible {
    outline: 2px solid var(--app-focus-ring) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}