/* e-training login/landing shell (layouts/etraining.php)
 *
 * Extracted from the inline <style> block that previously lived in the view.
 * Loaded via <link> so it is cacheable, reusable, and out of the markup.
 */

@import url('tokens.css');
@import url('loading.css');
@import url('clock.css');
@import url('modal.css');
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--vm-bg-grey);
    font-family: var(--vm-font-body);
    color: var(--vm-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.etv2-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Logistics artwork as a page backdrop rather than a hero band: it fills the
       viewport and continues behind the sign-in card, so there is no seam where a
       band would have ended. attachment: fixed keeps it in place while the form
       scrolls (relaxed to scroll on small screens below, where fixed backgrounds
       are unreliable). The opaque colour sits under the PNG's alpha channel. */
    background-color: #F4F8FD;
    /* JPEG, not the original PNG: that file was 1.78 MB on a page every employee hits,
       often on a warehouse terminal or a phone. The PNG is 99.9% semi-transparent, so it
       was always being composited over the background-color above - this file is that
       exact composite, flattened onto #F4F8FD and saved at quality 90. Mean error against
       what the browser used to paint is 0.77/255, i.e. imperceptible, for 4.5% of the
       bytes.
       TO REVERT: change .jpg back to .png below. The original is still in the repo. */
    background-image: url('/assets/images/etraining_background.jpg');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ---- Header ---- */
.etv2-header {
    background: #fff;
    border-bottom: 1px solid var(--vm-stroke-grey);
}
.etv2-header__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.etv2-header__logo img { height: 34px; width: auto; display: block; }
.etv2-header__tag {
    font-family: var(--vm-font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vm-text-subtle);
}

/* ---- Main / card ---- */
.etv2-main {
    flex: 1 0 auto;
    width: 100%;
}

.etv2-card {
    background: #fff;
    border: 1px solid var(--vm-stroke-grey);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(10, 18, 44, .04), 0 8px 24px rgba(10, 18, 44, .06);
    overflow: hidden;
}
.etv2-card__head {
    padding: 22px 32px 20px;
    border-bottom: 1px solid var(--vm-stroke-grey);
    background: linear-gradient(180deg, #fff 0%, var(--vm-sand) 220%);
}
.etv2-card__title {
    font-family: var(--vm-font-head);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
    color: var(--vm-dark-blue);
}
.etv2-card__subtitle {
    margin: 6px 0 0;
    color: var(--vm-text-muted);
    font-size: 15px;
    font-weight: 700;
}
/* The line is already bold, so <strong> here reads as a colour step up from the
   muted body text rather than a weight change. */
.etv2-card__subtitle strong {
    color: var(--vm-text);
    font-weight: inherit;
}
.etv2-card__body { padding: 8px 32px 32px; }

/* ---- Flash / errors ---- */
.etv2-alerts { margin: 20px 0 4px; }
.etv2-alerts:empty { display: none; }
.alert-message, .flash-error, .flash-notice, .flash-confirm {
    border-radius: 10px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 14px;
    line-height: 1.45;
    border: 1px solid transparent;
}
.alert-message.error, .flash-error {
    background: var(--vm-danger-bg);
    border-color: #F5C2C2;
    color: #7F1D1D;
}
.alert-message.error li { margin-left: 18px; color: #7F1D1D !important; }
.alert-message.success, .flash-confirm {
    background: var(--vm-success-bg);
    border-color: #A7E3C8;
    color: #065F46;
}
.alert-message.warning, .flash-notice {
    background: var(--vm-warn-bg);
    border-color: #F3D98C;
    color: #7C4A02;
}

/* ---- Form sections ---- */

.etv2-field { margin-bottom: 16px; }
.etv2-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}
.etv2-label {
    display: block;
    font-family: var(--vm-font-head);
    font-weight: 600;
    font-size: 13px;
    color: var(--vm-dark-blue);
    margin-bottom: 6px;
}
.etv2-label .req { color: var(--vm-orange); margin-left: 2px; }
.etv2-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-family: var(--vm-font-body);
    font-size: 16px; /* >=16px prevents iOS Safari zoom-on-focus */
    font-weight: 600;
    color: var(--vm-text);
    background: #fff;
    border: 1px solid var(--vm-stroke-grey);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.etv2-input::placeholder { font-weight: 400; color: var(--vm-text-subtle); }
.etv2-input:focus {
    outline: none;
    border-color: var(--vm-orange);
    box-shadow: 0 0 0 3px rgba(229, 88, 32, .15);
}
.etv2-help {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--vm-text-subtle);
}
/* ---- Actions ---- */
.etv2-actions {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--vm-stroke-grey);
    display: flex;
    justify-content: flex-end;
}
.etv2-btn {
    appearance: none;
    border: none;
    cursor: pointer;
    font-family: var(--vm-font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .01em;
    color: #fff;
    background: var(--vm-orange);
    height: 48px;
    padding: 0 32px;
    border-radius: 10px;
    transition: background .15s ease, transform .05s ease;
}
.etv2-btn:hover { background: var(--vm-orange-hover); }
.etv2-btn:active { transform: translateY(1px); }
.etv2-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(229, 88, 32, .3);
}

/* ---- Footer ---- */
.etv2-footer {
    flex-shrink: 0;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 24px 40px;
    text-align: center;
}
/* "Trouble signing in?" support disclosure (native <details>, no JS) */

.etv2-footer__meta { font-size: 12px; color: var(--vm-text-muted); margin: 0; }
.etv2-footer__meta a { color: var(--vm-text-muted); text-decoration: none; }
.etv2-footer__meta a:hover { color: var(--vm-dark-blue); text-decoration: underline; }

/* Tablets / small laptops: tighten outer gutters, keep 2-col form */
@media (max-width: 760px) {
    .etv2-main { padding: 28px 18px 44px; }
    .etv2-card__head { padding: 24px 24px 20px; }
    .etv2-card__body { padding: 6px 24px 26px; }
    .etv2-footer { padding: 20px 18px 36px; }
}

/* Phones (field use): single column, full-width CTA, larger touch targets */
@media (max-width: 560px) {
    .etv2-header__inner { padding: 14px 16px; }
    .etv2-header__logo img { height: 28px; }
    .etv2-header__tag { display: none; }

    .etv2-main { padding: 18px 14px 32px; }
    .etv2-card { border-radius: 12px; }
    .etv2-card__head { padding: 20px 18px 16px; }
    .etv2-card__title { font-size: 21px; }
    .etv2-card__body { padding: 4px 18px 22px; }

    .etv2-grid { grid-template-columns: 1fr; gap: 14px; }
    .etv2-input { height: 48px; } /* bigger tap target for gloved/field use */

    .etv2-actions { justify-content: stretch; }
    .etv2-btn { width: 100%; height: 52px; }

    .etv2-footer { padding: 16px 14px 28px; }
}


/* ==========================================================================
   Landing / help page shell
   Hero is drawn entirely in CSS — gradient plus two geometric washes and a dot
   grid — so the page needs no artwork asset and no external request.
   ========================================================================== */

.etv2-topline {
    height: 4px;
    background: var(--vm-orange);
}

/* ---- Header ---- */
.etv2-header__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vm-text-muted);
    font-family: var(--vm-font-head);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13px;
}
.etv2-header__tag-icon {
    display: inline-flex;
    color: var(--vm-orange);
}

/* ---- Hero ---- */
.etv2-hero {
    position: relative;
    /* Tightened hard so the card clears the fold: the artwork now comes from
       .etv2-page, so this element carries no background of its own. */
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 24px 26px;
}
.etv2-hero__inner {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
}
.etv2-hero__title {
    margin: 0;
    font-family: var(--vm-font-head);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--vm-dark-blue);
}
.etv2-hero__lede {
    margin: 6px auto 0;
    font-size: 16px;
    line-height: 1.4;
    /* One line on desktop — the 34em cap used to break it before "logistics".
       Released to normal wrapping on narrow screens below, where forcing one line
       would overflow the viewport instead. */
    white-space: nowrap;
    color: var(--vm-text-muted);
}
.etv2-hero__emphasis {
    color: var(--vm-orange);
    font-weight: 700;
}
.etv2-hero__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--vm-text);
}
.etv2-hero__trust-icon {
    display: inline-flex;
    color: var(--vm-orange);
}

/* ---- Card, lifted into the hero ---- */
.etv2-card--raised {
    width: calc(100% - 48px);
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 18px 48px rgba(10, 18, 44, .12);
}
.etv2-card__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.etv2-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid var(--vm-orange);
    color: var(--vm-orange);
    background: #FFF;
}
/* Grows to fill the row, which is what pushes the countdown and the help link
   to the right edge beside "Ready to get started?" rather than spreading them. */
.etv2-card__head-text { min-width: 0; flex: 1 1 auto; }

/* ---- Numbered step headings ---- */
.etv2-step {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--vm-stroke-grey);
}
.etv2-step__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A pill rather than the 34px circle the bare "01" sat in - "Step 1" needs
       to set its own width. No aria-hidden on it any more either: it used to be
       a decorative numeral, and now it is part of the heading a screen reader
       should read ("Step 1, Verify Your Access"). */
    min-height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--vm-orange);
    color: #FFF;
    font-family: var(--vm-font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .01em;
    white-space: nowrap;
}
/* Names the training a quick-link was issued for. Pushed to the far end of the step
   row, so it reads as context on the step rather than another heading competing with
   it. Wraps under on narrow screens - see the responsive block. */
.etv2-step__for {
    margin-left: auto;
    text-align: right;
    font-size: 13px;
    line-height: 1.4;
    color: var(--vm-text-muted);
}
.etv2-step__for strong { color: var(--vm-dark-blue); font-weight: 700; }
.etv2-step__title {
    margin: 0;
    font-family: var(--vm-font-head);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vm-orange);
}

.etv2-sublabel {
    margin: 26px 0 12px;
    font-family: var(--vm-font-head);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vm-text-muted);
}
.etv2-sublabel em {
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

/* ---- Input with a leading icon ---- */
.etv2-input-wrap { position: relative; }
.etv2-input-wrap .etv2-input { padding-left: 42px; }
.etv2-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--vm-text-subtle);
    pointer-events: none;
}
.etv2-input-wrap .etv2-input:focus + .etv2-input-icon,
.etv2-input-wrap .etv2-input:focus ~ .etv2-input-icon { color: var(--vm-orange); }

/* ---- Info / contact callout ---- */
.etv2-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 20px 0 0;
    padding: 14px 16px;
    border: 1px solid var(--vm-stroke-grey);
    border-radius: 10px;
    background: var(--vm-bg-grey);
    font-size: 14px;
    line-height: 1.55;
    color: var(--vm-text-muted);
}
.etv2-note__icon {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 1px;
    color: var(--vm-orange);
}
.etv2-note--contact {
    margin-top: 28px;
    background: var(--vm-sand);
}
.etv2-note a { color: var(--vm-orange); }
/* Quick-link "already completed" notice in the alerts slot: same spacing as the flash
   messages beside it, and the same amber panel as .flash-notice / .ett-legal. */
.etv2-note--notice {
    margin: 12px 0;
    padding: 16px 18px;
    border-color: #F3D98C;
    border-left: 4px solid var(--vm-warn);
    background: var(--vm-warn-bg);
    font-size: 15px;
    color: #7C4A02;
}
.etv2-note--notice .etv2-note__icon { color: var(--vm-warn); margin-top: 0; }
/* Inline, so the second sentence runs on after it rather than on a new line. */
.etv2-note__lead {
    font-family: var(--vm-font-head);
    color: var(--vm-warn-text);
}

/* ---- Pre-fill countdown ----
   Sits in the card head, right-aligned beside the heading, so the fact that the
   details are temporary is visible next to the details themselves. */
.etv2-countdown {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--vm-stroke-grey);
    border-radius: 999px;
    background: #fff;
    font-family: var(--vm-font-head);
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
}
.etv2-countdown__icon { flex: 0 0 auto; display: inline-flex; color: var(--vm-orange); }
.etv2-countdown__label { font-weight: 600; color: var(--vm-text-muted); }
.etv2-countdown__time {
    font-weight: 700;
    color: var(--vm-orange);
    /* Fixed-width digits so the pill does not twitch as the seconds tick. */
    font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
    /* Smaller, but the label stays. It used to be dropped here on the assumption there
       was no room - but the head wraps at this width, so the pill gets a line to itself
       and has room to spare. A bare "2:45" in a pill does not say what is being counted,
       which on a page that is about to clear itself is the one thing it has to say. */
    .etv2-countdown { font-size: 12px; padding: 6px 10px; }
    /* The label shrinks further than the time. It is the quieter half - what is being
       counted, read once - while the digits are what gets glanced at, so the time keeps
       the readable size and the words give up the room. */
    .etv2-countdown__label { font-size: 10.5px; letter-spacing: .01em; }
}

/* ---- Primary action ---- */
.etv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
}
.etv2-btn__arrow { display: inline-flex; }

/* ---- Reassurance row ---- */
.etv2-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    max-width: 1080px;
    margin: 32px auto 4px;
    padding: 0 24px;
}
.etv2-feature { text-align: center; }
.etv2-feature__icon {
    display: inline-flex;
    /* inline-flex centres via the parent's text-align: center */
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--vm-orange);
    color: var(--vm-orange);
    margin-bottom: 12px;
}
.etv2-feature__title {
    margin: 0 0 6px;
    font-family: var(--vm-font-head);
    font-weight: 700;
    font-size: 16px;
    color: var(--vm-dark-blue);
}
.etv2-feature__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--vm-text-muted);
}

/* ---- Help page question blocks ---- */
.etv2-faq + .etv2-faq { margin-top: 4px; }
.etv2-faq__answer {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--vm-text-muted);
}
.etv2-faq .etv2-step__title { text-transform: none; letter-spacing: 0; font-size: 16px; }

/* ---- Footers ---- */
.etv2-footer__help {
    max-width: 1080px;
    margin: 24px auto 0;
    padding: 0 24px 16px;
    text-align: center;
}
.etv2-footer__help-title {
    margin: 0 0 2px;
    font-family: var(--vm-font-head);
    font-weight: 700;
    font-size: 15px;
    color: var(--vm-dark-blue);
}
.etv2-footer__help-text {
    margin: 0;
    font-size: 13px;
    color: var(--vm-text-muted);
}
.etv2-footer__help-text a { color: var(--vm-orange); }
.etv2-footer__legal {
    border-top: 1px solid var(--vm-stroke-grey);
    background: #FFF;
}
.etv2-footer__legal-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1080px;
    margin: 0 auto;
    padding: 18px 24px;
}
.etv2-footer__legal-logo img { display: block; height: 22px; width: auto; }
.etv2-footer__sep { color: var(--vm-stroke-grey); margin: 0 8px; }

@media (max-width: 860px) {
    .etv2-hero { padding: 14px 20px 20px; }
    /* iOS and some Android browsers mishandle fixed attachment; let it scroll. */
    .etv2-page { background-attachment: scroll; }
    .etv2-hero__title { font-size: 27px; }
    .etv2-hero__lede { font-size: 16px; white-space: normal; }
    .etv2-features { grid-template-columns: 1fr; gap: 24px; }
    .etv2-footer__legal-inner { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
    .etv2-card--raised { border-radius: 12px; }
    .etv2-card__head { gap: 12px; }
    .etv2-card__icon { width: 44px; height: 44px; }
    .etv2-step { margin-top: 24px; }
    /* Two headings plus a training name will not sit on one line here. */
    .etv2-step__for { flex: 1 0 100%; margin-left: 0; text-align: left; }
}

/* ---- Credential type dropdown ---- */
.etv2-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Room for the leading shield icon and the trailing caret. */
    padding-right: 40px;
    background-color: #FFF;
    cursor: pointer;
}
.etv2-select-caret {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--vm-text-subtle);
    pointer-events: none;
}
.etv2-input-wrap--select .etv2-select:focus ~ .etv2-select-caret { color: var(--vm-orange); }
.etv2-select:invalid { font-weight: 400; color: var(--vm-text-subtle); }
.etv2-select option { color: var(--vm-text); }

/* ---- Trust line under the primary action ---- */
.etv2-card__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    font-family: var(--vm-font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--vm-text);
}
.etv2-card__trust-icon {
    display: inline-flex;
    color: var(--vm-orange);
}

/* ---- Help link in the card head, shown after a failed sign-in ---- */
.etv2-card__head {
    /* Existing flex row of icon + text; the help link is pushed to the far right so
       it appears beside "Ready to get started?" rather than under it. */
    justify-content: space-between;
}
.etv2-card__help-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 7px 12px;
    border: 1px solid var(--vm-orange);
    border-radius: 999px;
    color: var(--vm-orange);
    background: #FFF;
    font-family: var(--vm-font-head);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.etv2-card__help-link:hover,
.etv2-card__help-link:focus {
    background: var(--vm-orange);
    color: #FFF;
}
/* Needed explicitly: the class above sets display, which out-specifies the user
   agent's [hidden] { display: none } and would otherwise leave the link visible. */
.etv2-card__help-link[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .etv2-card__head { flex-wrap: wrap; }
    .etv2-card__help-link { margin-top: 10px; }
}

/* ---- Clear-and-start-over, for shared terminals ---- */
.etv2-reset {
    margin: 14px 0 0;
    text-align: center;
}
.etv2-reset__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* It is a <button> so it can POST without nesting a form; these resets make it
       read as the quiet text link it is meant to be. */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--vm-text-muted);
    font-size: 13px;
    text-decoration: none;
}
.etv2-reset__link:hover,
.etv2-reset__link:focus {
    color: var(--vm-orange);
    border-bottom-color: var(--vm-orange);
}

/* Carrier for a CSRF token and nothing else - the idle wipe in signin_idle.js submits it.
   display:none rather than a visually-hidden pattern: there is nothing here to read, and
   nothing focusable that should stay in the tab order. */
.etv2-hidden-form { display: none; }