/* Applicant portal and the shared Application Procedure (guideline) UI: gl-*,
   the applicant dashboard, COL acceptance, payments, notifications, profile.
   Reads the design tokens in hma-ui.css; the page header, cards, stat tiles,
   tables, alerts and buttons come from there.

   1. Progress widths (progressWidthClass())
   2. Dashboard
   3. COL Acceptance
   4. Payments
   5. Notifications
   6. Profile and profile setup
   7. Requested Documents page frame
   8. Application Procedure module (gl-*) */

/* 1. Progress widths ------------------------------------------------------- */
/* progressWidthClass() rounds to the nearest 5%; a class instead of an inline
   width keeps every bar CSP-clean. Without these a .gl-progress__bar (a plain
   block) filled the whole track whatever the percentage. */
.progress-width-0 { width: 0%; }
.progress-width-5 { width: 5%; }
.progress-width-10 { width: 10%; }
.progress-width-15 { width: 15%; }
.progress-width-20 { width: 20%; }
.progress-width-25 { width: 25%; }
.progress-width-30 { width: 30%; }
.progress-width-35 { width: 35%; }
.progress-width-40 { width: 40%; }
.progress-width-45 { width: 45%; }
.progress-width-50 { width: 50%; }
.progress-width-55 { width: 55%; }
.progress-width-60 { width: 60%; }
.progress-width-65 { width: 65%; }
.progress-width-70 { width: 70%; }
.progress-width-75 { width: 75%; }
.progress-width-80 { width: 80%; }
.progress-width-85 { width: 85%; }
.progress-width-90 { width: 90%; }
.progress-width-95 { width: 95%; }
.progress-width-100 { width: 100%; }

/* 2. Dashboard ------------------------------------------------------------- */
.app-next__message {
    display: flex;
    gap: var(--ui-space-2);
    align-items: flex-start;
    max-width: var(--ui-reading-max);
    margin: 0 0 var(--ui-space-4);
    font-size: var(--ui-fs-base);
    line-height: 1.55;
    color: var(--ui-text);
}

.app-next__message > i {
    margin-top: 0.2rem;
    color: var(--ui-primary-text);
    flex-shrink: 0;
}

.app-next__procedure {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ui-space-3) var(--ui-space-4);
    align-items: center;
    padding: var(--ui-space-4);
    margin-bottom: var(--ui-space-5);
    border: 1px solid var(--ui-primary-soft-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-soft);
}

.app-next__number {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-radius-md);
    background: var(--ui-gradient-primary);
    color: #FFF;
    font-size: var(--ui-fs-lg);
    font-weight: var(--ui-fw-bold);
}

.app-next__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.app-next__label {
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-medium);
    color: var(--ui-text-secondary);
}

.app-next__title {
    font-size: var(--ui-fs-base);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.4;
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

.app-next__status {
    margin-top: var(--ui-space-1);
}

.app-next__done {
    display: flex;
    gap: var(--ui-space-2);
    align-items: center;
    margin: 0 0 var(--ui-space-5);
    font-weight: var(--ui-fw-semibold);
    color: var(--ui-success);
}

.app-facts {
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}

/* Four tiles at most, so the row never leaves one tile on a line of its own:
   4 across, 2 × 2 on tablets and phones, one column on the narrowest. */
.app-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-stat-progress {
    margin-top: var(--ui-space-2);
    --bs-progress-height: 6px;
}

.app-stat-text {
    font-size: var(--ui-fs-xl);
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}

.doc-where {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: var(--ui-fw-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.doc-where:hover,
.doc-where:focus-visible {
    text-decoration: underline;
}

.doc-where > i {
    font-size: 0.8em;
}

.app-doc-comment {
    margin-top: var(--ui-space-1);
    color: #8A3B04 !important;
    font-weight: var(--ui-fw-medium);
}

.app-doc-locked {
    margin-top: var(--ui-space-1);
    color: var(--ui-warning) !important;
}

/* One-time welcome banner (dismissed for good with "Got it"). */
.app-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
.app-welcome__icon { font-size: 1.125rem; }
.app-welcome__text { flex: 1 1 20rem; min-width: 0; }
.app-welcome__action { margin: 0; }

.app-request-alert .btn {
    margin-top: var(--ui-space-1);
}

.app-request-alert__badge {
    font-size: var(--ui-fs-xs);
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

@media (max-width: 1199.98px) {
    .app-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    /* The whole tile is the link; the extra line only made phone tiles tall. */
    .app-stat-grid .stat-tile__link {
        display: none;
    }
    .app-next__procedure {
        grid-template-columns: auto minmax(0, 1fr);
        padding: var(--ui-space-3);
    }
    .app-next__action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    /* 2 × 2 on a phone; one column on the narrowest screens or with large text. */
    .app-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    }
}

/* 3. COL Acceptance -------------------------------------------------------- */
.col-progress {
    margin-bottom: var(--ui-space-4);
}

.col-items {
    list-style: none;
    margin: var(--ui-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--ui-space-3);
}

.col-item {
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
}

.col-item--warning {
    border-color: var(--ui-warning-border);
    border-left: 4px solid var(--ui-warning-solid);
}

.col-item--success {
    background: var(--ui-surface-2);
}

.col-item__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ui-space-3);
    align-items: start;
}

.col-item__number {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-text);
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-bold);
}

.col-item__text {
    min-width: 0;
}

.col-item__title {
    margin: 0.2rem 0 0;
    font-size: var(--ui-fs-base);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.4;
}

.col-item__description {
    margin: var(--ui-space-1) 0 0;
    font-size: var(--ui-fs-md);
    color: var(--ui-text-secondary);
}

.col-item__status {
    white-space: normal;
    text-align: left;
}

.col-item__note {
    margin: var(--ui-space-3) 0 0;
}

.col-item__file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ui-space-3);
    align-items: center;
    margin-top: var(--ui-space-3);
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
}

.col-item__file-icon,
.pay-receipt__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-radius);
    background: var(--ui-success-bg);
    color: var(--ui-success);
}

.col-item__file-body,
.pay-receipt__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.col-item__file-name,
.pay-receipt__name {
    font-weight: var(--ui-fw-semibold);
    overflow-wrap: anywhere;
}

.col-item__file-meta,
.pay-receipt__label {
    font-size: var(--ui-fs-sm);
    color: var(--ui-text-secondary);
}

.col-item__file-actions,
.pay-receipt__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

.col-item__form {
    margin-top: var(--ui-space-4);
    padding-top: var(--ui-space-4);
    border-top: 1px dashed var(--ui-border-strong);
}

.col-item__actions {
    margin-top: var(--ui-space-3);
}

@media (max-width: 575.98px) {
    .col-item {
        padding: var(--ui-space-3);
    }
    .col-item__head {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .col-item__status {
        grid-column: 2;
        justify-self: start;
    }
    .col-item__file,
    .pay-receipt {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .col-item__file-actions,
    .pay-receipt__actions {
        grid-column: 1 / -1;
    }
    .col-item__file-actions .btn,
    .pay-receipt__actions .btn,
    .col-item__actions .btn {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* 4. Payments -------------------------------------------------------------- */
.pay-card .card-heading__meta strong {
    color: var(--ui-text);
    font-weight: var(--ui-fw-semibold);
}

.pay-receipt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ui-space-3);
    align-items: center;
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
}

/* Amount due and the admissions decision: facts, shown as text, not fields. */
.pay-facts {
    margin: 0 0 var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-2);
}

.pay-facts .form-label {
    margin-bottom: 0;
    color: var(--ui-text-secondary);
    font-weight: var(--ui-fw-medium);
}

.pay-facts__value.form-control-plaintext {
    min-height: 0;
    padding: 0.15rem 0 0;
    color: var(--ui-text);
    font-size: var(--ui-fs-lg);
    font-weight: var(--ui-fw-semibold);
}

/* 5. Notifications --------------------------------------------------------- */
.notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ui-space-2) var(--ui-space-4);
    align-items: start;
    padding: var(--ui-space-4) 0;
    border-bottom: 1px solid var(--ui-border);
}

.notice:last-child {
    border-bottom: 0;
}

.notice__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-text);
}

.notice__body {
    min-width: 0;
}

.notice__title {
    margin: 0.3rem 0 var(--ui-space-1);
    font-size: var(--ui-fs-base);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.4;
}

.notice__message {
    margin: 0;
    max-width: var(--ui-reading-max);
    font-size: var(--ui-fs-md);
    color: var(--ui-text-secondary);
    overflow-wrap: anywhere;
}

.notice__when {
    padding-top: 0.35rem;
    font-size: var(--ui-fs-sm);
    color: var(--ui-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .notice {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .notice__when {
        grid-column: 2;
        grid-row: 1;
        padding-top: 0;
    }
    .notice__body {
        grid-column: 2;
    }
}

/* 6. Profile and profile setup --------------------------------------------- */
.app-form-card {
    max-width: calc(var(--ui-form-max) + 2 * var(--ui-space-5) + 2px);
}

.profile-form__legend {
    margin: 0 0 var(--ui-space-4);
}

.profile-form .form-section__title {
    font-size: var(--ui-fs-lg);
}

.profile-form__locked {
    color: var(--ui-warning);
}

.profile-setup__intro {
    margin-bottom: var(--ui-space-5);
}

.profile-setup__count {
    display: flex;
    gap: var(--ui-space-2);
    align-items: center;
    margin: var(--ui-space-2) 0 0;
    font-weight: var(--ui-fw-semibold);
    color: var(--ui-warning);
}

/* 7. Requested Documents page frame ---------------------------------------- */
.dr-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-4);
    margin-bottom: var(--ui-space-3);
}

.dr-list-head .gl-section-title {
    margin: 0;
}

/* 8. Application Procedure module (gl-*) ------------------------------------
   Rendered on the applicant pages and, through includes/guideline-ui.php and
   includes/document-request-ui.php, on admin screens too (Application
   Verification, Request Offer Letter, Requested Documents, the applicant
   record); gl-btn also styles the shared preview window. Sizes follow the
   student-portal brief: section headings 20px, procedure titles 19px, body
   16px, labels 15px, help 14px, touch targets at least 44px. Every status is
   carried by an icon and its wording as well as its colour. */
/* The palette lives on :root, not on .gl-page, because the same status badges
   and chips are now rendered on admin screens that are not laid out as a
   gl-page — the admin review queues and the requested-documents queue. Scoped
   to .gl-page they resolved to nothing there and the badge lost its colour. */
:root {
    /* Guideline (Application Procedure) palette, mapped onto the design tokens. */
    --gl-text: var(--ui-text);
    --gl-text-soft: var(--ui-text-secondary);
    --gl-line: var(--ui-border);
    --gl-line-strong: var(--ui-border-strong);
    --gl-surface: var(--ui-surface);
    --gl-surface-soft: var(--ui-surface-2);
    --gl-idle-bg: var(--ui-neutral-bg);      --gl-idle-fg: var(--ui-neutral);      --gl-idle-line: var(--ui-neutral-border);
    --gl-progress-bg: var(--ui-warning-bg);  --gl-progress-fg: var(--ui-warning);  --gl-progress-line: var(--ui-warning-border);
    --gl-ready-bg: #ECFEFF;                  --gl-ready-fg: #0E7490;               --gl-ready-line: #A5F3FC;
    --gl-submitted-bg: var(--ui-info-bg);    --gl-submitted-fg: var(--ui-info);    --gl-submitted-line: var(--ui-info-border);
    --gl-review-bg: var(--ui-review-bg);     --gl-review-fg: var(--ui-review);     --gl-review-line: var(--ui-review-border);
    --gl-changes-bg: #FFF7ED;                --gl-changes-fg: #9A3412;             --gl-changes-line: #FDBA74;
    --gl-approved-bg: var(--ui-success-bg);  --gl-approved-fg: var(--ui-success);  --gl-approved-line: var(--ui-success-border);
    --gl-rejected-bg: var(--ui-danger-bg);   --gl-rejected-fg: var(--ui-danger);   --gl-rejected-line: var(--ui-danger-border);
}

.gl-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: var(--gl-text);
    line-height: 1.55;
}

/* ---- Typography ---- */
/* The procedure's own title under the page's h1 ("Application Procedure 2"). */
.gl-page-title {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);  /* 20px -> 23px */
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--gl-text);
}

.gl-section-title {
    font-size: 1.25rem;   /* 20px */
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.85rem;
    color: var(--gl-text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.gl-subsection-title {
    font-size: 1.0625rem;   /* 17px */
    font-weight: 600;
    line-height: 1.4;
    margin: 1.5rem 0 0.6rem;
    color: var(--gl-text);
}

.gl-subsection-title:first-of-type {
    margin-top: 0.75rem;
}

.gl-lead {
    font-size: var(--ui-fs-base);
    line-height: 1.6;
    color: var(--gl-text-soft);
    margin: 0.5rem 0 0;
    max-width: 68ch;
}

.gl-body {
    font-size: 1rem;   /* 16px */
    line-height: 1.6;
    color: var(--gl-text);
    margin: 0 0 0.75rem;
    max-width: 74ch;
}

.gl-body:last-child {
    margin-bottom: 0;
}

.gl-help {
    font-size: 0.875rem;   /* 14px */
    line-height: 1.5;
    color: var(--gl-text-soft);
    margin: 0.35rem 0 0;
}

.gl-muted {
    color: var(--gl-text-soft);
}

.gl-label {
    display: block;
    font-size: 0.9375rem;   /* 15px */
    font-weight: 600;
    line-height: 1.4;
    color: var(--gl-text);
    margin-bottom: 0.35rem;
}

.gl-required {
    color: var(--ui-danger);
    font-weight: 700;
}

.gl-optional {
    color: var(--gl-text-soft);
    font-weight: 500;
    font-size: 0.875rem;
}

.gl-error {
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ui-danger);
    margin: 0.35rem 0 0;
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
}

.gl-inline-link {
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Panels ---- */
.gl-panel {
    background: var(--gl-surface);
    border: 1px solid var(--gl-line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-xs);
    padding: 1.5rem;
}

.gl-panel--attention {
    border-left: 4px solid #C2410C;
    background: #FFFBF6;
}

/* A one-line state pill beside a heading ("2 documents waiting on you"). */
.gl-intro__done {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gl-approved-fg);
    background: var(--gl-approved-bg);
    border: 1px solid var(--gl-approved-line);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: var(--ui-fs-sm);
}

/* ---- Buttons ----
   Always used as "btn gl-btn gl-btn--…", so each variant sets Bootstrap's own
   button variables: hover, active and disabled states then come out right,
   and the look matches btn-primary / btn-outline-* everywhere else. The sizes
   stay a little larger for touch (44px, 50px large, 38px small). */
.gl-btn {
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-font-size: var(--ui-fs-md);
    --bs-btn-font-weight: var(--ui-fw-semibold);
    --bs-btn-line-height: 1.3;
    --bs-btn-border-radius: var(--ui-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    text-decoration: none;
}

.gl-btn--lg {
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: var(--ui-fs-base);
    min-height: 50px;
}

.gl-btn--sm {
    --bs-btn-padding-x: 0.85rem;
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-font-size: var(--ui-fs-sm);
    min-height: 38px;
}

.gl-btn--primary {
    --bs-btn-color: #FFF;
    --bs-btn-bg: var(--ui-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: var(--ui-primary-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: var(--ui-primary-active);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #93A9D8;
    --bs-btn-disabled-border-color: transparent;
    background-image: var(--ui-gradient-primary);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.gl-btn--primary:hover {
    background-image: var(--ui-gradient-primary-hover);
}

.gl-btn--primary:active,
.gl-btn--primary.active {
    background-image: none;
}

.gl-btn--primary:disabled,
.gl-btn--primary.disabled {
    background-image: none;
    box-shadow: none;
}

/* Secondary: white with the primary text colour (outline-primary). */
.gl-btn--secondary {
    --bs-btn-color: var(--ui-primary-text);
    --bs-btn-bg: var(--ui-surface);
    --bs-btn-border-color: var(--ui-primary-soft-border);
    --bs-btn-hover-color: var(--ui-primary-active);
    --bs-btn-hover-bg: var(--ui-primary-soft);
    --bs-btn-hover-border-color: #A5B4FC;
    --bs-btn-active-color: var(--ui-primary-active);
    --bs-btn-active-bg: #E0EAFF;
    --bs-btn-active-border-color: #A5B4FC;
    box-shadow: var(--ui-shadow-xs);
}

/* Ghost: the quiet white button (outline-secondary). */
.gl-btn--ghost {
    --bs-btn-color: var(--ui-text);
    --bs-btn-bg: var(--ui-surface);
    --bs-btn-border-color: var(--ui-border-strong);
    --bs-btn-hover-color: var(--ui-text);
    --bs-btn-hover-bg: var(--ui-surface-2);
    --bs-btn-hover-border-color: #94A3B8;
    --bs-btn-active-color: var(--ui-text);
    --bs-btn-active-bg: var(--ui-surface-3);
    --bs-btn-active-border-color: #94A3B8;
    box-shadow: var(--ui-shadow-xs);
}

/* "Fix and resubmit": the main action of a procedure that came back. */
.gl-btn--warning {
    --bs-btn-color: #FFF;
    --bs-btn-bg: #B45309;
    --bs-btn-border-color: #B45309;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #92400E;
    --bs-btn-hover-border-color: #92400E;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: #78350F;
    --bs-btn-active-border-color: #78350F;
}

.gl-btn--danger-ghost {
    --bs-btn-color: var(--ui-danger);
    --bs-btn-bg: var(--ui-surface);
    --bs-btn-border-color: #FCA5A5;
    --bs-btn-hover-color: #991B1B;
    --bs-btn-hover-bg: var(--ui-danger-bg);
    --bs-btn-hover-border-color: #F87171;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: var(--ui-danger);
    --bs-btn-active-border-color: var(--ui-danger);
    box-shadow: var(--ui-shadow-xs);
}

.gl-btn:disabled,
.gl-btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ---- Status badge ---- */
/* Same proportions as the shared status pill (hma-ui.css .status-pill). */
.gl-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    min-height: 26px;
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    line-height: 1.25;
    padding: 0.2rem 0.65rem 0.2rem 0.55rem;
    border-radius: var(--ui-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}

.gl-status > i {
    font-size: 0.85em;
}

.gl-status--lg {
    min-height: 30px;
    font-size: var(--ui-fs-sm);
    padding: 0.3rem 0.85rem 0.3rem 0.7rem;
}

.gl-status--idle {
    background: var(--gl-idle-bg);      color: var(--gl-idle-fg);      border-color: var(--gl-idle-line);
}

.gl-status--progress {
    background: var(--gl-progress-bg);  color: var(--gl-progress-fg);  border-color: var(--gl-progress-line);
}

.gl-status--ready {
    background: var(--gl-ready-bg);     color: var(--gl-ready-fg);     border-color: var(--gl-ready-line);
}

.gl-status--submitted {
    background: var(--gl-submitted-bg); color: var(--gl-submitted-fg); border-color: var(--gl-submitted-line);
}

.gl-status--review {
    background: var(--gl-review-bg);    color: var(--gl-review-fg);    border-color: var(--gl-review-line);
}

.gl-status--changes {
    background: var(--gl-changes-bg);   color: var(--gl-changes-fg);   border-color: var(--gl-changes-line);
}

.gl-status--approved {
    background: var(--gl-approved-bg);  color: var(--gl-approved-fg);  border-color: var(--gl-approved-line);
}

.gl-status--rejected {
    background: var(--gl-rejected-bg);  color: var(--gl-rejected-fg);  border-color: var(--gl-rejected-line);
}

/* ---- Progress ---- */
.gl-progress {
    height: 8px;
    background: #E2E8F0;
    border-radius: var(--ui-radius-pill);
    overflow: hidden;
}

.gl-progress--slim {
    height: 6px;
}

.gl-progress__bar {
    height: 100%;
    background: var(--ui-gradient-primary);
    border-radius: var(--ui-radius-pill);
    transition: width 0.3s ease;
}

/* ---- "Your progress" on the Application Procedures page ---- */
.gl-progress-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
}

.gl-progress-summary__value {
    font-size: var(--ui-fs-2xl);
    font-weight: var(--ui-fw-bold);
    line-height: 1;
    color: var(--ui-primary-text);
    font-variant-numeric: tabular-nums;
}

.gl-progress-summary__counts {
    list-style: none;
    margin: var(--ui-space-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2) var(--ui-space-5);
    font-size: var(--ui-fs-md);
    color: var(--ui-text-secondary);
}

.gl-progress-summary__counts li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.gl-progress-summary__counts i {
    color: var(--ui-primary-text);
}

.gl-progress-summary__counts strong {
    color: var(--ui-text);
}

.gl-progress-summary__alert,
.gl-progress-summary__alert i {
    color: #9A3412 !important;
}

/* ---- Procedure cards (the Application Procedures list) ---- */
.gl-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gl-card {
    background: var(--gl-surface);
    border: 1px solid var(--gl-line);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-xs);
    padding: 1.35rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.15rem;
    align-items: start;
}

.gl-card--attention {
    border-left: 4px solid #C2410C;
    background: #FFFCF8;
}

.gl-card__number {
    width: 44px;
    height: 44px;
    border-radius: var(--ui-radius-md);
    display: grid;
    place-items: center;
    background: var(--ui-gradient-primary);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
}

.gl-card--attention .gl-card__number {
    background: #B45309;
}

.gl-card--done .gl-card__number {
    background: var(--ui-success-solid);
}

.gl-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}

.gl-card__title {
    font-size: 1.1875rem;   /* 19px */
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    flex: 1 1 18rem;
    min-width: 0;
}

.gl-card__title a {
    color: var(--gl-text);
    text-decoration: none;
}

.gl-card__title a:hover,
.gl-card__title a:focus-visible {
    color: var(--ui-primary-text);
    text-decoration: underline;
}

.gl-card__description {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--gl-text);
    margin: 0 0 0.4rem;
    max-width: 72ch;
}

.gl-card__meaning {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--gl-text-soft);
    margin: 0 0 0.75rem;
}

.gl-card__facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.1rem;
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-card__facts li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gl-card__facts-alert {
    color: #8A3B04;
    font-weight: 600;
}

.gl-card__progress {
    margin-top: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gl-card__progress .gl-progress {
    flex: 1 1 12rem;
    min-width: 8rem;
}

.gl-card__progress-text {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
    white-space: nowrap;
}

.gl-card__action {
    align-self: center;
}

/* ---- Callouts ---- */
.gl-callout {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    border-radius: var(--ui-radius-md);
    border: 1px solid;
    padding: 0.75rem 1rem;
    margin: 0.85rem 0;
    font-size: var(--ui-fs-md);
    line-height: 1.55;
}

.gl-callout > div {
    min-width: 0;
}

.gl-callout > i {
    font-size: 1.05rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.gl-callout p:last-child {
    margin-bottom: 0;
}

.gl-callout--warning {
    background: var(--gl-changes-bg);  border-color: var(--gl-changes-line);  color: #6E2F03;
}

.gl-callout--danger {
    background: var(--gl-rejected-bg); border-color: var(--gl-rejected-line); color: #7A140B;
}

.gl-callout--success {
    background: var(--gl-approved-bg); border-color: var(--gl-approved-line); color: #0E4A1A;
}

.gl-callout--info {
    background: var(--gl-submitted-bg); border-color: var(--gl-submitted-line); color: var(--ui-info);
}

/* ---- Help links ---- */
.gl-help-panel__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

/* ---- Detail page shell ----
   The page header carries the breadcrumb; this pager at the foot of the page
   moves to the previous or next procedure or back to the list. */
.gl-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding-top: var(--ui-space-4);
    border-top: 1px solid var(--gl-line);
}

.gl-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ui-primary-text);
    text-decoration: none;
    padding: 0.5rem 0.15rem;
    min-height: 40px;
}

.gl-back:hover,
.gl-back:focus-visible {
    text-decoration: underline;
}

.gl-prevnext {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gl-prevnext__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-primary-text);
    background: #fff;
    border: 1px solid var(--gl-line-strong);
    border-radius: var(--ui-radius);
    padding: 0.5rem 0.8rem;
    min-height: 40px;
    max-width: 17rem;
    text-decoration: none;
}

.gl-prevnext__link:hover,
.gl-prevnext__link:focus-visible {
    background: var(--gl-surface-soft);
}

.gl-prevnext__link--disabled {
    color: var(--ui-text-muted);
    background: #F3F5F9;
    cursor: default;
}

.gl-prevnext__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* A flex child will not shrink below its content width without this, so a
    long procedure title kept its full box and extended past the viewport
    even though the ellipsis made it look clipped. */
    min-width: 0;
}

.gl-prevnext__counter {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
    font-weight: 600;
    white-space: nowrap;
}

.gl-detail-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    justify-content: space-between;
}

.gl-status-meaning {
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    margin: 0.6rem 0 0;
}

.gl-detail-head__deadline {
    margin: 0.75rem 0 0;
}

/* ---- Stepper ---- */
.gl-stepper {
    list-style: none;
    margin: 1.35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.25rem;
    counter-reset: gl-step;
}

.gl-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 9.5rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--ui-radius);
    border: 1px solid var(--gl-line);
    background: var(--gl-surface-soft);
}

.gl-step__marker {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.875rem;
    font-weight: 700;
    background: #fff;
    border: 1px solid var(--gl-line-strong);
    color: var(--gl-text-soft);
    flex-shrink: 0;
}

.gl-step__label {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gl-text-soft);
}

.gl-step--done {
    background: var(--gl-approved-bg);
    border-color: var(--gl-approved-line);
}

.gl-step--done .gl-step__marker {
    background: var(--gl-approved-fg);
    border-color: var(--gl-approved-fg);
    color: #fff;
}

.gl-step--done .gl-step__label {
    color: var(--gl-approved-fg);
}

.gl-step--current {
    background: #fff;
    border-color: var(--ui-primary-text);
    box-shadow: inset 0 0 0 1px var(--ui-primary);
}

.gl-step--current .gl-step__marker {
    background: var(--ui-primary);
    border-color: var(--ui-primary-text);
    color: #fff;
}

.gl-step--current .gl-step__label {
    color: var(--gl-text);
}

.gl-step__text {
    min-width: 0;
}

.gl-stepper-caption {
    display: none;
    margin: 0.6rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gl-text);
}

.gl-step-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--ui-fs-xs);
    font-weight: var(--ui-fw-semibold);
    background: var(--ui-primary-soft);
    color: var(--ui-primary-text);
    border: 1px solid var(--ui-primary-soft-border);
    border-radius: var(--ui-radius-sm);
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

/* ---- Deadline chip ---- */
.gl-deadline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    border: 1px solid;
}

.gl-deadline--normal {
    background: var(--gl-idle-bg);      color: var(--gl-idle-fg);      border-color: var(--gl-idle-line);
}

.gl-deadline--soon {
    background: var(--gl-progress-bg);  color: var(--gl-progress-fg);  border-color: var(--gl-progress-line);
}

.gl-deadline--overdue {
    background: var(--gl-rejected-bg);  color: var(--gl-rejected-fg);  border-color: var(--gl-rejected-line);
}

/* ---- Detail layout ---- */
.gl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 1.25rem;
    align-items: start;
}

.gl-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.gl-aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: calc(var(--ui-topbar-h) + var(--ui-space-4));
}

.gl-aside-panel {
    padding: 1.25rem;
}

.gl-aside-panel .gl-section-title {
    font-size: 1.125rem;
}

.gl-contact {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gl-line);
}

/* ---- Instructions and notes ---- */
.gl-instructions {
    margin: 0 0 0.5rem;
    padding-left: 1.35rem;
    font-size: 1rem;
    line-height: 1.6;
}

.gl-instructions li {
    margin-bottom: 0.55rem;
    padding-left: 0.2rem;
}

.gl-instructions li::marker {
    font-weight: 700;
    color: var(--ui-primary-text);
}

.gl-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gl-notes li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    background: var(--gl-progress-bg);
    border: 1px solid var(--gl-progress-line);
    border-radius: 10px;
    padding: 0.8rem 1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #6E4200;
}

.gl-notes li > i {
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.gl-missing-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.gl-missing-list li {
    margin-bottom: 0.35rem;
}

/* ---- Downloads ---- */
.gl-download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gl-download {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    padding: 0.95rem 1.05rem;
    background: var(--gl-surface-soft);
}

.gl-download__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-text);
    font-size: 1.05rem;
}

.gl-download__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gl-download__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.gl-download__description {
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    line-height: 1.5;
}

.gl-download__meta {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-download__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* ---- Form fields ---- */
.gl-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.1rem 1.35rem;
    margin-top: 0.5rem;
}

.gl-field {
    min-width: 0;
}

.gl-input {
    font-size: var(--ui-fs-base);
    line-height: 1.5;
    padding: 0.6rem 0.8rem;
    min-height: 46px;
    border-radius: var(--ui-radius);
    border: 1px solid var(--ui-input-border);
    color: var(--gl-text);
    background-color: #fff;
}

.gl-input:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
    outline: none;
}

.gl-input:disabled {
    background-color: var(--ui-surface-2);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-secondary);
}

.gl-input.is-invalid {
    border-color: var(--ui-danger-solid);
}

textarea.gl-input {
    min-height: 7rem;
    resize: vertical;
}

.gl-check .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.15rem;
}

.gl-check .form-check-label {
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 0.25rem;
}

.gl-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--gl-line);
}

.gl-form-actions .gl-help {
    flex: 1 1 16rem;
    margin: 0;
}

/* ---- Upload slots ---- */
.gl-upload {
    border: 1px solid var(--gl-line);
    border-radius: var(--ui-radius-lg);
    padding: 1.15rem;
    margin-top: 1rem;
    background: #fff;
}

.gl-upload--filled {
    border-color: var(--gl-ready-line);
    background: #FBFEFD;
}

.gl-upload__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.gl-upload__title {
    font-size: 1.0625rem;   /* 17px */
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* The upload rules, stated exactly as the server enforces them. */
.gl-rules {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-medium);
    line-height: 1.5;
    color: var(--ui-info);
    background: var(--ui-info-bg);
    border: 1px solid var(--ui-info-border);
    border-radius: var(--ui-radius);
    padding: 0.5rem 0.75rem;
    margin: 0.65rem 0 0.85rem;
}

.gl-rules > i {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.gl-rules__label {
    font-weight: var(--ui-fw-bold);
}

.gl-dropzone {
    border: 2px dashed var(--gl-line-strong);
    border-radius: var(--ui-radius-md);
    background: var(--gl-surface-soft);
    padding: 1.5rem 1rem;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gl-dropzone.is-dragging {
    border-color: var(--ui-primary-text);
    background: var(--ui-primary-soft);
}

.gl-dropzone__icon {
    font-size: 1.75rem;
    color: var(--ui-primary-text);
    display: block;
    margin-bottom: 0.5rem;
}

.gl-dropzone__text {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    color: var(--gl-text-soft);
    line-height: 1.5;
}

.gl-dropzone__strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gl-text);
}

.gl-dropzone__or {
    display: block;
    font-size: 0.875rem;
}

.gl-dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard users must still see where focus is, even though the input itself
   is visually hidden behind its label-button. */
.gl-dropzone__input:focus-visible + .gl-dropzone__chosen,
.gl-dropzone:focus-within {
    outline: 2px solid var(--ui-focus-color);
    outline-offset: 2px;
}

/* A slot that already holds a file: replacing it is a secondary task, so the
   drop area shrinks to one line. */
.gl-dropzone--compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    border-width: 1px;
}

.gl-dropzone--compact .gl-dropzone__icon {
    display: none;
}

.gl-dropzone--compact .gl-dropzone__text {
    margin: 0;
}

.gl-dropzone--compact .gl-dropzone__strong,
.gl-dropzone--compact .gl-dropzone__or {
    display: inline;
    font-size: var(--ui-fs-sm);
    font-weight: var(--ui-fw-medium);
}

.gl-dropzone--compact .gl-dropzone__chosen {
    flex-basis: 100%;
    margin-top: 0;
}

/* Nothing to drag on a touch screen: the button alone says what to do. */
@media (hover: none) and (pointer: coarse) {
    .gl-dropzone__text {
        display: none;
    }
    .gl-dropzone {
        padding: 1.1rem 1rem;
    }
}

.gl-dropzone__chosen {
    margin: 0.7rem 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gl-text);
    word-break: break-word;
}

.gl-upload__progress {
    margin-top: 0.9rem;
}

.gl-upload__progress-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gl-text-soft);
}

.gl-upload__message {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    font-weight: 600;
}

.gl-upload__message:empty {
    display: none;
}

.gl-upload__message.is-error {
    color: #7A140B;
    background: var(--gl-rejected-bg);
    border: 1px solid var(--gl-rejected-line);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.gl-upload__message.is-success {
    color: #0E4A1A;
    background: var(--gl-approved-bg);
    border: 1px solid var(--gl-approved-line);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.gl-upload__message.is-info {
    color: var(--ui-primary-text);
    background: var(--gl-submitted-bg);
    border: 1px solid var(--gl-submitted-line);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
}

.gl-upload__form {
    margin-top: 0.85rem;
}

.gl-upload__form [data-upload-submit] {
    margin-top: 0.85rem;
}

/* ---- Current file card ---- */
.gl-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    background: var(--gl-surface-soft);
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    padding: 0.9rem 1rem;
}

.gl-file__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #E4F5E6;
    color: #125C20;
}

.gl-file__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gl-file__name {
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.gl-file__meta {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-file__comment {
    font-size: 0.875rem;
    color: #8A3B04;
    font-weight: 600;
    margin-top: 0.25rem;
}

.gl-file__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gl-line);
}

.gl-inline-form {
    display: inline;
    margin: 0;
}

.gl-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gl-approved-fg);
    background: var(--gl-approved-bg);
    border: 1px solid var(--gl-approved-line);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    margin: 0.85rem 0 0;
}

/* ---- Review page ---- */
.gl-review-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    overflow: hidden;
}

.gl-review-row {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    padding: 0.85rem 1.05rem;
    border-bottom: 1px solid var(--gl-line);
    background: #fff;
}

.gl-review-row:last-child {
    border-bottom: 0;
}

.gl-review-row--missing {
    background: var(--gl-rejected-bg);
}

.gl-review-row dt {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gl-text-soft);
    margin: 0;
}

.gl-review-row dd {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    word-break: break-word;
}

.gl-review-missing {
    color: #96190E;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gl-review-files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.gl-review-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    border: 1px solid var(--gl-line);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    background: #fff;
}

.gl-review-file--missing {
    border-color: var(--gl-rejected-line);
    background: var(--gl-rejected-bg);
}

.gl-review-file__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--ui-primary-soft);
    color: var(--ui-primary-text);
}

.gl-review-file--missing .gl-review-file__icon {
    background: #FBD9D4;
    color: #96190E;
}

.gl-review-file__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.gl-review-file__title {
    font-size: 1rem;
    font-weight: 600;
}

.gl-review-file__meta {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
    word-break: break-word;
}

.gl-review-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gl-line);
}

.gl-submit-form {
    flex: 1 1 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: flex-start;
}

.gl-confirm {
    background: var(--gl-surface-soft);
    border: 1px solid var(--gl-line);
    border-radius: 10px;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    width: 100%;
}

.gl-confirm .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: -1.7rem;
    margin-top: 0.1rem;
}

.gl-confirm .form-check-label {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
}

.gl-next-panel {
    border-color: var(--ui-primary-soft-border);
    box-shadow: 0 0 0 1px var(--ui-primary-soft-border) inset, var(--ui-shadow-xs);
}

/* ---- Timeline ---- */
.gl-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.gl-timeline__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
}

.gl-timeline__dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.8125rem;
    background: var(--gl-idle-bg);
    color: var(--gl-idle-fg);
    border: 1px solid var(--gl-idle-line);
}

.gl-timeline__item--approved  .gl-timeline__dot {
    background: var(--gl-approved-bg);  color: var(--gl-approved-fg);  border-color: var(--gl-approved-line);
}

.gl-timeline__item--rejected  .gl-timeline__dot {
    background: var(--gl-rejected-bg);  color: var(--gl-rejected-fg);  border-color: var(--gl-rejected-line);
}

.gl-timeline__item--changes   .gl-timeline__dot {
    background: var(--gl-changes-bg);   color: var(--gl-changes-fg);   border-color: var(--gl-changes-line);
}

.gl-timeline__item--submitted .gl-timeline__dot {
    background: var(--gl-submitted-bg); color: var(--gl-submitted-fg); border-color: var(--gl-submitted-line);
}

.gl-timeline__item--review    .gl-timeline__dot {
    background: var(--gl-review-bg);    color: var(--gl-review-fg);    border-color: var(--gl-review-line);
}

.gl-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.gl-timeline__status {
    font-size: 0.9375rem;
    font-weight: 600;
}

.gl-timeline__time {
    font-size: 0.875rem;
    color: var(--gl-text-soft);
}

.gl-timeline__comment {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0.3rem 0 0;
    color: var(--gl-text);
    background: var(--gl-surface-soft);
    border-left: 3px solid var(--gl-line-strong);
    padding: 0.45rem 0.65rem;
    border-radius: 0 6px 6px 0;
}

.gl-approved-line {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9375rem;
    color: var(--gl-approved-fg);
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--gl-line);
}

@media (max-width: 1200px) {
    .gl-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .gl-aside {
        position: static;
    }
}

@media (max-width: 768px) {
    .gl-panel {
        padding: 1.15rem;
    }
    .gl-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.85rem 1rem;
        padding: 1.1rem;
    }
    .gl-card__action {
        grid-column: 1 / -1;
    }
    .gl-card__action .gl-btn {
        width: 100%;
    }
    .gl-download,
    .gl-review-file {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .gl-download__actions,
    .gl-review-file > .gl-btn {
        grid-column: 1 / -1;
    }
    .gl-download__actions .gl-btn,
    .gl-review-file > .gl-btn {
        flex: 1 1 auto;
    }
    /* The review table becomes stacked cards rather than a squeezed grid. */
    .gl-review-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }
    /* Compact progress indicator on small screens: six markers on one row with
               the current step named underneath, so the flow stays visible without
               pushing the actual content off the first screen. */
    .gl-stepper {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }
    .gl-step {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.45rem 0;
        justify-content: center;
    }
    /* Clipped rather than removed: assistive technology still reads the step
               name and whether it is done. */
    .gl-step .gl-step__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .gl-stepper-caption {
        display: block;
    }
    .gl-prevnext {
        width: 100%;
        justify-content: space-between;
    }
    .gl-prevnext__counter {
        order: -1;
        width: 100%;
    }
    .gl-prevnext__title {
        display: none;
    }
    .gl-review-actions .gl-btn,
    .gl-submit-form .gl-btn {
        width: 100%;
    }
    .gl-pager {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .gl-card__number {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
    }
    .gl-file__actions .gl-btn,
    .gl-inline-form,
    .gl-inline-form .gl-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Required-field validation on the guideline forms.
   An incomplete item is marked three ways at once — red border, light-red
   fill and a red warning icon with wording underneath — so the meaning does
   not depend on colour alone.
   ========================================================================== */
.gl-page {
    --gl-invalid-border: #B42318;
    --gl-invalid-bg: #FEF3F2;
    --gl-invalid-fg: #7A140B;
}

/* ---- Field-level ---- */
.gl-field--invalid {
    background: var(--gl-invalid-bg);
    border: 1px solid var(--gl-invalid-border);
    border-radius: 10px;
    padding: 0.75rem 0.85rem 0.85rem;
    margin: -0.75rem -0.85rem -0.85rem;
}

.gl-field--invalid .gl-label {
    color: var(--gl-invalid-fg);
}

.gl-field--invalid .gl-help {
    color: #8A4038;
}

.gl-input.is-invalid,
.form-select.gl-input.is-invalid {
    border-color: var(--gl-invalid-border);
    border-width: 2px;
    background-color: #FFF7F6;
}

.gl-input.is-invalid:focus {
    border-color: var(--gl-invalid-border);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.2);
}

.gl-check .form-check-input.is-invalid {
    border-color: var(--gl-invalid-border);
    border-width: 2px;
}

.gl-error > i {
    color: var(--gl-invalid-border);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* ---- Upload slots ---- */
.gl-upload--invalid {
    border-color: var(--gl-invalid-border);
    border-width: 2px;
    background: var(--gl-invalid-bg);
}

.gl-upload--invalid .gl-upload__title {
    color: var(--gl-invalid-fg);
}

.gl-upload--invalid .gl-dropzone {
    border-color: #E7A9A2;
    background: #FFF7F6;
}

.gl-upload__required {
    margin: 0.55rem 0 0;
}

/* ---- Summary above the working area ---- */
.gl-validation-summary {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    background: var(--gl-invalid-bg);
    border: 1px solid var(--gl-invalid-border);
    border-left-width: 6px;
    border-radius: var(--ui-radius-lg);
    padding: 1.15rem 1.35rem;
    box-shadow: var(--ui-shadow-xs);
    scroll-margin-top: 1rem;
}

.gl-validation-summary:focus-visible {
    outline: 3px solid var(--gl-invalid-border);
    outline-offset: 2px;
}

.gl-validation-summary__icon {
    font-size: 1.35rem;
    color: var(--gl-invalid-border);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.gl-validation-summary__body {
    min-width: 0;
}

.gl-validation-summary__title {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--gl-invalid-fg);
    margin: 0 0 0.35rem;
}

.gl-validation-summary__count {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gl-invalid-fg);
    margin: 0 0 0.6rem;
}

.gl-validation-summary__list {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--gl-invalid-fg);
}

.gl-validation-summary__list li {
    margin-bottom: 0.3rem;
}

.gl-validation-summary__list a {
    font-weight: 700;
    color: var(--gl-invalid-fg);
}

.gl-validation-summary__list a:hover,
.gl-validation-summary__list a:focus-visible {
    color: #5C0F08;
}

/* ---- Live count beside "Save and review" ---- */
.gl-outstanding {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 100%;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gl-invalid-fg);
    margin: 0.25rem 0 0;
}

.gl-outstanding > i {
    color: var(--gl-invalid-border);
}

/* Anchored jumps from the summary should not hide behind the sticky topbar. */
.gl-field,
.gl-upload {
    scroll-margin-top: 5rem;
}

/* Arriving from the dashboard's "Where to upload" link lands on one slot among
   several, so say which one it was. */
.gl-upload:target {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring);
}

@media (max-width: 768px) {
    .gl-validation-summary {
        padding: 1rem;
        gap: 0.65rem;
    }
    .gl-validation-summary__title {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Document preview — one component for every preview in the portal
   ========================================================================== */
.gl-sample-hint {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--ui-text-secondary);
    margin: 0.75rem 0 0.5rem;
}

.gl-sample-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.gl-sample-missing {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: #8A5300;
    background: #FFF4E0;
    border: 1px solid #F0C57C;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin: 0;
}

/* ==========================================================================
   Conditional Offer Letter request panel
   ========================================================================== */
.gl-offer {
    border-left: 6px solid var(--hma-secondary, var(--ui-primary));
}

.gl-offer__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.gl-offer__head .gl-section-title {
    margin-bottom: 0;
}

.gl-offer__message {
    margin-top: 0.85rem;
}

.gl-offer__count {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ui-text-secondary);
    margin-left: 0.5rem;
}

.gl-offer-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gl-offer-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    background: var(--ui-surface-2);
}

.gl-offer-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 16rem;
    min-width: 0;
}

.gl-offer-item__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}

.gl-offer-item__meta {
    font-size: 0.875rem;
    color: var(--ui-text-secondary);
}

.gl-offer-item__comment {
    font-size: 0.875rem;
    font-weight: 600;
    color: #8A3B04;
    margin-top: 0.2rem;
}

@media (max-width: 575.98px) {
    .gl-offer-item .gl-btn {
        width: 100%;
    }
}

/* ---- Chips shared by the applicant cards and the admin queue ---- */
.gl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--gl-line);
    background: var(--gl-surface-soft);
    color: var(--gl-text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    /* A long due-date label wraps inside the chip instead of widening the row. */
    max-width: 100%;
}

.gl-chip--required {
    background: var(--gl-changes-bg);
    border-color: var(--gl-changes-line);
    color: #6E2F03;
}

.gl-chip--warning {
    background: var(--gl-changes-bg);
    border-color: var(--gl-changes-line);
    color: #6E2F03;
}

.gl-chip--danger {
    background: var(--gl-rejected-bg);
    border-color: var(--gl-rejected-line);
    color: #7A140B;
}

.gl-chip--muted {
    background: var(--gl-surface-soft);
    color: var(--gl-text-soft);
}

.dr-card .gl-card__body {
    min-width: 0;
}

.gl-intro__done--attention {
    color: #6E2F03;
    background: var(--gl-changes-bg);
    border-color: var(--gl-changes-line);
}

@media (max-width: 575.98px) {
    .dr-version .gl-btn {
        width: 100%;
        justify-content: center;
    }
    .dr-submit .gl-btn {
        width: 100%;
    }
}

/* ---- Long unbroken content ----
   A document name, an applicant email or a note can carry a long unbroken
   string. Without this it pushes the card wider than the viewport and the whole
   page scrolls sideways on a phone. */
.dr-card .gl-card__title,
.dr-card .gl-card__head,
.dr-card .gl-body,
.dr-card .gl-callout > div,
.dr-card .gl-rules,
.dr-card .gl-file__name,
.gl-chip,
.dr-admin-card h6,
.dr-admin-card p,
.dr-admin-card .text-muted,
.dr-admin-card a {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

/* =========================================================================
   The end of the application: one Save Draft, one Save & Review
   -------------------------------------------------------------------------
   Every section used to carry its own pair of save buttons. They are gone —
   answers save themselves as they are typed — and these are the only two
   decisions left, at the end of the Application Procedures page.
   ========================================================================= */
.gl-submit-panel {
    border-color: var(--ui-primary-soft-border);
}

.gl-help--saved {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 var(--ui-space-3);
}

.gl-missing-list__name {
    font-weight: var(--ui-fw-semibold);
}

.gl-application-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.gl-application-actions .gl-btn {
    flex: 0 1 auto;
}

@media (max-width: 36rem) {
    .gl-application-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .gl-application-actions .gl-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- "Saved automatically", in place of the removed Save button ---- */
.gl-autosave {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 16rem;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gl-text-soft);
}

.gl-autosave > i {
    color: var(--ui-primary-text);
    flex-shrink: 0;
}

/* ---- The consolidated review page ---- */
.gl-summary-list {
    margin: 0.75rem 0 0;
    display: grid;
    gap: 0.1rem;
}

.gl-summary-list__row {
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--gl-line);
}

.gl-summary-list__row:last-child {
    border-bottom: 0;
}

.gl-summary-list dt {
    font-weight: 600;
    color: var(--gl-text-soft);
    margin: 0;
}

.gl-summary-list dd {
    margin: 0;
    word-break: break-word;
}

@media (max-width: 48rem) {
    .gl-summary-list__row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.gl-file-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gl-file-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    word-break: break-word;
}

.gl-file-list__item > i {
    color: var(--gl-text-soft);
    flex-shrink: 0;
}

/* ---- One section of "Review and submit your application" ---- */
.gl-review-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-4);
}

.gl-review-section__head .gl-section-title {
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: var(--ui-space-2);
    min-width: 0;
    flex: 1 1 20rem;
}

.gl-review-section__number {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--ui-radius);
    background: var(--ui-gradient-primary);
    color: #FFF;
    font-size: var(--ui-fs-md);
}

.gl-review-section__edit {
    margin: var(--ui-space-4) 0 0;
}