/* =========================================================
   Operator application form.

   The page a carrier decides on. It was a 760px column adrift in a 1440px
   page, with the reasons to apply scrolled off the top by the time anyone
   reached a field — so the layout puts the case beside the work, and the form
   itself says what it wants before it is submitted rather than after.

   Rides on the public layout's tokens (--teal, --purple, --panel, --border,
   --muted) so it stays in step with the rest of the marketing site.
   ========================================================= */

/* ---------- Hero ---------- */
.oa-hero{padding-bottom:26px}

/* The three numbers a carrier is weighing. They were inside a sentence, which
   is where numbers go to be skipped. */
.oa-hero-facts{
    list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
    margin:26px auto 0;padding:0;position:relative;max-width:640px;
}
.oa-hero-facts li{
    background:var(--panel);border:1px solid var(--border);border-radius:14px;
    padding:12px 20px;min-width:140px;
}
.oa-hero-facts b{display:block;font-family:'Poppins',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.4px}
.oa-hero-facts span{font-size:11.5px;color:var(--muted);letter-spacing:.2px}

/* ---------- Progress track ----------
   Four labelled boxes became a track with a marked position. The words did not
   change; what was missing was any sign of where the applicant stands in them,
   which is the only thing a progress display exists to say. */
.oa-track{
    list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    margin:0 0 28px;padding:0;position:relative;
}
.oa-track-step{position:relative;padding:0 12px;text-align:center}
/* The rail between the dots. Drawn per step and stopped at the ends so it
   never overshoots into empty space. */
.oa-track-step::before{
    content:'';position:absolute;top:17px;left:0;right:50%;height:2px;background:var(--border);
}
.oa-track-step::after{
    content:'';position:absolute;top:17px;left:50%;right:0;height:2px;background:var(--border);
}
.oa-track-step:first-child::before,
.oa-track-step:last-child::after{display:none}

.oa-track-dot{
    position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;margin-bottom:9px;
    background:var(--panel);border:2px solid var(--border);color:var(--muted);font-size:14px;
}
.oa-track-step b{display:block;font-size:13px;font-weight:700}
.oa-track-step small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* The step being done now. Everything after it stays quiet rather than being
   greyed out — those steps are ahead, not disabled. */
.oa-track-step.is-now .oa-track-dot{
    background:linear-gradient(135deg,var(--teal),var(--purple));border-color:transparent;color:#fff;
    box-shadow:0 6px 18px rgba(0,184,148,.28);
}
.oa-track-step.is-now b{color:var(--teal)}

/* ---------- Layout ---------- */
.oa-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.oa-main{min-width:0}
.oa-aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px}

/* ---------- Cards ---------- */
.oa-card{
    background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:24px 26px;
    box-shadow:0 10px 30px rgba(15,23,42,.05);margin-bottom:16px;
}
.oa-card-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:20px}
.oa-card-ic{
    flex-shrink:0;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,rgba(0,209,178,.15),rgba(139,92,246,.15));color:var(--teal);font-size:16px;
}
.oa-card-head h2{font-family:'Poppins',sans-serif;font-size:17px;font-weight:800}
.oa-card-head p{color:var(--muted);font-size:13px;margin-top:3px;line-height:1.5}

/* ---------- Fields ---------- */
.oa-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.oa-grid .full{grid-column:1/-1}
.oa-fieldset{border:0;padding:0;margin:0;min-width:0}

.oa-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px}
.oa-opt{font-weight:500;color:var(--muted)}
.oa-in{
    width:100%;padding:12px 13px;border:1px solid var(--border);border-radius:11px;
    font-size:14px;font-family:inherit;background:var(--panel);color:inherit;transition:.14s;
}
.oa-in:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,184,148,.12)}
.oa-in.is-bad{border-color:#F87171;background:#FEF2F2}
.oa-in.is-bad:focus{border-color:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)}
textarea.oa-in{resize:vertical;min-height:104px;line-height:1.55}

.oa-hint{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.oa-under{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px}
.oa-under .oa-hint{margin-top:0}
.oa-count{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.oa-count.is-short{color:#B45309;font-weight:700}
.oa-count.is-ok{color:#15803D;font-weight:700}

/* Errors sit against the field that caused them. The summary at the top of the
   page stays, but on a two-card form it left the reader matching "The password
   field is required" to a box by eye. */
.oa-fielderr{display:flex;gap:6px;align-items:flex-start;font-size:12px;font-weight:600;color:#B91C1C;margin-top:6px;line-height:1.45}
.oa-fielderr i{margin-top:2px;font-size:10.5px}

.oa-err{
    background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;border-radius:14px;
    padding:14px 18px;margin-bottom:18px;
}
.oa-err b{display:flex;align-items:center;gap:8px;font-size:13.5px}
.oa-err ul{margin:8px 0 0 22px;font-size:12.5px;line-height:1.65}
.oa-err:focus{outline:2px solid #EF4444;outline-offset:3px}

/* ---------- Mode chips ----------
   Six identical boxes meant reading all six to find yours. The mode's own icon
   does that job before the label is read at all. */
.oa-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.oa-mode input{position:absolute;opacity:0;width:0;height:0}
.oa-mode span{
    position:relative;display:flex;align-items:center;gap:9px;padding:12px 34px 12px 13px;
    border:1px solid var(--border);border-radius:12px;cursor:pointer;
    font-size:13px;font-weight:600;color:#334155;background:var(--panel);transition:.14s;
}
.oa-mode span > i:first-child{color:var(--muted);width:16px;text-align:center;font-size:14px;transition:color .14s}
.oa-mode span:hover{border-color:#CBD5E1;transform:translateY(-1px)}

/* The tick is the confirmation; the tint alone was easy to miss on a row that
   already had a hover tint. */
.oa-mode-tick{
    position:absolute;right:12px;font-size:11px;color:var(--teal);
    opacity:0;transform:scale(.6);transition:.14s;
}
.oa-mode input:checked + span{
    border-color:var(--teal);background:rgba(0,184,148,.07);color:#0b7a63;
    box-shadow:0 0 0 3px rgba(0,184,148,.1);
}
.oa-mode input:checked + span > i:first-child{color:var(--teal)}
.oa-mode input:checked + span .oa-mode-tick{opacity:1;transform:scale(1)}
.oa-mode input:focus-visible + span{outline:2px solid var(--teal);outline-offset:2px}

/* ---------- Password strength ----------
   Four steps, shown only once there is something to judge. A meter sitting at
   zero under an empty box reads as a failure the applicant has not earned. */
.oa-meter{display:flex;align-items:center;gap:9px;margin-top:8px}
.oa-meter[hidden]{display:none}
.oa-meter-bar{flex:1;height:5px;border-radius:3px;background:var(--border);overflow:hidden}
.oa-meter-bar span{display:block;height:100%;width:0;border-radius:3px;transition:width .2s,background .2s}
.oa-meter-label{font-size:11px;font-weight:700;white-space:nowrap;min-width:52px;text-align:right}
.oa-meter.is-1 .oa-meter-bar span{width:25%;background:#EF4444}
.oa-meter.is-2 .oa-meter-bar span{width:50%;background:#F59E0B}
.oa-meter.is-3 .oa-meter-bar span{width:75%;background:#3B82F6}
.oa-meter.is-4 .oa-meter-bar span{width:100%;background:#10B981}
.oa-meter.is-1 .oa-meter-label{color:#B91C1C}
.oa-meter.is-2 .oa-meter-label{color:#B45309}
.oa-meter.is-3 .oa-meter-label{color:#1D4ED8}
.oa-meter.is-4 .oa-meter-label{color:#15803D}

/* ---------- Terms ---------- */
.oa-terms{
    display:flex;gap:11px;align-items:flex-start;font-size:13px;color:#475569;line-height:1.55;
    background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:13px 15px;cursor:pointer;
}
.oa-terms:hover{border-color:#CBD5E1}
.oa-terms.is-bad{border-color:#F87171;background:#FEF2F2}
.oa-terms input{width:17px;height:17px;accent-color:var(--teal);flex-shrink:0;margin-top:1px;cursor:pointer}
.oa-terms a{color:var(--teal);font-weight:700}

/* ---------- Submit ---------- */
.oa-submitrow{display:flex;flex-direction:column;gap:11px;align-items:center}
.oa-submit{
    width:100%;padding:15px;background:linear-gradient(135deg,#00B894,#00CEC9);color:#fff;border:0;
    border-radius:13px;font-weight:700;font-size:15.5px;font-family:inherit;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    box-shadow:0 10px 26px rgba(0,184,148,.30);transition:transform .14s,box-shadow .14s,filter .14s;
}
.oa-submit:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,184,148,.36)}
.oa-submit:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
/* Once it is in flight the button stops being a button: the request is on its
   way and a second press would be a second application. */
.oa-submit.is-busy{pointer-events:none;filter:saturate(.6);transform:none}

.oa-afterword{
    display:flex;gap:7px;align-items:center;font-size:12px;color:var(--muted);text-align:center;line-height:1.5;
}
.oa-afterword i{color:var(--teal);font-size:11px}
.oa-signin{text-align:center;font-size:12.5px;color:var(--muted);margin-top:18px}
.oa-signin a{color:var(--teal);font-weight:700}

/* ---------- Aside ---------- */
.oa-panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 20px}
.oa-panel--quiet{background:var(--panel2)}
.oa-panel h3{
    font-family:'Poppins',sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;
    letter-spacing:.7px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:13px;
}
.oa-panel h3 i{color:var(--teal);font-size:13px}
.oa-panel p{font-size:12.5px;color:var(--muted);line-height:1.6}

.oa-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.oa-perks li{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.55;color:var(--muted)}
.oa-perks i{
    flex-shrink:0;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
    background:rgba(0,184,148,.10);color:var(--teal);font-size:11px;margin-top:1px;
}
/* The lead-in of each perk sits at full contrast against the muted line it
   introduces. A brightness filter did this before, which is a guess at a
   colour rather than a colour. */
.oa-perks b{color:var(--text);font-weight:700}

/* A numbered sequence, so "what happens next" reads as an order of events
   rather than four unrelated promises. */
.oa-next{list-style:none;margin:0;padding:0 0 0 20px;position:relative;counter-reset:oastep}
.oa-next::before{content:'';position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:var(--border)}
.oa-next li{position:relative;padding-bottom:14px;font-size:12.5px;line-height:1.5}
.oa-next li:last-child{padding-bottom:0}
.oa-next li::before{
    content:'';position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;
    background:var(--panel);border:2px solid var(--teal);
}
.oa-next b{display:block;font-size:12.5px;font-weight:700}
.oa-next span{color:var(--muted)}

.oa-ghost{
    display:flex;align-items:center;gap:8px;margin-top:11px;padding:10px 13px;border-radius:10px;
    border:1px solid var(--border);background:var(--panel);color:inherit;text-decoration:none;
    font-size:12.5px;font-weight:700;transition:.14s;
}
.oa-ghost:hover{border-color:var(--teal);color:var(--teal)}
.oa-ghost i{color:var(--teal)}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
    .oa-layout{grid-template-columns:1fr}
    /* Below the form once it is no longer beside it: the case for applying is
       worth reading, but not ahead of the thing it is arguing for. */
    .oa-aside{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
}
@media(max-width:760px){
    .oa-track{grid-template-columns:repeat(2,1fr);row-gap:20px}
    /* The rail only makes sense along a single row; on two it would join steps
       that do not follow one another. */
    .oa-track-step::before,.oa-track-step::after{display:none}
}
@media(max-width:620px){
    .oa-grid,.oa-modes{grid-template-columns:1fr}
    .oa-card{padding:20px 18px}
    .oa-hero-facts li{flex:1;min-width:0;padding:10px 14px}
    .oa-hero-facts b{font-size:16px}
    .oa-under{flex-direction:column;gap:3px}
}