/* ---------------------------------------------------------------------------
   Check Application Status.

   The page an applicant reaches when they want one thing: to know where they
   stand. It used to be a single dark charcoal box dropped into the middle of a
   white page - the one dark element anywhere on the public site, floating in
   empty space, with nothing around it to say what the answer would mean.

   So: a light card in the site's own language, the two fields it needs, and
   beside them the short answer to the question people ask next - what the
   stages are, and what happens after each one. The result cards use the same
   card, so the answer arrives in the shape of the thing that asked for it.
   --------------------------------------------------------------------------- */

.status-page {
    --line: #e7e5e1;
    --muted: #6f6b66;
    --ink: #1b1a19;
    background: #f6f5f3;
    padding: 70px 0 90px;
}

.status-wrap {
    max-width: 1060px;
    margin: 0 auto;
}

/* ---- the card ------------------------------------------------------------ */

.status-box {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 34px 34px 30px;
    overflow: hidden;
}

    /* The company's red, the same rule the product cards wear. */
    .status-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary-color, #eb1c24);
    }

.status-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

    .status-eyebrow i {
        color: var(--primary-color, #eb1c24);
        font-size: 13px;
    }

.status-box h2 {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}

.status-box .lead {
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
    max-width: 62ch;
}

/* ---- the fields ---------------------------------------------------------- */

.status-field {
    margin-bottom: 18px;
}

    .status-field label {
        display: block;
        margin-bottom: 7px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .01em;
        color: var(--ink);
    }

    .status-field .form-control {
        width: 100%;
        height: 54px;
        padding: 0 20px;
        border: 1px solid #dcd8d3;
        border-radius: 12px;
        background: #fbfaf9;
        color: var(--ink);
        font-size: 16px;              /* 16px keeps iOS from zooming on focus */
        letter-spacing: .04em;
        font-variant-numeric: tabular-nums;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }

        .status-field .form-control::placeholder {
            color: #a9a49e;
            letter-spacing: 0;
        }

        .status-field .form-control:hover {
            border-color: #c9c4be;
        }

        .status-field .form-control:focus {
            outline: none;
            background: #fff;
            border-color: var(--primary-color, #eb1c24);
            box-shadow: 0 0 0 3px rgba(235, 28, 36, .12);
        }

    .status-field .help {
        margin-top: 7px;
        font-size: 12.5px;
        color: #8f8a84;
    }

/* The count sits inside the field, so somebody typing an Aadhaar number can
   see how far along they are without counting digits on the screen. */
.status-count {
    float: right;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    color: #a9a49e;
}

    .status-count.is-full {
        color: #1f7a3d;
    }

.status-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 13px 28px;
    border: 0;
    border-radius: 40px;
    background: var(--primary-color, #eb1c24);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease, transform .15s ease;
}

    .status-submit:hover:not(:disabled),
    .status-submit:focus-visible {
        filter: brightness(.92);
    }

    .status-submit:disabled {
        opacity: .6;
        cursor: progress;
    }

    .status-submit i {
        font-size: 12px;
        transition: transform .15s ease;
    }

    .status-submit:hover:not(:disabled) i {
        transform: translateX(3px);
    }

/* ---- what happens next, beside the form ---------------------------------- */

.status-aside {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    padding: 26px 24px;
    height: 100%;
}

    .status-aside h3 {
        margin: 0 0 16px;
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
    }

.status-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

    .status-steps li {
        position: relative;
        padding: 0 0 18px 34px;
        counter-increment: step;
    }

        /* The line joining the numbers, stopped short of the last one. */
        .status-steps li::after {
            content: '';
            position: absolute;
            left: 11px;
            top: 24px;
            bottom: 2px;
            width: 1px;
            background: var(--line);
        }

        .status-steps li:last-child {
            padding-bottom: 0;
        }

            .status-steps li:last-child::after {
                display: none;
            }

        .status-steps li::before {
            content: counter(step);
            position: absolute;
            left: 0;
            top: 0;
            width: 23px;
            height: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #f2f0ed;
            color: var(--muted);
            font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
            font-size: 11px;
            font-weight: 500;
        }

        .status-steps li b {
            display: block;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 2px;
        }

        .status-steps li span {
            font-size: 12.5px;
            line-height: 1.6;
            color: var(--muted);
        }

.status-help-note {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--muted);
}

    .status-help-note a {
        color: var(--primary-color, #eb1c24);
        font-weight: 600;
        text-decoration: none;
    }

        .status-help-note a:hover {
            text-decoration: underline;
        }

/* ---- the answer ---------------------------------------------------------- */

#statusMessage {
    display: none;
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
}

    #statusMessage.is-error {
        background: #fdeceb;
        border: 1px solid #f6cfcd;
        color: #9d2b25;
    }

    #statusMessage.is-info {
        background: #eef7ee;
        border: 1px solid #cfe4cf;
        color: #1f6b38;
    }

.status-results {
    margin-top: 26px;
}

.status-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 18px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 40px;
    padding: 7px 18px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 14px;
}

    .status-pill::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

/* Four tones, light rather than the old saturated blocks - the pill is a
   status, not a warning light. */
.tone-good { background: #e8f4ec; color: #1f6b38; }
.tone-wait { background: #eaf1fb; color: #2b4f80; }
.tone-warn { background: #fdf2e0; color: #8a5d10; }
.tone-stop { background: #fdeceb; color: #9d2b25; }

.status-detail {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: #57534e;
}

/* The formal notice. Set apart on purpose - it is the part with a deadline. */
.status-notice {
    border: 1px solid #cfe4dc;
    border-left: 3px solid #1aa179;
    border-radius: 10px;
    background: #f1f9f6;
    padding: 15px 17px;
    margin: 18px 0 0;
}

    .status-notice h4 {
        margin: 0 0 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
        color: #157a5c;
    }

    .status-notice p {
        margin: 0;
        font-size: 14px;
        line-height: 1.7;
        color: #3d5a52;
    }

.status-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 24px;
    margin-top: 22px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

    .status-meta div span {
        display: block;
        font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 1.1px;
        text-transform: uppercase;
        color: #9a948c;
        margin-bottom: 4px;
    }

    .status-meta div b {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ink);
        word-break: break-word;
    }

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
    .status-field .form-control,
    .status-submit,
    .status-submit i {
        transition: none;
    }
}

/* ---- narrow screens ---- */

@media (max-width: 991px) {
    .status-aside {
        margin-top: 18px;
        height: auto;
    }
}

@media (max-width: 575px) {
    .status-page {
        padding: 44px 0 60px;
    }

    .status-box {
        padding: 26px 20px 24px;
    }

    .status-card {
        padding: 22px 20px;
    }

    .status-submit {
        width: 100%;
        justify-content: center;
    }
}