/* ============================================================================
   wizard.css  -  standalone registration wizard (Register2.aspx)

   Loaded after bootstrap / app.min / delta.css. Only the pieces Bootstrap does
   not give us: the step rail, the passport frame, the document grid and the
   modal. Everything else on that page is plain Bootstrap.

   The wizard is deliberately NOT on Applicant.master. Registration happens
   before there is an applicant to put in a sidebar, and the page has to work for
   someone who has not signed in yet.
   ============================================================================ */

body.wz { background: #F0F2F7; }

/* ===== page width =================================================
   ONE PLACE to change how wide the wizard runs on a large screen.
   Bootstrap's .container would take it to 1320px at xxl; this caps it.
   Lower the number to narrow the form, raise it to widen. Below the value it
   simply behaves as a normal fluid container, so mobile is unaffected. */
:root { --wz-width: 940px; }
.wz-shell { max-width: var(--wz-width); }

/* ===== masthead =================================================== */
.wz-top {
    background: #012148;
    color: #fff;
    padding: 0 18px;
    height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.wz-top img { height: 36px; width: auto; }
.wz-top .tx { line-height: 1.15; min-width: 0; }
.wz-top .tx b { display: block; font-size: 14px; font-weight: 700; }
.wz-top .tx span { display: block; font-size: 10.5px; letter-spacing: .06em;
                   text-transform: uppercase; color: rgba(255,255,255,.6); }
.wz-top .ac { margin-left: auto; display: flex; gap: 8px; }
.wz-top .ac a {
    color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
    padding: 8px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 6px;
}
.wz-top .ac a.solid { background: #1877D2; border-color: #1877D2; }
@media screen and (max-width: 575.98px) {
    .wz-top .tx span { display: none; }
    .wz-top .ac a { padding: 7px 10px; font-size: 12px; }
}

.wz-hero {
    background: linear-gradient(180deg, #012148 0%, #073466 100%);
    color: #fff;
    padding: 26px 0 58px;
}
.wz-hero h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 4px; }
.wz-hero p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.72); }
/* Pulls the card up over the hero so the two read as one block. */
.wz-lift { margin-top: -44px; }

/* ===== section headings =========================================== */
.wz-label {
    display: block; margin: 22px 0 12px;
    font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
    font-weight: 700; color: #012148;
    padding-bottom: 7px; border-bottom: 2px solid #E4E9F2;
}
.wz-label:first-child { margin-top: 0; }

/* Uppercase entry, matching CleanUpper() on the server so what is typed is what
   is stored. The placeholder is exempted or it shouts. */
.text-upper { text-transform: uppercase; }
.text-upper::placeholder { text-transform: none; }

/* ===== passport ==================================================== */
.wz-pp {
    width: 132px; height: 156px; border: 2px dashed #C7D5E6; border-radius: 8px;
    background: #F7FAFD; display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; text-align: center; flex: none;
}
.wz-pp:hover { border-color: #1877D2; background: #EFF6FF; }
.wz-pp img { width: 100%; height: 100%; object-fit: cover; }
.wz-pp .ph { font-size: .74rem; color: #6B7A90; padding: 10px; }

/* ===== documents =================================================== */
.wz-docs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wz-doc {
    border: 1px solid #E4E9F2; border-radius: 8px; padding: 12px 14px;
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "meta meta" "btn status"; gap: 8px 12px; align-items: center;
}
.wz-doc .meta { grid-area: meta; min-width: 0; }
.wz-doc .meta b { display: block; font-size: .82rem; overflow-wrap: anywhere; }
.wz-doc .meta span { font-size: .72rem; color: #6B7A90; }
.wz-doc .pick { grid-area: btn; justify-self: start; }
.wz-doc .status { grid-area: status; justify-self: end; font-size: .74rem;
                  color: #6B7A90; overflow-wrap: anywhere; text-align: right; }
.wz-doc .status.ok a { color: #1E7F4F; font-weight: 600; }
@media screen and (max-width: 767.98px) { .wz-docs { grid-template-columns: 1fr; } }

/* ===== modal ======================================================= */
/* Kept as a class swap rather than Bootstrap's JS modal: the page toggles it
   from the server inside an UpdatePanel, and a display:none default means the
   markup can stay in the DOM through a partial postback. */
.wz-modal-back {
    display: none; position: fixed; inset: 0; z-index: 1080;
    background: rgba(4, 18, 38, .55); align-items: center; justify-content: center;
    padding: 18px;
}
.wz-modal-back.open { display: flex; }
.wz-modal {
    background: #fff; border-radius: 10px; width: 100%; max-width: 460px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28); overflow: hidden;
}
.wz-modal-head {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 18px; border-bottom: 1px solid #E4E9F2;
}
.wz-modal-head h3 { margin: 0; font-size: .98rem; font-weight: 700; color: #012148; }
.wz-modal-x { margin-left: auto; font-size: 22px; line-height: 1; color: #6B7A90;
              text-decoration: none; }
.wz-modal-body { padding: 16px 18px; font-size: .87rem; }
.wz-modal-foot { padding: 12px 18px; border-top: 1px solid #E4E9F2; text-align: right; }

/* ===== misc ======================================================== */
.wz-req { color: #C0392B; font-weight: 700; }
.wz-opt { color: #6B7A90; font-weight: 400; font-size: .76rem; }

/* CheckBoxList renders each competency as a plain input+label pair. Bootstrap's
   row/col wrapper handles the grid; this gives each item its card. */
.wz-comp label { font-size: .84rem; font-weight: 500; cursor: pointer; }
.wz-comp input { margin-right: 8px; }
.wz-comp > span, .wz-comp td {
    display: block; padding: 11px 13px; border: 1px solid #E4E9F2;
    border-radius: 8px; background: #fff;
}

.wz-appno {
    display: inline-block; padding: 5px 12px; border-radius: 0;
    background: #EEF3FA; color: #012148;
    font-size: .76rem; font-weight: 700; letter-spacing: .05em;
}

/* ===== auth pages ================================================== */
.wz-auth {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 28px 16px;
    background: linear-gradient(160deg, #012148 0%, #073466 55%, #084280 100%);
}
.wz-auth-card {
    width: 100%; max-width: 430px;
    background: #fff; border-radius: 12px;
    padding: 30px 28px 26px;
    box-shadow: 0 20px 50px rgba(1, 20, 45, .34);
}
/* The eye toggle sits inside the field, so the input needs room for it. */
.pwd-wrap .form-control { padding-right: 44px; }
.pwd-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; padding: 6px;
    background: none; border: 0; color: #6B7A90; cursor: pointer;
}
.pwd-eye svg { width: 100%; height: 100%; }
.pwd-eye .i-off { display: none; }
.pwd-wrap.show .i-on { display: none; }
.pwd-wrap.show .i-off { display: block; }
/* app.js marks invalid fields with .is-invalid; the message under the field is
   hidden until then. */
.err { display: none; }
.is-invalid ~ .err, .form-control.is-invalid + .err { display: block; }

/* ===== qualifications grid =========================================
   The grid is plain Bootstrap now - table-striped with a table-light head, the
   Striped Rows pattern from the template. The .wz-grid block that used to live
   here forced its own row borders with !important, which painted straight over
   the striping, so it has been removed rather than fought.

   Only the delete action needs anything: an icon link sized to match the
   reference. */
.wz-del { color: #6B7A90; font-size: 17px; line-height: 1; text-decoration: none; }
.wz-del:hover { color: #C0392B; }

/* ===== passport frame ============================================== */
/* The placeholder word sat beside the photograph once one was uploaded, because
   both children render and the frame is a flexbox. */
.wz-pp.has span { display: none; }
.wz-pp span { font-size: .78rem; color: #6B7A90; }


/* Frame goes solid once a photograph is in it - dashed reads as "drop a file
   here", which is no longer true. */
.wz-pp.has { border-style: solid; border-color: #C7D5E6; background: #fff; }

/* Application number sits to the right of the step rail. */
.wz-appno-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* ===== step rail =================================================== */
/* Numbered circles joined by a rule. The connector is drawn per node as a bar
   reaching back to the previous one, so it colours itself from the node's own
   state - no separate element to keep in step. */
.wz-rail {
    list-style: none; margin: 0 0 6px; padding: 0;
    display: flex; align-items: flex-start;
}
.wz-node {
    flex: 1; position: relative; text-align: center;
    padding: 4px 2px 0; min-width: 0;
}
.wz-node .bar {
    position: absolute; top: 19px; right: 50%; left: -50%;
    height: 2px; background: #E4E9F2;
}
.wz-node:first-child .bar { display: none; }
.wz-node.done .bar, .wz-node.now .bar { background: #1E7F4F; }

.wz-node .dot {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; border: 2px solid #E4E9F2;
    font-size: 14px; font-weight: 700; color: #8DA0B8;
}
.wz-node.done .dot { background: #1E7F4F; border-color: #1E7F4F; color: #fff; }
.wz-node.now  .dot { background: #0B57C4; border-color: #0B57C4; color: #fff;
                     box-shadow: 0 0 0 4px rgba(11,87,196,.14); }

.wz-node .lbl {
    display: block; margin-top: 8px;
    font-size: 11.5px; font-weight: 600; color: #8DA0B8; line-height: 1.25;
}
.wz-node .st { display: block; font-size: 10.5px; font-weight: 600; color: transparent; }
.wz-node.done .lbl, .wz-node.done .st { color: #1E7F4F; }
.wz-node.now  .lbl, .wz-node.now  .st { color: #0B57C4; }

/* Compacts rather than scrolling. Below 768 the labels go and the circles shrink;
   only the step being worked on keeps its caption, which is the only one that
   answers "where am I". */
@media screen and (max-width: 767.98px) {
    .wz-node .lbl, .wz-node .st { display: none; }
    .wz-node .dot { width: 30px; height: 30px; font-size: 12px; }
    .wz-node .bar { top: 15px; }
    .wz-node.now .lbl { display: block; font-size: 10.5px; }
}

/* ===== passport row ================================================ */
/* The frame and the first fields sit side by side at EVERY width - there is no
   stacking breakpoint. One used to sit at 480px, which is ABOVE an iPhone XR's
   414px viewport, so the layout collapsed on one of the commonest phones in use.

   The first track is a FIXED width, not auto. With auto, a grid track sizes to
   its widest child - and the widest child here is the caption ("JPG/PNG - large
   files are resized." is about 190px on one line), not the 96px frame. So the
   photo column silently inflated to caption width and squeezed the inputs. A
   fixed track cannot be pushed wider by its own contents, and the caption wraps
   inside it instead. */
.wz-pprow {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.wz-pprow .wz-pp { width: 128px; height: 140px; }

/* Wraps to as many lines as it needs rather than widening the column. */
.wz-pprow .wz-cap {
    font-size: .72rem;
    line-height: 1.25;
    margin-top: 6px;
    overflow-wrap: break-word;
}

@media screen and (max-width: 575.98px) {
    /* 414px: container 390, card body 358, minus a 104px column and a 12px gap
       leaves about 242px for the inputs - comfortable for a name field. */
    .wz-pprow { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
    .wz-pprow .wz-pp { width: 96px; height: 116px; }
    .wz-pprow .wz-cap { font-size: .66rem; }
}
@media screen and (max-width: 359.98px) {
    /* 320px, the narrowest phone still in real use: leaves about 170px, which is
       tight but still a usable input rather than a stacked column. */
    .wz-pprow { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
    .wz-pprow .wz-pp { width: 82px; height: 98px; }
}

/* ===== auth: split screen ==========================================
   Form on the left, a branded panel on the right. The panel is the first thing
   to go below 992px - on a phone it is decoration standing between the
   applicant and the only control on the page. */
.lg-wrap { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.lg-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 26px; border-bottom: 1px solid #F1F3F7; gap: 18px;
}
.lg-top .bd { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lg-top .bd img { height: 38px; width: auto; }
.lg-top .bd b { display: block; font-size: 14px; color: #012148; line-height: 1.2; }
.lg-top .bd span { display: block; font-size: 10.5px; letter-spacing: .05em;
                   text-transform: uppercase; color: #6B7A90; }
.lg-top .ac { display: flex; gap: 10px; align-items: center; flex: none; }

.lg-main { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.lg-left { display: flex; align-items: center; justify-content: center; padding: 34px 24px; }
.lg-formwrap { width: 100%; max-width: 420px; }

.lg-brand { text-align: center; margin-bottom: 18px; }
.lg-brand img { height: 66px; width: auto; }
.lg-brand h1 { font-size: 20px; font-weight: 800; margin: 12px 0 4px; color: #012148; }
.lg-brand p { margin: 0; font-size: 13px; color: #6B7A90; }

.lg-card { border: 1px solid #E4E9F2; border-radius: 14px; padding: 26px 24px; }

/* Icon sits inside the field, so the input needs room for it. */
.lg-ico { position: relative; }
.lg-ico > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
              color: #9AA9BC; font-size: 17px; pointer-events: none; }
.lg-ico .form-control { padding-left: 40px; }
.lg-ico .form-control.has-eye { padding-right: 44px; }
.lg-eye {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; padding: 6px; background: none; border: 0;
    color: #6B7A90; cursor: pointer;
}
.lg-eye svg { width: 100%; height: 100%; }
.lg-eye .i-off { display: none; }
.lg-ico.show .i-on { display: none; }
.lg-ico.show .i-off { display: block; }

.lg-right {
    background: linear-gradient(160deg, #012148 0%, #073466 58%, #0B4EA2 100%);
    display: flex; align-items: center; justify-content: center; padding: 40px;
    position: relative; overflow: hidden;
}
.lg-right::after {
    content: ""; position: absolute; right: -90px; bottom: -90px;
    width: 380px; height: 380px; border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}
.lg-promo { max-width: 460px; color: #fff; position: relative; z-index: 1; }
.lg-promo img { width: 96px; height: auto; margin-bottom: 22px; }
.lg-promo h2 { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; }
.lg-promo p { font-size: 14px; color: rgba(255, 255, 255, .74); margin: 0 0 22px; }
.lg-promo ul { list-style: none; padding: 0; margin: 0; }
.lg-promo li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0;
               font-size: 13.5px; color: rgba(255, 255, 255, .88); }
.lg-promo li i { color: #6FD3A6; font-size: 17px; flex: none; }

.lg-foot { border-top: 1px solid #F1F3F7; padding: 14px 26px; text-align: center;
           font-size: 11.5px; color: #6B7A90; }

@media screen and (max-width: 991.98px) {
    .lg-main { grid-template-columns: 1fr; }
    .lg-right { display: none; }
}


/* ===== error pages ================================================= */
.er-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 16px; }
.er-card {
    width: 100%; max-width: 640px; background: #fff;
    border: 1px solid #E4E9F2; border-radius: 14px;
    padding: 34px 32px; box-shadow: 0 14px 40px rgba(1, 20, 45, .10);
}
.er-ico {
    width: 62px; height: 62px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin-bottom: 18px;
}
.er-warn { background: #FDF0D5; color: #8A6100; }
.er-info { background: #EEF3FA; color: #0B4EA2; }
.er-bad  { background: #FDECEC; color: #C0392B; }
.er-card h1 { font-size: 1.5rem; font-weight: 800; color: #012148; margin: 0 0 8px; }
.er-card .lead { font-size: .95rem; color: #45566E; margin: 0 0 22px; }

.er-limits { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.er-limits div { flex: 1 1 200px; border: 1px solid #E4E9F2; border-radius: 9px; padding: 12px 14px; }
.er-limits span { display: block; font-size: .68rem; letter-spacing: .07em;
                  text-transform: uppercase; color: #6B7A90; font-weight: 700; }
.er-limits b { display: block; font-size: .9rem; color: #012148; margin-top: 3px; }

.er-help { border-top: 1px dashed #DDE5EF; padding-top: 18px; margin-bottom: 22px; }
.er-help h2 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
              color: #6B7A90; font-weight: 700; margin: 0 0 10px; }
.er-help ul { margin: 0; padding-left: 18px; }
.er-help li { font-size: .88rem; color: #34435C; padding: 4px 0; }
.er-act { display: flex; gap: 10px; flex-wrap: wrap; }
@media screen and (max-width: 575.98px) {
    .er-card { padding: 26px 20px; }
    .er-act .btn { width: 100%; }
}

/* The oversize warning modal used to live here. It moved to delta.css because
   Applicant/Tickets.aspx uses it too and the applicant master does not load this
   file - so on that page the dialogue rendered with no styling at all, which is
   to say it did not hide, did not overlay and did not look like a dialogue.
   Register.aspx loads both stylesheets, so nothing is lost by keeping it there. */