/* =========================================================
   TUP Cavite — ID Request System
   Theme layer over Bootstrap 5. Loaded AFTER bootstrap.min.css.

   Idea: three materials, three jobs.
     paper      — the form you fill in. Flat, ruled, quiet.
     credential — the ID card. Raised, printed, the one loud thing.
     stub       — the receipt. Perforated, tearable, keep it.
   ========================================================= */

/* =========================================================
   1. Tokens
   ========================================================= */

:root {
    color-scheme: light;

    /* -- Surfaces: cool slate stack, not flat grey -- */
    --deck:         #dfe3e9;   /* the desk the paper sits on */
    --deck-edge:    #cbd2dc;
    --surface:      #ffffff;   /* paper */
    --surface-sunk: #f2f4f7;
    --surface-warm: #faf9f7;

    /* -- Ink -- */
    --ink:       #141a23;
    --ink-soft:  #4e5a6b;
    --ink-faint: #838e9d;
    --rule:      #d7dce3;
    --rule-soft: #e8ecf1;

    /* -- Institutional -- */
    --maroon:       #8c1d2f;
    --maroon-deep:  #63101e;
    --maroon-lift:  #a32c3f;
    --maroon-wash:  #fbf0f1;
    --brass:        #c08a2e;
    --brass-soft:   #e5cf9a;
    --brass-wash:   #fdf7e9;
    --cardinal:     #c8102e;   /* TUP wordmark red — brighter than the maroon accent, used only in the logo lockup */

    /* -- Semantic -- */
    --ok:          #12715a;
    --ok-wash:     #e9f6f1;
    --ok-edge:     #b4ddcd;
    --review:      #2f5673;
    --review-wash: #e9f0f5;
    --review-edge: #bfd2df;
    --warn:        #8a5700;
    --warn-wash:   #fdf5e6;
    --warn-edge:   #ebd4a2;
    --bad:         #a92318;
    --bad-wash:    #fdefee;
    --bad-edge:    #efc5c1;

    /* -- Type -- */
    --ui:      'Public Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --display: 'Archivo', 'Public Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --data:    'DM Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    /* Type scale — 1.22 minor third, capped so forms stay dense */
    --t-xs:   .75rem;
    --t-sm:   .825rem;
    --t-base: .95rem;
    --t-md:   1.06rem;
    --t-lg:   1.3rem;
    --t-xl:   1.62rem;

    /* -- Space -- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 22px;
    --s-6: 30px;
    --s-7: 44px;

    /* -- Shape: a ladder, not one value on everything -- */
    --r-xs: 3px;    /* inputs, chips — paper is barely rounded */
    --r-sm: 5px;
    --r-md: 8px;
    --r-lg: 12px;   /* the credential — the only properly round thing */

    /* -- Elevation: paper doesn't float, objects do -- */
    --lift-paper: 0 1px 0 rgba(20, 26, 35, .04);
    --lift-card:  0 2px 4px rgba(20, 26, 35, .08),
                  0 18px 38px -22px rgba(20, 26, 35, .55);
    --lift-pop:   0 24px 70px -28px rgba(20, 26, 35, .6);

    /* -- Motion -- */
    --ease: cubic-bezier(.2, .7, .3, 1);
    --fast: 120ms;
    --slow: 380ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --deck:         #0d1117;
        --deck-edge:    #000;
        --surface:      #161c25;
        --surface-sunk: #1d242f;
        --surface-warm: #1a212b;

        --ink:       #e8ecf2;
        --ink-soft:  #a4b0c0;
        --ink-faint: #7a8698;
        --rule:      #2b3442;
        --rule-soft: #222a36;

        --maroon:      #c23b52;
        --maroon-deep: #8c1d2f;
        --maroon-lift: #d2586c;
        --maroon-wash: #2a1620;
        --brass:       #d9a94e;
        --brass-soft:  #6b5322;
        --brass-wash:  #262013;
        --cardinal:    #e13a52;

        --ok:          #4cc39c;
        --ok-wash:     #12261f;
        --ok-edge:     #23533f;
        --review:      #7fb0d4;
        --review-wash: #14212b;
        --review-edge: #2c4557;
        --warn:        #d9a94e;
        --warn-wash:   #26200f;
        --warn-edge:   #574518;
        --bad:         #e8695c;
        --bad-wash:    #2b1512;
        --bad-edge:    #5d2722;

        --lift-paper: 0 1px 0 rgba(0, 0, 0, .3);
        --lift-card:  0 2px 6px rgba(0, 0, 0, .5),
                      0 20px 44px -22px rgba(0, 0, 0, .9);
        --lift-pop:   0 28px 80px -30px rgba(0, 0, 0, .95);
    }
}

/* =========================================================
   2. Base
   ========================================================= */

* { -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--ui);
    background-color: var(--deck);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.shell {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 20px;
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 20px;
    top: 12px;
    z-index: 60;
    background: var(--surface);
    color: var(--ink);
    padding: 10px 14px;
    border-radius: var(--r-sm);
    box-shadow: var(--lift-pop);
}

:focus-visible {
    outline: 2px solid var(--maroon);
    outline-offset: 2px;
    border-radius: 2px;
}

::selection {
    background: var(--maroon);
    color: #fff;
}

/* =========================================================
   3. Masthead
   ========================================================= */

.masthead {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(90% 120% at 82% -20%, rgba(140, 29, 47, .62) 0%, transparent 60%),
        linear-gradient(180deg, #19212c 0%, #0e141c 100%);
    color: #fff;
    /* Extra room at the foot: the first panel rides up over it (see .workspace), the way
       the cards do on the landing page. */
    padding: var(--s-6) 0 calc(var(--s-6) + 72px);
    overflow: hidden;
}

/* The fine crossed lines of the ID card, plus a warm glow, fading out from the right. */
.masthead::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(closest-side at 78% 42%, rgba(192, 138, 46, .22), transparent 70%),
        repeating-linear-gradient(62deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(-62deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 10px);
    -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%);
            mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%);
}

/* Brass rule at the foot — the one stripe the campus signage uses. */
.masthead::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brass) 0%, #8d6318 40%, var(--brass) 100%);
}

.masthead .shell { position: relative; }

/* Cross-page link (Track a request / New ID request), top right of the masthead */
.masthead__nav {
    position: absolute;
    top: 2px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: calc(100% - 40px);
}
/* Phones: two buttons no longer fit beside the logo, so stack them above it. */
@media (max-width: 640px) {
    .masthead__nav {
        position: static;
        justify-content: flex-start;
        max-width: none;
        margin-bottom: var(--s-4);
    }
}
.masthead__nav a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: var(--t-sm);
    font-weight: 500;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    transition: background .15s, border-color .15s;
}
.masthead__nav a:hover,
.masthead__nav a:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
}

/* Glowing header button: "Track a request" (green) on the request page and
   "New ID request" (orange) on the track page. A slow pulse so students find
   the other page. The colour is one --glow triplet, so both share the same
   keyframes. prefers-reduced-motion (section 20) stops the pulse and leaves the
   static glow. */
.masthead__nav a.nav-glow {
    --glow: 61, 220, 151;            /* green (default) */
    --glow-text: #eafff5;
    color: var(--glow-text);
    background: rgba(var(--glow), .14);
    border-color: rgba(var(--glow), .85);
    box-shadow:
        0 0 10px rgba(var(--glow), .5),
        0 0 22px rgba(var(--glow), .28),
        inset 0 0 8px rgba(var(--glow), .16);
    animation: nav-glow 2.4s ease-in-out infinite;
}
.masthead__nav a.nav-glow--orange {
    --glow: 255, 152, 48;
    --glow-text: #fff3e6;
}
.masthead__nav a.nav-glow:hover,
.masthead__nav a.nav-glow:focus-visible {
    background: rgba(var(--glow), .26);
    border-color: rgb(var(--glow));
}
@keyframes nav-glow {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(var(--glow), .4),
            0 0 16px rgba(var(--glow), .2),
            inset 0 0 6px rgba(var(--glow), .12);
    }
    50% {
        box-shadow:
            0 0 14px rgba(var(--glow), .8),
            0 0 32px rgba(var(--glow), .45),
            inset 0 0 10px rgba(var(--glow), .22);
    }
}

/* ---------- Brand lockup: seal + two-tone "TUP / CAVITE" wordmark ----------
   Reused, at different sizes, in the public masthead and the admin topbar. */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--s-4);
}

a.brand,
a.brand:hover { color: inherit; text-decoration: none; }
a.brand:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 4px; border-radius: 6px; }

.brand__seal {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.brand__word {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.brand__word b {
    font-family: var(--display);
    font-variation-settings: "wdth" 112;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
}
.brand__word small {
    display: block;
    margin-top: 4px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .17em;
    color: var(--cardinal);
}

.masthead__org {
    font-size: var(--t-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, .62);
    margin-bottom: var(--s-2);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}
.masthead__org::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--brass);
}

.masthead h1 {
    font-family: var(--display);
    font-variation-settings: "wdth" 114;
    font-size: clamp(2.1rem, 1.1rem + 3.6vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0 0 var(--s-3);
}
/* The last words of the title in gold, as on the landing page. */
.masthead h1 span {
    background: linear-gradient(90deg, #f6dc9b 0%, #d9a94e 55%, #c08a2e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}

.masthead p.lede {
    margin: 0;
    max-width: 54ch;
    color: rgba(255, 255, 255, .74);
    font-size: var(--t-base);
}

/* =========================================================
   4. Layout
   ========================================================= */

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
    gap: var(--s-6);
    align-items: start;
    position: relative;
    z-index: 2;
    margin-top: -64px;                       /* rides up over the masthead */
    padding-block: 0 var(--s-7);             /* block only: keeps .shell's side gutter */
}

.rail {
    position: sticky;
    top: var(--s-5);
    display: grid;
    gap: var(--s-5);
}

@media (max-width: 960px) {
    .workspace {
        grid-template-columns: minmax(0, 1fr);   /* plain 1fr can't shrink below its widest child */
        gap: var(--s-5);
        margin-top: -48px;
        padding-block: 0 var(--s-6);
    }
    .rail { position: static; }
    .rail--preview { order: -1; }
}

/* =========================================================
   5. Panels — paper. Flat, hairline, barely rounded.
   ========================================================= */

.panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-card);
    overflow: hidden;
}
/* The coloured top bar of the landing cards. The colour is the page's accent (--glow, see "Page accents"). */
.panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 1;
    height: 4px;
    background: rgb(var(--glow));
}

.panel__head {
    padding: calc(var(--s-4) + 4px) var(--s-5) var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    background: linear-gradient(180deg, var(--surface-warm), var(--surface));
}

.panel__head h2 {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

.panel__head p {
    margin: 2px 0 0;
    font-size: var(--t-sm);
    color: var(--ink-soft);
}

.panel__body {
    padding: var(--s-5);
}

/* Sections inside the sheet, divided like a ruled form */
.section + .section {
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--rule-soft);
}

.section__title {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.section__title h3 {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-size: var(--t-base);
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

/* The rule runs out from the heading to the edge of the sheet. */
.section__title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--rule-soft);
}

.section__title .hint {
    font-size: var(--t-xs);
    color: var(--ink-faint);
    order: 3;
    text-align: right;
    /* Wraps only when the row runs out of room. It used to be nowrap, which made
       the whole form column wider than a phone screen (a sideways scroll). */
}

.req-note {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--warn);
    background: var(--warn-wash);
    border: 1px solid var(--warn-edge);
    border-left: 3px solid var(--brass);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    padding: 10px var(--s-3);
    margin: 0 0 var(--s-4);
}
.req-note::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: 9px;
    border-radius: 50%;
    background: var(--brass);
}

/* =========================================================
   6. Form controls
   ========================================================= */

.form-label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--s-1);
    letter-spacing: -.005em;
}

.req {
    color: var(--maroon);
    font-weight: 700;
}

.form-control,
.form-select {
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--t-base);
    padding: .6rem .75rem;
    min-height: 46px;
    transition: border-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease),
                background-color var(--fast) var(--ease);
}

.form-control::placeholder { color: var(--ink-faint); }

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) { border-color: var(--ink-faint); }

.form-control:focus,
.form-select:focus {
    border-color: var(--maroon);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(140, 29, 47, .13);
    outline: none;
}

.form-control.is-invalid,
.form-control:user-invalid {
    border-color: var(--bad);
    background-image: none;
    padding-right: .75rem;
}
.form-control.is-invalid:focus,
.form-control:user-invalid:focus {
    box-shadow: 0 0 0 3px rgba(169, 35, 24, .14);
}

textarea.form-control { min-height: 76px; resize: vertical; }

.form-text {
    font-size: var(--t-xs);
    color: var(--ink-faint);
    margin-top: var(--s-1);
}

.field-error {
    display: none;
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--bad);
    margin-top: var(--s-1);
    padding-left: 14px;
    position: relative;
}
.field-error.show { display: block; }
.field-error.show::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bad);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
}

/* Live status while the person types their Student ID — distinct from
   field-error, since "you already have a request" isn't a bad value,
   it's information. Three quiet states: checking, found, clear. */
.field-note {
    display: none;
    align-items: flex-start;
    gap: 7px;
    margin-top: var(--s-2);
    padding: 8px 10px;
    border-radius: var(--r-xs);
    border: 1px solid transparent;
    border-left-width: 3px;
    font-size: var(--t-xs);
    line-height: 1.45;
}
.field-note.show { display: flex; }

.field-note__dot {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: 5px;
    border-radius: 50%;
    background: currentColor;
}

.field-note--checking {
    background: var(--surface-sunk);
    border-color: var(--rule);
    border-left-color: var(--ink-faint);
    color: var(--ink-soft);
}
.field-note--checking .field-note__dot {
    animation: note-pulse 1s ease-in-out infinite;
}
@keyframes note-pulse {
    50% { opacity: .3; }
}

.field-note--warn {
    background: var(--warn-wash);
    border-color: var(--warn-edge);
    border-left-color: var(--brass);
    color: var(--warn);
}

.field-note__action {
    display: block;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* Data, not decoration: ID numbers, tracking numbers, contact numbers. */
.mono {
    font-family: var(--data);
    font-variant-numeric: tabular-nums slashed-zero;
    font-size: .92em;
    letter-spacing: .01em;
}

/* =========================================================
   7. Radio groups (request type / status)
   ========================================================= */

.status-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.status-option { position: relative; }

.status-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.status-option label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    padding: 9px var(--s-4) 9px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    background: var(--surface);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all var(--fast) var(--ease);
}
.status-option label::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1px solid var(--ink-faint);
    background: var(--surface);
    transition: all var(--fast) var(--ease);
}
.status-option label:hover {
    border-color: var(--ink-faint);
    background: var(--surface-sunk);
}
.status-option input:checked + label {
    border-color: var(--maroon);
    background: var(--maroon-wash);
    color: var(--maroon);
    font-weight: 600;
}
.status-option input:checked + label::before {
    border-color: var(--maroon);
    background: var(--maroon);
    box-shadow: inset 0 0 0 2.5px var(--surface);
}
/* Dated history: the tracking card and the admin review window */
.timeline {
    list-style: none;
    margin: var(--s-4) 0 0;
    padding: 0 0 0 4px;
    border-left: 2px solid var(--rule);
    margin-left: 4px;
}
.timeline li {
    position: relative;
    padding: 0 0 var(--s-3) var(--s-4);
    font-size: var(--t-sm);
    color: var(--ink);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--ink-faint);
}
.timeline li:last-child::before {
    background: var(--maroon);
    border-color: var(--maroon);
}
.timeline__when {
    display: block;
    font-size: .8rem;
    color: var(--ink-faint);
}
.timeline__note {
    display: block;
    white-space: pre-line;
    font-size: .8rem;
    color: var(--ink-soft);
}

.status-option input:disabled + label {
    opacity: .45;
    cursor: not-allowed;
    background: var(--surface-sunk);
}
.status-option input:disabled + label:hover {
    border-color: var(--rule);
}
.status-option input:focus-visible + label {
    outline: 2px solid var(--maroon);
    outline-offset: 2px;
}

/* =========================================================
   8. Buttons
   ========================================================= */

.btn {
    border-radius: var(--r-xs);
    font-weight: 600;
    font-size: var(--t-base);
    min-height: 46px;
    padding-inline: var(--s-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    letter-spacing: -.005em;
    transition: transform var(--fast) var(--ease),
                background-color var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 34px; font-size: var(--t-xs); padding-inline: var(--s-3); }

.btn-brand {
    background: linear-gradient(180deg, var(--maroon-lift), var(--maroon));
    border: 1px solid var(--maroon-deep);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
                0 1px 2px rgba(99, 16, 30, .3);
}
.btn-brand:hover,
.btn-brand:focus {
    background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
    border-color: var(--maroon-deep);
    color: #fff;
}
.btn-brand:disabled {
    background: var(--maroon);
    border-color: var(--maroon);
    box-shadow: none;
    opacity: .55;
}

.btn-quiet {
    background: var(--surface);
    border: 1px solid var(--rule);
    color: var(--ink);
}
.btn-quiet:hover,
.btn-quiet:focus {
    background: var(--surface-sunk);
    border-color: var(--ink-faint);
    color: var(--ink);
}

.btn-link-quiet {
    background: none;
    border: none;
    color: var(--maroon);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    padding: 0;
    min-height: 0;
    font-size: var(--t-sm);
    font-weight: 500;
}
.btn-link-quiet:hover { color: var(--maroon-deep); }

.spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn-quiet .spinner {
    border-color: rgba(0, 0, 0, .18);
    border-top-color: var(--ink);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================
   9. Upload zones — a specimen frame, not a dashed box
   ========================================================= */

.drop {
    position: relative;
    display: block;
    border: 1px dashed var(--rule);
    border-radius: var(--r-sm);
    background: var(--surface-sunk);
    padding: var(--s-5) var(--s-4);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--fast) var(--ease),
                background-color var(--fast) var(--ease),
                box-shadow var(--fast) var(--ease);
}
.drop:hover {
    border-color: var(--ink-faint);
    background: var(--surface-warm);
}

.drop.is-over {
    border-color: var(--brass);
    border-style: solid;
    background: var(--brass-wash);
    box-shadow: 0 0 0 3px rgba(192, 138, 46, .18);
}

.drop.is-filled {
    border-style: solid;
    border-color: var(--ok-edge);
    background: var(--ok-wash);
    padding: var(--s-3);
    text-align: left;
}

.drop input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Each zone shows what it wants: a portrait frame, a signed line. */
.drop__prompt::before {
    content: "";
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto var(--s-2);
    background-color: var(--ink-faint);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
    transition: background-color var(--fast) var(--ease);
}

#photoDrop .drop__prompt::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='3.5' y='2.5' width='17' height='19' rx='2'/%3E%3Ccircle cx='12' cy='9.5' r='3.2'/%3E%3Cpath d='M6.6 19.2c1-2.6 3-4 5.4-4s4.4 1.4 5.4 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='3.5' y='2.5' width='17' height='19' rx='2'/%3E%3Ccircle cx='12' cy='9.5' r='3.2'/%3E%3Cpath d='M6.6 19.2c1-2.6 3-4 5.4-4s4.4 1.4 5.4 4'/%3E%3C/svg%3E");
}

#signatureDrop .drop__prompt::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 17.5c2.4 0 3-9 5.2-9 1.6 0 1.1 6.6 2.8 6.6 1.5 0 2-4.6 3.5-4.6 1.2 0 1.1 3.1 2.3 3.1 1 0 1.4-1.7 2.2-1.7'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M3 17.5c2.4 0 3-9 5.2-9 1.6 0 1.1 6.6 2.8 6.6 1.5 0 2-4.6 3.5-4.6 1.2 0 1.1 3.1 2.3 3.1 1 0 1.4-1.7 2.2-1.7'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
}

.drop:hover .drop__prompt::before,
.drop.is-over .drop__prompt::before { background-color: var(--maroon); }

.drop__prompt strong {
    display: block;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.drop__prompt span {
    font-size: var(--t-xs);
    color: var(--ink-faint);
}

.drop__file {
    display: none;
    align-items: center;
    gap: var(--s-3);
}
.drop.is-filled .drop__file { display: flex; }
.drop.is-filled .drop__prompt { display: none; }

.drop__thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: var(--r-xs);
    border: 1px solid var(--ok-edge);
    background: var(--surface);
}

.drop__meta {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

.drop__meta b {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--ok);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drop__meta span {
    font-size: var(--t-xs);
    color: var(--ink-soft);
}

.drop__clear {
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: var(--r-xs);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all var(--fast) var(--ease);
}
.drop__clear:hover {
    background: var(--surface);
    border-color: var(--bad-edge);
    color: var(--bad);
}

/* =========================================================
   10. The credential — the one raised, printed object
   ========================================================= */

.idcard {
    position: relative;
    width: 100%;
    max-width: 252px;
    margin-inline: auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    color: var(--ink);
    background:
        /* guilloche: fine crossed security lines, barely there */
        repeating-linear-gradient(62deg,
            rgba(140, 29, 47, .045) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(-62deg,
            rgba(20, 26, 35, .035) 0 1px, transparent 1px 7px),
        linear-gradient(168deg, #ffffff 0%, #f7f8fa 100%);
    border: 1px solid var(--rule);
    box-shadow: var(--lift-card);
}

/* Lanyard slot, punched through the top band. */
.idcard::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 6px;
    border-radius: 99px;
    background: rgba(0, 0, 0, .34);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45);
    z-index: 2;
}

/* A single slow sheen, like light passing over laminate. */
.idcard::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(104deg,
        transparent 38%,
        rgba(255, 255, 255, .5) 47%,
        transparent 56%);
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 3;
}
.idcard:hover::after {
    transform: translateX(120%);
    transition: transform 900ms var(--ease);
}

.idcard__band {
    position: relative;
    background:
        radial-gradient(110% 200% at 80% -60%, var(--maroon-lift), transparent 62%),
        var(--maroon);
    color: #fff;
    padding: 20px 14px 10px;
    border-bottom: 2px solid var(--brass);
    text-align: center;
}

.idcard__band b {
    display: block;
    font-family: var(--display);
    font-variation-settings: "wdth" 100;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.25;
}
.idcard__band span {
    font-size: .64rem;
    color: rgba(255, 255, 255, .72);
}

.idcard__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: var(--s-5) var(--s-4) var(--s-4);
    text-align: center;
}

.idcard__photo {
    position: relative;
    width: 132px;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    background: var(--surface-sunk) center/cover no-repeat;
    display: grid;
    place-items: center;
    font-size: var(--t-xs);
    color: var(--ink-faint);
    padding: 6px;
    overflow: hidden;
}

/* Crop guides — shows where the face should land. Gone once filled. */
.idcard__photo::before {
    content: "";
    position: absolute;
    inset: 22% 26% 12%;
    border: 1px dashed var(--rule);
    border-radius: 40% 40% 34% 34%;
    opacity: .8;
}
.idcard__photo.has-image {
    color: transparent;
    border-color: var(--ink-faint);
}
.idcard__photo.has-image::before { display: none; }
.idcard__photo.is-cropping { opacity: .65; transition: opacity .2s; }

.idcard__name {
    font-family: var(--display);
    font-variation-settings: "wdth" 104;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin: var(--s-1) 0 0;
    word-break: break-word;
}
.idcard__name.is-empty {
    color: var(--ink-faint);
    font-weight: 500;
}

.idcard__id {
    font-size: .8rem;
    color: var(--maroon);
    font-weight: 500;
    margin: 0;
}

.idcard__course {
    font-size: var(--t-xs);
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.3;
}
.idcard__course.is-empty { color: var(--ink-faint); }

.idcard__sig {
    width: 100%;
    margin-top: var(--s-2);
    padding-bottom: 3px;
    min-height: 40px;
    border-bottom: 1px solid var(--ink);
    background: bottom center / auto 32px no-repeat;
    font-size: var(--t-xs);
    color: var(--ink-faint);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.idcard__sig.has-image {
    color: transparent;
    background-size: auto 38px;
}

.idcard__qr {
    width: 58px;
    height: 58px;
    margin: var(--s-3) auto 0;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    background: #fff center / contain no-repeat;
    display: grid;
    place-items: center;
    padding: 4px;
    font-size: .6rem;
    font-weight: 600;
    color: var(--ink-faint);
}
.idcard__qr.has-image { color: transparent; }

.idcard__qr-caption {
    font-size: .64rem;
    color: var(--ink-faint);
    margin: var(--s-1) 0 0;
}

/* The card keeps its printed look in dark mode — real IDs are white. */
@media (prefers-color-scheme: dark) {
    .idcard {
        color: #141a23;
        border-color: #000;
    }
    .idcard .idcard__course,
    .idcard .idcard__sig,
    .idcard .idcard__qr,
    .idcard .idcard__qr-caption { color: #6b7686; }
    .idcard .idcard__photo.has-image,
    .idcard .idcard__sig.has-image,
    .idcard .idcard__qr.has-image { color: transparent; }
    .idcard .idcard__name.is-empty { color: #96a0ae; }
    .idcard .idcard__id { color: #8c1d2f; }
    .idcard .idcard__photo { background-color: #eef0f3; border-color: #ccd2da; }
    .idcard .idcard__sig { border-bottom-color: #141a23; }
}

/* Photo and signature guidance (sits above the upload boxes) */
.checklist {
    list-style: none;
    margin: var(--s-4) 0 0;
    padding: var(--s-3) 0 0;
    border-top: 1px solid var(--rule-soft);
    font-size: var(--t-xs);
    color: var(--ink-soft);
}
.checklist li {
    display: flex;
    gap: var(--s-2);
    padding: 3px 0;
    line-height: 1.45;
}
.checklist li::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--brass);
}
.checklist--guide {
    margin: 0;
    padding: 0;
    border-top: none;
    font-size: var(--t-sm);
}
.checklist--guide li::before { margin-top: 8px; }

/* Photo and signature guide (right rail on the request page) */
.guide { margin: 0 0 var(--s-5); }
.guide:last-child { margin-bottom: 0; }

.guide__frame {
    position: relative;
    margin-inline: auto;
    overflow: hidden;
    background: #ffffff;            /* stays paper-white in dark mode: it mimics the upload */
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
}
.guide__frame--photo { width: min(100%, 210px); aspect-ratio: 1 / 1; }
/* Employee ID photo: tall half-body portrait, same proportions as the saved file (966 x 1628) */
.guide__frame--portrait { width: min(100%, 190px); aspect-ratio: 966 / 1628; }
.drop__thumb--portrait { object-position: 50% 12%; }   /* small square thumbnail: show the face, not the chest */
.guide__frame--sig   { width: 100%; max-width: 300px; aspect-ratio: 8 / 3; }
.guide__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.guide__frame--sig img { object-fit: contain; padding: 6px; }

.guide__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(20, 26, 35, .78);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Photo examples come as a pair (male + female). Once the requester picks their own
   file only their preview is shown, so the second example steps aside. */
.guide__pair {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--s-3);
}
.guide__col { flex: 1 1 0; min-width: 0; max-width: 210px; text-align: center; }
.guide__pair--portrait .guide__col { max-width: 190px; }
.guide__col .guide__frame { width: 100%; }
.guide__tag {
    display: block;
    margin-top: var(--s-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.guide__pair.has-yours .guide__col--alt,
.guide__pair.has-yours .guide__tag { display: none; }
.guide__pair.has-yours .guide__col { flex: 0 1 210px; }
.guide__pair--portrait.has-yours .guide__col { flex: 0 1 190px; }

.guide__frame.is-yours { border-color: var(--ink-faint); }
.guide__frame.is-yours .guide__badge { background: var(--maroon-deep); }
.guide__frame.is-cropping img { opacity: .65; transition: opacity .2s; }

.guide figcaption {
    margin-top: var(--s-3);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.guide figcaption b {
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-weight: 600;
}

/* The guide is ~630px tall. On a short window a sticky rail would hide the
   signature example until the very end of the form, so let it scroll normally. */
@media (max-height: 720px) {
    .rail { position: static; }
}

/* Data Privacy Notice (templates/_consent.html) */
.consent-panel { max-width: 660px; }
.consent-body {
    max-height: min(56vh, 460px);
    overflow-y: auto;
    font-size: var(--t-sm);
    color: var(--ink-soft);
    line-height: 1.55;
}
.consent-body:focus-visible { outline: 2px solid var(--maroon); outline-offset: -2px; }
.consent-body h6 {
    margin: var(--s-4) 0 var(--s-1);
    font-size: var(--t-sm);
    font-weight: 700;
    color: var(--ink);
}
.consent-body > p:first-child + h6 { margin-top: var(--s-3); }
.consent-body ul { margin: 0 0 var(--s-2); padding-left: 1.15rem; }
.consent-body li { margin-bottom: 4px; }
.consent-body a { color: var(--maroon); }
.consent-foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
}
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--t-sm);
    color: var(--ink);
    cursor: pointer;
}
.consent-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--maroon); }
.consent-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s-2); }
.consent-actions[hidden] { display: none; }
@media (max-width: 480px) {
    .consent-actions { flex-direction: column-reverse; }
    .consent-actions .btn { width: 100%; }
}

/* Employee admin: extra details in the review modal */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin: 0 0 var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-sunk);
    border: 1px solid var(--rule-soft);
    border-radius: var(--r-xs);
    font-size: var(--t-sm);
}
.detail-grid span {
    display: block;
    color: var(--ink-faint);
    font-size: var(--t-xs);
}
.detail-grid b {
    display: block;
    font-weight: 600;
    word-break: break-word;
}
.detail-grid .is-wide { grid-column: 1 / -1; }

/* Track a request: its own page */
.track-page {
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin: -64px auto var(--s-7);
}

/* =========================================================
   11. Notices
   ========================================================= */

.notice {
    border-radius: var(--r-xs);
    padding: var(--s-3) var(--s-4);
    font-size: var(--t-sm);
    border: 1px solid transparent;
    border-left-width: 3px;
    margin-bottom: var(--s-5);
}
.notice[hidden] { display: none; }

.notice--bad  { background: var(--bad-wash);  border-color: var(--bad-edge);  border-left-color: var(--bad);  color: var(--bad); }
.notice--ok   { background: var(--ok-wash);   border-color: var(--ok-edge);   border-left-color: var(--ok);   color: var(--ok); }
.notice--warn { background: var(--warn-wash); border-color: var(--warn-edge); border-left-color: var(--brass); color: var(--warn); }

/* =========================================================
   12. Receipt — a stub you tear off and keep
   ========================================================= */

.receipt {
    position: relative;
    text-align: center;
    padding: var(--s-5) var(--s-4) var(--s-4);
    background:
        radial-gradient(circle at 0 0, transparent 9px, var(--surface-warm) 9px) top left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 0, transparent 9px, var(--surface-warm) 9px) top right / 51% 100% no-repeat;
    border: 1px solid var(--rule);
    border-top: none;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* Perforation across the top, where it was torn from the form. */
.receipt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: repeating-linear-gradient(90deg,
        var(--ink-faint) 0 4px, transparent 4px 9px);
    opacity: .5;
}

.receipt__seal {
    width: 54px;
    height: 54px;
    margin: 0 auto var(--s-3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 25px;
    color: var(--ok);
    background: var(--ok-wash);
    border: 2px solid var(--ok);
    animation: stamp var(--slow) var(--ease) both;
}
@keyframes stamp {
    from { transform: scale(1.5) rotate(-12deg); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.receipt h2 {
    font-family: var(--display);
    font-variation-settings: "wdth" 110;
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 var(--s-2);
}

.receipt p {
    font-size: var(--t-sm);
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 0 auto var(--s-4);
}

.ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding: var(--s-3) var(--s-4);
    background: var(--ink);
    border-radius: var(--r-sm);
    text-align: left;
}

.ticket__num {
    font-family: var(--data);
    font-size: clamp(1rem, 3.4vw, 1.22rem);
    font-weight: 500;
    letter-spacing: .01em;
    color: #fff;
    word-break: break-all;
}

.qr-block {
    margin-top: var(--s-4);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

.qr-block__title {
    font-family: var(--display);
    font-variation-settings: "wdth" 106;
    font-size: var(--t-sm);
    font-weight: 600;
    margin: 0 0 var(--s-3);
}

.qr-block__img {
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    padding: var(--s-2);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    image-rendering: pixelated;
}

.qr-block__label {
    font-size: var(--t-xs);
    color: var(--ink-soft);
    margin: var(--s-3) auto 0;
    max-width: 38ch;
}

.qr-block--pass {
    background: var(--brass-wash);
    border-color: var(--brass-soft);
}
.qr-block--pass .qr-block__label { color: var(--warn); }

.qr-block--track {
    margin-top: var(--s-4);
    background: var(--surface-sunk);
}

.next-steps {
    list-style: none;
    counter-reset: step;
    margin: var(--s-5) 0 0;
    padding: var(--s-4) 0 0;
    border-top: 1px solid var(--rule-soft);
    text-align: left;
}
.next-steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 var(--s-3) 32px;
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.next-steps li:last-child { padding-bottom: 0; }
.next-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--maroon-wash);
    border: 1px solid var(--maroon);
    color: var(--maroon);
    font-size: .7rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

/* =========================================================
   13. Tracking result
   ========================================================= */

.track-card {
    padding: var(--s-4);
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
}

.track-card__name {
    font-family: var(--display);
    font-variation-settings: "wdth" 106;
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0;
    line-height: 1.2;
}

.track-card__num {
    font-size: var(--t-xs);
    color: var(--ink-soft);
    margin: 3px 0 var(--s-3);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 99px;
    border: 1px solid transparent;
    font-size: var(--t-xs);
    font-weight: 600;
}
.pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.pill--ok     { background: var(--ok-wash);     border-color: var(--ok-edge);     color: var(--ok); }
.pill--review { background: var(--review-wash); border-color: var(--review-edge); color: var(--review); }
.pill--warn   { background: var(--warn-wash);   border-color: var(--warn-edge);   color: var(--warn); }
.pill--bad    { background: var(--bad-wash);    border-color: var(--bad-edge);    color: var(--bad); }

/* Progress — a real sequence, so it gets a real spine */
.steps {
    list-style: none;
    margin: var(--s-4) 0 0;
    padding: 0;
}
.steps li {
    position: relative;
    padding: 0 0 var(--s-4) 28px;
    font-size: var(--t-sm);
    color: var(--ink-faint);
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--rule);
    background: var(--surface);
    z-index: 1;
}
.steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 17px;
    bottom: 2px;
    width: 2px;
    background: var(--rule);
}
.steps li.done { color: var(--ink-soft); }
.steps li.done::before { border-color: var(--ok); background: var(--ok); }
.steps li.done:not(:last-child)::after { background: var(--ok); }
.steps li.current {
    color: var(--ink);
    font-weight: 600;
}
.steps li.current::before {
    border-color: var(--maroon);
    background: var(--maroon);
    box-shadow: 0 0 0 4px rgba(140, 29, 47, .15);
}
.steps li.halted {
    color: var(--bad);
    font-weight: 600;
}
.steps li.halted::before { border-color: var(--bad); background: var(--bad); }

.remarks {
    margin: var(--s-3) 0 0;
    padding: var(--s-3);
    border-left: 3px solid var(--maroon);
    background: var(--maroon-wash);
    font-size: var(--t-sm);
    color: var(--ink);
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    white-space: pre-line;          /* a remark built from ticked reasons has line breaks */
}

/* =========================================================
   14. Admin — top bar
   ========================================================= */

.topbar {
    position: relative;
    isolation: isolate;
    z-index: 50;                 /* the menu drops over the page below */
    background:
        radial-gradient(90% 260% at 82% -60%, rgba(140, 29, 47, .55) 0%, transparent 60%),
        linear-gradient(180deg, #19212c 0%, #0e141c 100%);
    color: #fff;
    padding: var(--s-3) 0;
}
.topbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(62deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(-62deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 10px);
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
            mask-image: linear-gradient(90deg, transparent 20%, #000 100%);
}
.topbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brass) 0%, #8d6318 40%, var(--brass) 100%);
}

.topbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* Smaller seal + wordmark for the topbar than the public masthead. */
.topbar__brand .brand__seal { width: 32px; height: 32px; }
.topbar__brand .brand__word b { font-size: .92rem; }
.topbar__brand .brand__word small { font-size: .54rem; margin-top: 2px; }

.topbar__sep {
    flex: 0 0 auto;
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, .18);
}

.topbar__system {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-weight: 600;
    letter-spacing: -.01em;
    min-width: 0;
}
.topbar__system b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar__system span {
    font-family: var(--ui);
    font-weight: 400;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, .6);
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, .72);
}
.topbar .btn-quiet {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}
.topbar .btn-quiet:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .34);
    color: #fff;
}

/* =========================================================
   15. Admin — sign in
   ========================================================= */

.admin-auth {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: start center;
    margin-top: -64px;
    padding: 0 20px var(--s-7);
}
.admin-auth .panel {
    width: 100%;
    max-width: 380px;
}
.admin-auth .panel__head { text-align: center; }

/* =========================================================
   16. Admin — stat tiles
   ========================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--s-3);
    padding: var(--s-5) 0 0;
}

.stat-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.stat {
    --tone: var(--rule);
    position: relative;
    overflow: hidden;
    padding: calc(var(--s-3) + 4px) var(--s-4) var(--s-3);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
    box-shadow: var(--lift-paper);
    transition: all var(--fast) var(--ease);
}
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.stat-btn:hover .stat {
    border-color: var(--ink-faint);
    box-shadow: var(--lift-card);
    transform: translateY(-2px);
}

.stat__value {
    display: block;
    font-family: var(--display);
    font-variation-settings: "wdth" 112;
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat__label {
    display: block;
    font-size: var(--t-xs);
    color: var(--ink-soft);
}

.stat--pending  { --tone: var(--brass); }
.stat--review   { --tone: var(--review); }
.stat--approved { --tone: var(--ok); }
.stat--rejected { --tone: var(--bad); }
.stat--claimed  { --tone: var(--ink-soft); }
.stat--printed  { --tone: var(--maroon); }

.stat.is-active {
    background: var(--maroon-wash);
    border-color: var(--maroon);
    box-shadow: inset 0 0 0 1px var(--maroon);
}
.stat-btn:focus-visible .stat {
    outline: 2px solid var(--maroon);
    outline-offset: 2px;
}

/* =========================================================
   17. Admin — toolbar + table
   ========================================================= */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
}
.toolbar__search { flex: 1 1 260px; max-width: 360px; }
.toolbar__filters { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.table {
    vertical-align: middle;
    font-size: var(--t-sm);
    margin-bottom: 0;
    --bs-table-bg: transparent;
}
.table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
    font-weight: 600;
    font-size: var(--t-xs);
    color: var(--ink-soft);
    background: var(--surface-sunk);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
    padding: 10px var(--s-3);
}
.table > tbody > tr > td {
    border-color: var(--rule-soft);
    color: var(--ink);
    padding: 10px var(--s-3);
}
.table-hover > tbody > tr:hover > td {
    background: var(--maroon-wash);
}

/* Stacked cells: name over course over tracking number. */
.table td > span { display: block; }

.cell-primary {
    font-weight: 600;
    color: var(--ink);
    line-height: 1.25;
}
.cell-sub {
    font-size: var(--t-xs);
    color: var(--ink-faint);
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cell-tracking {
    font-family: var(--data);
    font-size: var(--t-xs);
    color: var(--ink-soft);
    white-space: nowrap;
}

/* Rejected rows stay visible in the scan — they need action. */
.row-flagged > td {
    background: var(--maroon-wash) !important;
    box-shadow: inset 3px 0 0 var(--maroon);
}
.row-flagged > td:not(:first-child) { box-shadow: none; }

.table-state {
    padding: var(--s-7) 20px;
    text-align: center;
    color: var(--ink-faint);
    font-size: var(--t-sm);
}

.cursor-pointer { cursor: pointer; }

.avatar-btn {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--r-xs);
    line-height: 0;
}
.avatar-btn:hover { opacity: .82; }

.avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--r-xs);
    border: 1px solid var(--rule);
    background: var(--surface-sunk);
}
.avatar--portrait { width: 34px; height: 57px; object-position: 50% 10%; }
.avatar--wide {
    width: 62px;
    height: 34px;
    object-fit: contain;
    background: var(--surface);
    padding: 2px;
}
.qr-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--r-xs);
    border: 1px solid var(--rule);
    background: #fff center / contain no-repeat;
}

/* =========================================================
   18. Admin — modal + lightbox
   ========================================================= */

.modal-veil {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--s-5) var(--s-4);
    overflow-y: auto;
    background: rgba(10, 14, 20, .58);
    backdrop-filter: blur(3px);
}
.modal-veil.is-open { display: flex; }

.modal-panel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 480px;
    margin: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-pop);
    animation: rise var(--slow) var(--ease) both;
}
@keyframes rise {
    from { transform: translateY(12px) scale(.985); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.modal-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: rgb(var(--glow)); z-index: 1; }

.modal-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--rule-soft);
    background: linear-gradient(180deg, var(--surface-warm), var(--surface));
}

.modal-panel__title {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

.modal-panel__close {
    border: none;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
    padding: 0 4px;
    border-radius: var(--r-xs);
}
.modal-panel__close:hover { color: var(--ink); }

.modal-panel__body { padding: var(--s-5); }

.modal-panel__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--rule-soft);
    background: var(--surface-sunk);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s-6);
    background: rgba(8, 11, 16, .9);
}
.lightbox.is-open { display: flex; }
.lightbox img {
    max-width: min(92vw, 720px);
    max-height: 86vh;
    border-radius: var(--r-sm);
    background: #fff;
    box-shadow: var(--lift-pop);
}
.lightbox__close {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, .2); }

/* =========================================================
   19. Mobile
   ========================================================= */

@media (max-width: 640px) {
    body { font-size: 15px; }

    .shell { padding-inline: 16px; }

    .brand { gap: 10px; margin-bottom: var(--s-3); }
    .brand__seal { width: 36px; height: 36px; }
    .brand__word b { font-size: 1rem; }
    .brand__word small { font-size: .58rem; }

    /* The system name competes with the logout button for space —
       drop it first and lean on the seal + wordmark for identity. */
    .topbar__sep,
    .topbar__system span { display: none; }
    .topbar__system b { font-size: .82rem; }
    .masthead { padding: var(--s-5) 0 calc(var(--s-4) + 64px); }   /* keeps room for the panel that rides up over it */
    .panel__body { padding: var(--s-4); }
    .panel__head { padding: calc(var(--s-3) + 4px) var(--s-4) var(--s-3); }

    .section + .section {
        margin-top: var(--s-5);
        padding-top: var(--s-5);
    }

    /* The preview card keeps its normal centred 252px size on phones now
       that the photo tips live in the form section instead of beside it. */

    .ticket { flex-direction: column; align-items: stretch; }
    .ticket__num { text-align: center; }

    .stats { grid-template-columns: repeat(2, 1fr); }
    .toolbar__search { max-width: none; }
    .modal-veil { padding: 0; }
    .modal-panel {
        max-width: none;
        min-height: 100%;
        border: none;
        border-radius: 0;
    }
}

/* =========================================================
   20. Motion preferences
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .idcard:hover::after { transform: translateX(-120%); }
}

/* =========================================================
   21. Print — students print the receipt and the QR pass
   ========================================================= */

@media print {
    :root {
        --deck: #fff;
        --surface: #fff;
        --surface-sunk: #fff;
        --surface-warm: #fff;
        --ink: #000;
        --ink-soft: #333;
        --rule: #999;
    }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .no-print,
    .masthead,
    .topbar,
    .rail,
    .toolbar,
    .skip-link,
    .modal-veil,
    .lightbox { display: none !important; }

    .workspace {
        display: block;
        padding: 0;
    }

    .panel {
        border: none;
        box-shadow: none;
    }
    .panel__head { display: none; }
    .panel__body { padding: 0; }

    .receipt {
        border: 1px solid #000;
        border-radius: 0;
        background: #fff;
        padding: 16pt;
        page-break-inside: avoid;
    }
    .receipt::before { opacity: 1; }
    .receipt__seal { animation: none; }

    .ticket {
        background: #fff;
        border: 1px solid #000;
        border-radius: 0;
    }
    .ticket__num { color: #000; }

    .qr-block {
        border: 1px solid #000;
        background: #fff;
        page-break-inside: avoid;
    }
    .qr-block__img {
        width: 165px;
        height: 165px;
        border: none;
    }

    .next-steps li::before {
        background: #fff;
        color: #000;
        border-color: #000;
    }
}

/* =========================================================
   Landing page (templates/landing.html)
   Reuses the tokens above. Student = maroon, Employee = orange,
   Track = green (same colours as the glowing header buttons).
   ========================================================= */

.lp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    padding: var(--s-5) 0 calc(var(--s-7) + 96px);
    background:
        radial-gradient(90% 120% at 82% -20%, rgba(140, 29, 47, .62) 0%, transparent 60%),
        linear-gradient(180deg, #19212c 0%, #0e141c 100%);
}
.lp-hero::after {                                   /* the brass rule the masthead has */
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brass) 0%, #8d6318 40%, var(--brass) 100%);
}
.lp-hero__bg {
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        repeating-linear-gradient(62deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(-62deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 10px);
    -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%);
            mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 75%);
}
.lp-hero__bg::after {                               /* slow drifting glow */
    content: "";
    position: absolute;
    width: 46%;
    aspect-ratio: 1;
    right: 8%;
    top: 12%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(192, 138, 46, .28), transparent);
    filter: blur(20px);
    animation: lp-drift 14s ease-in-out infinite alternate;
}
@keyframes lp-drift {
    from { transform: translate(-6%, -4%) scale(.95); }
    to   { transform: translate(6%, 8%) scale(1.08); }
}

.lp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
}
.lp-brand { margin: 0; }

/* Admin sign-in: glows cardinal red (the TUP wordmark red, --cardinal #c8102e) with the
   same pulse as the header buttons. The hero is always dark, so the triplet is fixed
   here instead of following --cardinal's lighter dark-mode value. */
.lp-admin {
    --glow: 200, 16, 46;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(var(--glow), .24);
    border: 1px solid rgba(var(--glow), .95);
    border-radius: 999px;
    cursor: pointer;
    box-shadow:
        0 0 10px rgba(var(--glow), .55),
        0 0 22px rgba(var(--glow), .3),
        inset 0 0 8px rgba(var(--glow), .18);
    animation: nav-glow 2.4s ease-in-out infinite;      /* keyframes: header buttons */
    transition: background .15s, border-color .15s, transform .15s;
}
.lp-admin:hover,
.lp-admin:focus-visible { background: rgba(var(--glow), .42); border-color: rgb(var(--glow)); color: #fff; transform: translateY(-1px); }
.lp-admin svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.lp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: var(--s-6);
}

.lp-title {
    font-family: var(--display);
    font-variation-settings: "wdth" 114;
    font-size: clamp(2.5rem, 1.2rem + 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: .98;
    margin: 0 0 var(--s-4);
}
.lp-title span {
    display: block;
    background: linear-gradient(90deg, #f6dc9b 0%, #d9a94e 55%, #c08a2e 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
}
.lp-lede {
    max-width: 46ch;
    margin: 0 0 var(--s-5);
    font-size: 1.06rem;
    color: rgba(255, 255, 255, .78);
}
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.lp-cta .btn { min-height: 50px; padding-inline: var(--s-5); }
.lp-cta__main svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-btn-ghost {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .34);
}
.lp-btn-ghost:hover,
.lp-btn-ghost:focus { color: #fff; background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .65); }

/* ---- fanned sample IDs (decoration only) ---- */
.lp-art { position: relative; height: 340px; }
.lp-idcard {
    position: absolute;
    width: 210px;
    aspect-ratio: .64;
    border-radius: var(--r-lg);
    overflow: hidden;
    color: var(--ink);
    background: linear-gradient(168deg, #ffffff 0%, #eef1f5 100%);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.lp-idcard--student  { left: 8%;  top: 14px; --tilt: -7deg; transform: rotate(-7deg); animation: lp-float 6s ease-in-out infinite alternate; }
.lp-idcard--employee { right: 2%; top: 46px; --tilt: 6deg;  transform: rotate(6deg);  animation: lp-float 7s ease-in-out -2s infinite alternate; }
@keyframes lp-float {
    from { transform: translateY(0) rotate(var(--tilt)); }
    to   { transform: translateY(-12px) rotate(var(--tilt)); }
}
.lp-idcard__band {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 12px 14px 9px;
    color: #fff;
    background: linear-gradient(135deg, var(--maroon-lift), var(--maroon-deep));
}
.lp-idcard--employee .lp-idcard__band { background: linear-gradient(135deg, #e0a03a, #a86a12); }
.lp-idcard__band b { font-family: var(--display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.lp-idcard__band span { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.lp-idcard__body { display: grid; justify-items: center; gap: 9px; padding: 14px 14px 12px; }
.lp-idcard__photo {
    width: 84px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    background: #dfe4ea;
}
.lp-idcard__photo svg { display: block; width: 100%; height: 100%; fill: #a9b3c0; }
.lp-idcard__body i { display: block; height: 7px; border-radius: 4px; background: #d3d9e1; }
.lp-idcard__qr { width: 62px; margin-top: 4px; padding: 4px; background: #fff; border: 1px solid #d3d9e1; border-radius: 4px; }
.lp-idcard__qr svg { display: block; width: 100%; height: auto; fill: #141a23; }
.lp-idcard__stamp {
    position: absolute;
    right: -26px;
    bottom: 26px;
    padding: 2px 34px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .22em;
    color: rgba(20, 26, 35, .5);
    border: 1px solid rgba(20, 26, 35, .28);
    background: rgba(255, 255, 255, .55);
    transform: rotate(-32deg);
}

/* ---- the three doors ---- */
.lp-main { position: relative; z-index: 2; margin-top: -104px; padding-bottom: var(--s-7); }
.lp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }

.lp-card {
    --glow: 140, 29, 47;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-6) var(--s-5) var(--s-5);
    overflow: hidden;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--lift-card);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.lp-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: rgb(var(--glow)); }
.lp-card:hover,
.lp-card:focus-visible {
    color: var(--ink);
    transform: translateY(-6px);
    border-color: rgba(var(--glow), .65);
    box-shadow: 0 0 0 1px rgba(var(--glow), .35), 0 26px 50px -22px rgba(var(--glow), .6);
}
.lp-card:focus-visible { outline: 2px solid rgb(var(--glow)); outline-offset: 3px; }
.lp-card--employee { --glow: 235, 140, 30; }
.lp-card--track    { --glow: 18, 170, 116; animation: nav-glow 2.4s ease-in-out infinite; }   /* keyframes: header button */

.lp-card__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: var(--s-2);
    color: rgb(var(--glow));
    background: rgba(var(--glow), .12);
    border-radius: 14px;
    transition: transform .25s var(--ease), background .25s var(--ease);
}
.lp-card:hover .lp-card__icon { transform: scale(1.08) rotate(-4deg); background: rgba(var(--glow), .2); }
.lp-card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-card__tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.lp-card h3 {
    margin: 0;
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -.02em;
}
.lp-card p { margin: 0 0 var(--s-3); color: var(--ink-soft); font-size: var(--t-base); }
.lp-card__go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-weight: 700;
    color: rgb(var(--glow));
}
.lp-card__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.lp-card:hover .lp-card__go svg { transform: translateX(6px); }

/* ---- forgot tracking number ---- */
.lp-forgot {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-5);
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--brass);
    border-radius: var(--r-md);
    box-shadow: var(--lift-paper);
}
.lp-forgot__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--brass);
    background: var(--brass-wash);
    border-radius: 12px;
}
.lp-forgot__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-forgot__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-forgot__text b { font-size: var(--t-md); }
.lp-forgot__text span { color: var(--ink-soft); font-size: var(--t-sm); }
.lp-forgot__btn { flex: 0 0 auto; white-space: nowrap; }

/* ---- how it works ---- */
.lp-steps { margin-top: var(--s-7); }
.lp-steps__title {
    margin: 0 0 var(--s-5);
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-size: var(--t-lg);
    font-weight: 700;
    letter-spacing: -.01em;
}
.lp-steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.lp-steps__list li { position: relative; padding-top: var(--s-4); border-top: 2px solid var(--rule); }
.lp-steps__list li::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 2px; background: var(--maroon); }
.lp-steps__n { display: block; margin-bottom: var(--s-2); font-family: var(--data); font-size: var(--t-sm); font-weight: 500; letter-spacing: .1em; color: var(--maroon); }
.lp-steps__list h3 { margin: 0 0 4px; font-size: var(--t-md); font-weight: 700; }
.lp-steps__list p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); }

.lp-footer { padding: var(--s-5) 0 var(--s-6); text-align: center; color: var(--ink-faint); font-size: var(--t-xs); border-top: 1px solid var(--rule-soft); }
.lp-footer p { margin: 0 0 2px; }

/* ---- admin sign-in modal: password reveal ---- */
.lp-pass { position: relative; }
.lp-pass .form-control { padding-right: 4.6rem; }
.lp-pass__toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 4px 10px;
    font: inherit;
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--maroon);
    background: none;
    border: none;
    border-radius: var(--r-xs);
    cursor: pointer;
}
.lp-pass__toggle:hover { background: var(--maroon-wash); }

.recover-number {
    margin: var(--s-3) 0 var(--s-1);
    font-family: var(--data);
    font-size: 1.15rem;
    font-weight: 500;
    word-break: break-all;
}

@media (max-width: 960px) {
    .lp-hero__grid { grid-template-columns: 1fr; }
    .lp-art { height: 300px; max-width: 460px; margin-inline: auto; width: 100%; }
    .lp-grid { grid-template-columns: 1fr; }
    .lp-steps__list { grid-template-columns: 1fr; }
    .lp-main { margin-top: -84px; }
}
@media (max-width: 640px) {
    .lp-admin { min-height: 44px; }                 /* comfortable touch target */
    .lp-hero { padding-bottom: calc(var(--s-6) + 84px); }
    .lp-art { display: none; }
    .lp-top { margin-bottom: var(--s-5); }
    .lp-forgot { flex-direction: column; align-items: stretch; text-align: left; }
    .lp-forgot__btn { width: 100%; }
}

/* =========================================================
   Page accents
   One colour per page, used by the panel and modal top bars. The colours are the
   ones the landing page gives its doors: Student = maroon, Employee = orange,
   Track = green, Recover = brass, landing / admin sign-in = cardinal.
   Set with a class on <body>; the default (no class) is the student maroon.
   ========================================================= */
body                 { --glow: 140, 29, 47; }
body.page--employee  { --glow: 235, 140, 30; }
body.page--track     { --glow: 18, 170, 116; }
body.page--recover   { --glow: 192, 138, 46; }
body.landing         { --glow: 200, 16, 46; }
@media (prefers-color-scheme: dark) {
    body { --glow: 194, 59, 82; }               /* the maroon is too dim on dark surfaces */
    body.page--employee  { --glow: 235, 140, 30; }
    body.page--track     { --glow: 18, 170, 116; }
    body.page--recover   { --glow: 192, 138, 46; }
    body.landing         { --glow: 200, 16, 46; }
}

/* =========================================================
   Polish that goes with the landing-page look
   ========================================================= */

/* The logo gets its own row above the "Office of the Information Technology" line, as on the landing page. */
.masthead a.brand { display: flex; width: fit-content; margin-bottom: var(--s-6); }

/* Links inside panels: brand maroon, not the default blue. */
.form-text a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.form-text a:hover { color: var(--maroon-deep); }

/* Admin */
.stats { margin-bottom: var(--s-4); }
.toolbar__search { max-width: 460px; }             /* the employee placeholder is longer */
.toolbar__filters .form-select { width: auto; min-width: 170px; }
.topbar__row > .d-flex { gap: var(--s-3); }


/* =========================================================
   Admin top bar: dropdown menu
   ========================================================= */

.navmenu { position: relative; flex: 0 0 auto; }

.navmenu__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px 5px 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-family: var(--ui);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.navmenu__btn:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .34); }
.navmenu__btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(var(--glow), .75);
    box-shadow: 0 0 0 3px rgba(var(--glow), .22), 0 0 18px rgba(var(--glow), .3);
}
.navmenu__btn:focus-visible { outline: 2px solid var(--brass-soft); outline-offset: 2px; }

.navmenu__avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--maroon-lift), var(--maroon-deep));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    font-family: var(--display);
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
}
.navmenu__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navmenu__chev { flex: 0 0 auto; opacity: .75; transition: transform 180ms var(--ease); }
.navmenu__btn[aria-expanded="true"] .navmenu__chev { transform: rotate(180deg); }

.navmenu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    z-index: 60;
    width: 292px;
    max-width: calc(100vw - 32px);
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background:
        radial-gradient(120% 90% at 100% -10%, rgba(var(--glow), .16) 0%, transparent 55%),
        linear-gradient(180deg, #1a222e 0%, #111822 100%);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .5), 0 2px 0 rgba(255, 255, 255, .04) inset;
    color: #fff;
    transform-origin: 90% 0;
    animation: navmenu-in 170ms var(--ease);
}
.navmenu__panel[hidden] { display: none; }
.navmenu__panel::before {              /* the little pointer up to the button */
    content: "";
    position: absolute;
    top: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: #1a222e;
    border-left: 1px solid rgba(255, 255, 255, .12);
    border-top: 1px solid rgba(255, 255, 255, .12);
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}
@keyframes navmenu-in {
    from { opacity: 0; transform: translateY(-8px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.navmenu__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.navmenu__head b { font-family: var(--display); font-size: .95rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.navmenu__head span { font-size: var(--t-xs); color: rgba(255, 255, 255, .55); }

.navmenu__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, .88);
    font-family: var(--ui);
    font-size: var(--t-base);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.navmenu__item svg { flex: 0 0 auto; opacity: .8; }
.navmenu__item small { display: block; margin-top: 1px; font-size: var(--t-xs); font-weight: 400; color: rgba(255, 255, 255, .5); }
.navmenu__item:hover,
.navmenu__item:focus-visible {
    background: rgba(255, 255, 255, .09);
    color: #fff;
    outline: none;
    transform: translateX(2px);
}
.navmenu__item:hover svg,
.navmenu__item:focus-visible svg { opacity: 1; }
.navmenu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--brass-soft); }

.navmenu__item.is-current { color: #fff; background: rgba(var(--glow), .16); }
.navmenu__item.is-current::after {
    content: "Current";
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--glow), .3);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.navmenu__sep { height: 1px; margin: 6px 6px; background: rgba(255, 255, 255, .1); }

.navmenu__item--danger { color: #ff9aa8; }
.navmenu__item--danger:hover,
.navmenu__item--danger:focus-visible { background: rgba(255, 90, 110, .16); color: #ffc2cb; }

@media (max-width: 640px) {
    .navmenu__name,
    .navmenu__btn > .navmenu__chev { display: none; }   /* phones: just the round avatar */
    .navmenu__btn { padding: 4px; }
    .navmenu__panel { width: min(300px, calc(100vw - 32px)); }
}

@media (prefers-reduced-motion: reduce) {
    .navmenu__panel { animation: none; }
    .navmenu__chev, .navmenu__item, .navmenu__btn { transition: none; }
}


/* =========================================================
   Admin tables: pagination
   ========================================================= */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3) var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--rule-soft);
    background: var(--surface-warm);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.pager[hidden] { display: none; }

.pager__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-4);
}
.pager__range { color: var(--ink); font-weight: 500; }
.pager__size {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    font-weight: 400;
}
.pager__size .form-select { width: auto; min-width: 64px; }

.pager__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.pager__btn {
    min-width: 36px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r-xs);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--ui);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pager__btn--num { padding: 0 8px; }
.pager__btn:hover:not(:disabled):not(.is-current) {
    background: var(--surface-sunk);
    border-color: var(--ink-faint);
}
.pager__btn:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.pager__btn.is-current {
    background: var(--maroon-wash);
    border-color: var(--maroon);
    color: var(--maroon);
    font-weight: 700;
    cursor: default;
}
.pager__btn:disabled { opacity: .45; cursor: not-allowed; }
.pager__gap { padding: 0 2px; color: var(--ink-faint); user-select: none; }

@media (max-width: 640px) {
    .pager { padding: var(--s-3); justify-content: center; }
    .pager__info { justify-content: center; width: 100%; }
    .pager__nav { justify-content: center; width: 100%; }
    .pager__btn { min-width: 34px; padding: 0 9px; }
}

@media print { .pager { display: none; } }

/* =========================================================
   Admin review window: ready-made rejection reasons
   ========================================================= */

.reasons {
    margin-bottom: var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: var(--surface);
}
.reasons[hidden] { display: none; }
.reasons__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--surface-warm);
    font-size: var(--t-sm);
}
.reasons__count { margin-left: auto; color: var(--ink-soft); }
.reasons__scroll {
    max-height: 260px;
    overflow-y: auto;
    padding: var(--s-2) var(--s-3) var(--s-3);
}
.reasons__scroll:focus-visible { outline: 2px solid var(--maroon); outline-offset: -2px; }
.reasons__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.reasons__set + .reasons__set { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px dashed var(--rule); }
.reasons__set legend {
    float: none;
    width: auto;
    margin: 0 0 var(--s-1);
    padding: 0;
    font-family: var(--display);
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--maroon);
}
.reasons__grouptitle {
    margin: var(--s-2) 0 2px;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.reasons__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: 0;
    padding: 4px 6px;
    border-radius: var(--r-xs);
    font-size: var(--t-sm);
    font-weight: 400;
    cursor: pointer;
}
.reasons__item:hover { background: var(--surface-sunk); }
.reasons__item input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--maroon); }
.reasons__item:has(input:checked) { background: var(--maroon-wash); color: var(--maroon); font-weight: 600; }
.reasons__preview {
    padding: var(--s-2) var(--s-3) var(--s-3);
    border-top: 1px solid var(--rule-soft);
    font-size: var(--t-sm);
}
.reasons__preview[hidden] { display: none; }
.reasons__preview span { display: block; margin-bottom: 4px; color: var(--ink-faint); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.reasons__preview pre {
    margin: 0;
    padding: var(--s-2) var(--s-3);
    border-left: 3px solid var(--maroon);
    background: var(--maroon-wash);
    color: var(--ink);
    font: inherit;
    white-space: pre-wrap;
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* "ID printed" checkbox on Approved rows: bigger and darker than the default so it is easy to see and click */
.print-box {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    border: 2px solid var(--ink-soft);
    cursor: pointer;
}
.print-box:checked { background-color: var(--maroon); border-color: var(--maroon); }
.print-box:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; box-shadow: none; }
.print-box:disabled { cursor: not-allowed; opacity: .6; }