/* ==============================================================
   Student Auth — HEPIQ Student Portal (Iraqi Central Admission).

   Design language: HEPIQ tri-tone (wine + teal + navy) on parchment,
   anchored on the platform logo. Hexagonal motif throughout (card tab,
   status badges, background pattern) — pulled from the logo's hex cube.

   Centered "stage" composition — same shape on mobile and desktop,
   scaled up. No split-screen.

   Standalone — no dependency on the admin layout/sidebar.
   Preserves every load-bearing class/ID consumed by login.js and
   channel_tarshih.js (.is-invalid, .d-none, all #stauth* IDs).
   ============================================================== */

/* ---------- Tokens ---------- */
:root {
    /* HEPIQ tri-tone (sampled from logo PNG) */
    --st-wine: #981c4b;
    --st-wine-deep: #7a1640;
    --st-wine-soft: rgba(152, 28, 75, 0.10);
    --st-teal: #3a8fa3;
    --st-teal-deep: #266a7a;
    --st-teal-soft: rgba(58, 143, 163, 0.10);
    --st-navy: #2a3d56;
    --st-navy-deep: #1f2d40;
    --st-cream: #f5e8d6;

    /* Surfaces */
    --st-parchment: #f6f1e7;
    --st-parchment-soft: #ede5d2;
    --st-card: #ffffff;
    --st-border: #e6dcc6;
    --st-border-soft: #efe7d3;

    /* Text */
    --st-ink: #1f2d40;
    --st-ink-soft: #4a5a6e;
    --st-muted: #49505b;
    --st-on-dark: #f6f1e7;
    --st-on-dark-soft: rgba(246, 241, 231, 0.72);

    /* Status */
    --st-success: var(--st-teal);
    --st-success-deep: var(--st-teal-deep);
    --st-success-soft: var(--st-teal-soft);
    --st-saffron-bg: #fef3c7;
    --st-saffron-border: #fcd34d;
    --st-saffron-text: #78350f;
    --st-danger: #9f1239;
    --st-danger-soft: rgba(159, 18, 57, 0.10);

    /* Typography — Cairo (KAUST) for Arabic, Saira for Latin wordmark.
       Cairo is naskh-derived: more readable at body sizes than Kufic
       display fonts, while still feeling modern. Almarai stays in the
       stack as a local fallback if Google Fonts is blocked. */
    --st-font-display-ar: 'Cairo', 'Almarai', 'Segoe UI', sans-serif;
    --st-font-display-en: 'Saira', 'Cairo', 'Segoe UI', sans-serif;
    --st-font-body: 'Cairo', 'Almarai', 'Segoe UI', Tahoma, sans-serif;

    /* Radii */
    --st-r-sm: 10px;
    --st-r-md: 16px;
    --st-r-lg: 24px;
    --st-r-pill: 999px;

    /* Shadows — wine-tinted underglow + neutral lift, layered. */
    --st-shadow-sm: 0 1px 2px rgba(31, 45, 64, 0.05),
                    0 4px 12px -4px rgba(31, 45, 64, 0.06);
    --st-shadow-md: 0 2px 4px rgba(31, 45, 64, 0.04),
                    0 18px 40px -18px rgba(31, 45, 64, 0.18),
                    0 8px 20px -12px rgba(152, 28, 75, 0.10);
    --st-shadow-lg: 0 4px 8px rgba(31, 45, 64, 0.05),
                    0 36px 72px -28px rgba(31, 45, 64, 0.28),
                    0 16px 36px -18px rgba(152, 28, 75, 0.18);

    --st-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.stauth-body {
    min-height: 100vh;
    background-color: var(--st-parchment);
    /* Sparse hex-grid background pattern + soft tinted color orbs.
       The hex tile is encoded as a tiny inline SVG so we keep zero
       extra HTTP requests and the pattern color picks up the wine
       brand token. */
    background-image:
        radial-gradient(circle at 88% 12%, rgba(152, 28, 75, 0.08), transparent 45%),
        radial-gradient(circle at 12% 88%, rgba(58, 143, 163, 0.07), transparent 45%),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpolygon points='60,18 96,38 96,82 60,102 24,82 24,38' fill='none' stroke='%23981c4b' stroke-width='1' opacity='0.07'/%3E%3C/svg%3E");
    background-attachment: fixed, fixed, fixed;
    background-size: auto, auto, 120px 120px;
    font-family: var(--st-font-body);
    color: var(--st-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.stauth-num {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

.d-none { display: none !important; }

:focus-visible {
    outline: 3px solid var(--st-wine);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ==============================================================
   Stage — the main centered viewport container for the login
   surface. The body's background does the heavy decorative work;
   the stage just holds the content column.
   ============================================================== */

.stauth-stage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 2rem;
    position: relative;
}

.stauth-page {
    width: 100%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ==============================================================
   Hero — HEPIQ logo + wordmark + tagline.
   Sits above the form card on the login surface.
   ============================================================== */

.stauth-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}

.stauth-hero-logo {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Soft wine glow underneath the logo PNG — gives it lift without
       wrapping it in a box. */
    filter: drop-shadow(0 8px 20px rgba(152, 28, 75, 0.25))
            drop-shadow(0 2px 6px rgba(31, 45, 64, 0.10));
}

.stauth-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.stauth-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.stauth-hero-mark {
    margin: 0;
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 2.1rem;
    letter-spacing: 0.04em;
    line-height: 1;
    /* Tri-color split echoing the logo's three faces. */
    background: linear-gradient(95deg,
        var(--st-wine) 0%,
        var(--st-wine) 38%,
        var(--st-teal) 50%,
        var(--st-teal-deep) 65%,
        var(--st-navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--st-wine);
}

.stauth-hero-tag {
    margin: 0;
    font-family: var(--st-font-display-ar);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--st-navy);
    letter-spacing: 0.005em;
}

.stauth-hero-tag-en {
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--st-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--st-font-display-en);
    font-weight: 600;
}

/* ==============================================================
   Cards — the white surface for forms and info blocks.
   Multi-layer shadow gives a "floating" feel; no flat border.
   Each card has a hex-shaped tab notched onto the top edge holding
   a section icon — the hexagon is the HEPIQ visual signature.
   ============================================================== */

.stauth-card {
    background: var(--st-card);
    border-radius: var(--st-r-lg);
    padding: 2.5rem 1.6rem 1.7rem;
    box-shadow: var(--st-shadow-md);
    position: relative;
    /* Subtle inner gold rim — gives a "letterhead" feel. */
    background-image: linear-gradient(180deg, rgba(245, 215, 110, 0.05), transparent 100px);
}

.stauth-card + .stauth-card { margin-top: 0.85rem; }

.stauth-card-tab {
    position: absolute;
    top: -22px;
    inset-inline-start: 1.6rem;
    width: 56px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    /* Pointy-top hexagon via clip-path. */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(155deg, var(--st-wine) 0%, var(--st-wine-deep) 100%);
    filter: drop-shadow(0 8px 16px rgba(152, 28, 75, 0.35));
}

.stauth-card-tab--teal {
    background: linear-gradient(155deg, var(--st-teal) 0%, var(--st-teal-deep) 100%);
    filter: drop-shadow(0 8px 16px rgba(58, 143, 163, 0.35));
}

.stauth-card-tab--navy {
    background: linear-gradient(155deg, var(--st-navy) 0%, var(--st-navy-deep) 100%);
    filter: drop-shadow(0 8px 16px rgba(42, 61, 86, 0.35));
}

.stauth-card-title {
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 1.2rem;
    margin: 0 0 0.25rem;
    color: var(--st-ink);
    line-height: 1.3;
}

.stauth-card-sub {
    margin: 0 0 1.1rem;
    font-size: 0.85rem;
    color: var(--st-ink-soft);
    line-height: 1.55;
}

/* ==============================================================
   Forms — inputs, selects, password toggle.
   ============================================================== */

.stauth-form {
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
}

.stauth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Per-field admin review status (wafedeen step-1 field-by-field audit). */
.stauth-field-audit {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
}
.stauth-field-audit--ok {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}
.stauth-field-audit--bad {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

.stauth-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--st-ink);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.stauth-label-required {
    color: var(--st-wine);
    font-weight: 700;
}

.stauth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.stauth-input-icon {
    position: absolute;
    inset-inline-start: 1rem;
    color: var(--st-muted);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color .18s var(--st-ease);
}

.stauth-input {
    width: 100%;
    padding: 0.95rem 1rem;
    padding-inline-start: 2.75rem;
    padding-inline-end: 1rem;
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-md);
    font-size: 1rem;
    font-family: var(--st-font-body);
    background: var(--st-parchment);
    color: var(--st-ink);
    outline: none;
    transition: border-color .18s var(--st-ease),
                box-shadow .18s var(--st-ease),
                background-color .18s var(--st-ease);
}

.stauth-input:hover { background: #fff; border-color: #d6c9ad; }

.stauth-input:focus {
    background: #fff;
    border-color: var(--st-wine);
    box-shadow: 0 0 0 4px var(--st-wine-soft);
}

.stauth-input:focus + .stauth-input-icon,
.stauth-input-wrap:focus-within .stauth-input-icon { color: var(--st-wine); }

.stauth-input::placeholder { color: var(--st-muted); }

.stauth-input[type="password"], #stauthPassword {
    padding-inline-end: 3rem;
}

.stauth-input.is-invalid {
    border-color: var(--st-danger);
    background: var(--st-danger-soft);
    box-shadow: 0 0 0 4px var(--st-danger-soft);
}

input[inputmode="numeric"].stauth-input,
input[type="tel"].stauth-input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    font-size: 1.05rem;
}

.stauth-select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--st-muted) 50%),
        linear-gradient(135deg, var(--st-muted) 50%, transparent 50%);
    background-position:
        calc(1rem) calc(50% - 3px),
        calc(1rem + 5px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-inline-end: 2.5rem;
    cursor: pointer;
}

.stauth-select:focus {
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--st-wine) 50%),
        linear-gradient(135deg, var(--st-wine) 50%, transparent 50%);
}

.stauth-select:disabled {
    background-color: var(--st-parchment-soft);
    color: var(--st-muted);
    cursor: not-allowed;
}

/* ==============================================================
   Select2 — scoped overrides so the enhanced selects match the
   native .stauth-input look (parchment fill, wine focus ring,
   wine hover, hex-derived radii). Loaded on channel_tarshih.php where
   the university/department selects live; admin theme's
   /assets/theme/css/select2.css is intentionally NOT loaded here
   (its CSS variables don't exist in the student_auth context).
   ============================================================== */

/* The container needs to behave like the .stauth-input in the wrap. */
.stauth-input-wrap .select2-container {
    width: 100% !important;
}

.stauth-input-wrap .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 52px;
    padding: 0.6rem 1rem;
    padding-inline-start: 2.75rem;
    padding-inline-end: 2.5rem;
    background: var(--st-parchment);
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-md);
    display: flex;
    align-items: center;
    transition: border-color .18s var(--st-ease),
                box-shadow .18s var(--st-ease),
                background-color .18s var(--st-ease);
    font-family: var(--st-font-body);
    font-size: 1rem;
    color: var(--st-ink);
    outline: none;
}

/* Hover and focus mirror .stauth-input. */
.stauth-input-wrap .select2-container--default .select2-selection--single:hover {
    background: #fff;
    border-color: #d6c9ad;
}

.stauth-input-wrap .select2-container--default.select2-container--focus .select2-selection--single,
.stauth-input-wrap .select2-container--default.select2-container--open .select2-selection--single {
    background: #fff;
    border-color: var(--st-wine);
    box-shadow: 0 0 0 4px var(--st-wine-soft);
}

/* Same focus tint on the leading icon when Select2 is open or focused. */
.stauth-input-wrap:has(.select2-container--focus) .stauth-input-icon,
.stauth-input-wrap:has(.select2-container--open) .stauth-input-icon {
    color: var(--st-wine);
}

/* The visible value label. */
.stauth-input-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--st-ink);
    line-height: 1.4;
    padding: 0;
    font-weight: 600;
}

.stauth-input-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--st-muted);
    font-weight: 500;
}

/* Hide Select2's native chevron — we use a custom one (matches the
   native .stauth-select chevron) so styling stays consistent. */
.stauth-input-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    width: 28px;
    top: 0;
    inset-inline-end: 0.85rem;
    inset-inline-start: auto;
    /* Default Select2 sets `right: 1px` — defeat with !important so RTL
       doesn't end up with the arrow on the wrong side. */
    right: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stauth-input-wrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
    /* Replace the default triangular b with two diagonal slashes that
       match the chevron we draw on .stauth-select. */
    border: 0;
    width: 9px;
    height: 9px;
    margin: 0;
    position: static;
    transform: rotate(45deg);
    border-right: 2px solid var(--st-muted);
    border-bottom: 2px solid var(--st-muted);
    transition: transform .2s var(--st-ease), border-color .2s var(--st-ease);
}

.stauth-input-wrap .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(-135deg);
    border-right-color: var(--st-wine);
    border-bottom-color: var(--st-wine);
}

/* Disabled state — matches .stauth-select:disabled. */
.stauth-input-wrap .select2-container--disabled .select2-selection--single,
.stauth-input-wrap .select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--st-parchment-soft);
    color: var(--st-muted);
    cursor: not-allowed;
    border-color: var(--st-border);
}

.stauth-input-wrap .select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--st-muted);
}

/* Invalid state (parity with .stauth-input.is-invalid). */
.stauth-input-wrap .select2-container.is-invalid .select2-selection--single {
    border-color: var(--st-danger);
    background: var(--st-danger-soft);
    box-shadow: 0 0 0 4px var(--st-danger-soft);
}

/* ----- Dropdown panel ----- */
.select2-container--default .select2-dropdown {
    border: 1.5px solid var(--st-wine);
    border-radius: var(--st-r-md);
    background: #fff;
    box-shadow: var(--st-shadow-md);
    overflow: hidden;
    margin-top: 6px;
    font-family: var(--st-font-body);
    z-index: 9999;
}

.select2-container--default .select2-dropdown--above { margin-top: 0; margin-bottom: 6px; }

.select2-container--default .select2-search--dropdown {
    padding: 0.7rem;
    background: var(--st-parchment);
    border-bottom: 1px solid var(--st-border);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-sm);
    font-family: var(--st-font-body);
    font-size: 0.93rem;
    color: var(--st-ink);
    background: #fff;
    outline: none;
    transition: border-color .15s var(--st-ease), box-shadow .15s var(--st-ease);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--st-wine);
    box-shadow: 0 0 0 3px var(--st-wine-soft);
}

.select2-container--default .select2-results { padding: 0.35rem; }

.select2-container--default .select2-results > .select2-results__options {
    max-height: 280px;
}

.select2-container--default .select2-results__option {
    padding: 0.65rem 0.85rem;
    border-radius: var(--st-r-sm);
    font-size: 0.93rem;
    color: var(--st-ink);
    line-height: 1.5;
    transition: background-color .12s var(--st-ease), color .12s var(--st-ease);
    cursor: pointer;
    margin-bottom: 2px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--st-wine-soft);
    color: var(--st-wine);
    font-weight: 700;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
    background: linear-gradient(155deg, var(--st-wine), var(--st-wine-deep));
    color: #fff;
    font-weight: 700;
}

.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: var(--st-muted);
    background: transparent;
    cursor: not-allowed;
}

/* Group headers (department list groups by college). */
.select2-container--default .select2-results__group {
    padding: 0.6rem 0.85rem 0.4rem;
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--st-teal-deep);
    text-transform: none;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--st-border-soft);
    margin-bottom: 0.25rem;
    position: sticky;
    top: 0;
    background: var(--st-parchment-soft);
    z-index: 1;
}

/* "No results" empty state. */
.select2-container--default .select2-results__option.select2-results__message {
    color: var(--st-muted);
    font-size: 0.88rem;
    text-align: center;
    padding: 1rem;
    font-style: normal;
}

/* Loading state during async fetches. */
.select2-container--default .select2-results__option.loading-results {
    color: var(--st-teal-deep);
    text-align: center;
}

.stauth-pw-toggle {
    position: absolute;
    inset-inline-end: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0.45rem 0.6rem;
    color: var(--st-muted);
    cursor: pointer;
    line-height: 1;
    border-radius: 8px;
    transition: color .15s var(--st-ease), background-color .15s var(--st-ease);
}

.stauth-pw-toggle:hover {
    color: var(--st-wine);
    background: var(--st-wine-soft);
}

.stauth-hint {
    font-size: 0.78rem;
    color: var(--st-muted);
    line-height: 1.55;
    padding-inline-start: 0.2rem;
}

/* ---------- Summation captcha ----------
   Renders the "A + B =" equation as a parchment chip pinned to the
   start of the input (RTL: right side). The chip is non-interactive;
   only the answer field accepts input. */
.stauth-captcha-wrap { gap: 0; }

.stauth-captcha-eq {
    position: absolute;
    inset-inline-start: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--st-r-md);
    background: var(--st-parchment-soft);
    border: 1.5px solid var(--st-border);
    color: var(--st-ink);
    font-family: var(--st-font-display-ar);
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.stauth-captcha-num { color: var(--st-wine); }
.stauth-captcha-op  { color: var(--st-ink-soft); }

.stauth-captcha-input {
    /* Reserve room for the equation chip on the start side. The chip
       is roughly 6.5rem wide with two single digits; 7rem keeps the
       answer text comfortably clear of it. */
    padding-inline-start: 7rem;
    text-align: center;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

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

.stauth-submit {
    margin-top: 0.4rem;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1rem;
    border: 0;
    border-radius: var(--st-r-md);
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 1.02rem;
    color: #fff;
    background: linear-gradient(155deg, var(--st-wine) 0%, var(--st-wine-deep) 100%);
    cursor: pointer;
    transition: transform .12s var(--st-ease),
                box-shadow .18s var(--st-ease),
                filter .18s var(--st-ease);
    box-shadow:
        0 14px 28px -10px rgba(152, 28, 75, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
}

/* Subtle teal shimmer that drifts across the button on hover —
   echoes the logo's tri-color play. */
.stauth-submit::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(58, 143, 163, 0.30) 50%,
        transparent 70%);
    transform: translateX(-100%);
    transition: transform .65s var(--st-ease);
    pointer-events: none;
}

.stauth-submit:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow:
        0 18px 36px -12px rgba(152, 28, 75, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.stauth-submit:hover:not(:disabled)::after { transform: translateX(100%); }

.stauth-submit:active:not(:disabled) { transform: translateY(1px); }

.stauth-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    box-shadow: none;
}

.stauth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    width: 100%;
    border: 1.5px solid var(--st-border);
    background: var(--st-parchment);
    color: var(--st-ink);
    border-radius: var(--st-r-md);
    font-family: var(--st-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s var(--st-ease),
                border-color .15s var(--st-ease),
                color .15s var(--st-ease);
}

.stauth-back:hover {
    background: #fff;
    border-color: var(--st-wine);
    color: var(--st-wine);
    text-decoration: none;
}

.stauth-logout { color: var(--st-danger); }

.stauth-logout:hover {
    color: #fff;
    background: var(--st-danger);
    border-color: var(--st-danger);
}

/* ==============================================================
   Meta row + decorative form rule.
   ============================================================== */

.stauth-meta {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    color: var(--st-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.stauth-meta-year {
    color: var(--st-wine);
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

/* ==============================================================
   Block info — dt/dd rows used on registration / acceptance / channel_tarshih.
   ============================================================== */

.stauth-block-head {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--st-border);
}

.stauth-block-icon {
    flex-shrink: 0;
    width: 50px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    /* Hex-shaped icon container — recurring HEPIQ motif. */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(155deg, var(--st-wine), var(--st-wine-deep));
}

.stauth-block-icon--register {
    background: linear-gradient(155deg, var(--st-teal), var(--st-teal-deep));
}

.stauth-block-icon--navy {
    background: linear-gradient(155deg, var(--st-navy), var(--st-navy-deep));
}

.stauth-block-head-text { flex: 1; min-width: 0; }

.stauth-block-title {
    margin: 0;
    font-family: var(--st-font-display-ar);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--st-ink);
}

.stauth-block-subtitle {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--st-ink-soft);
    line-height: 1.5;
}

.stauth-block-info {
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stauth-block-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: var(--st-parchment);
    border: 1.5px solid var(--st-border-soft);
    border-radius: 10px;
    transition: border-color .15s var(--st-ease), background-color .15s var(--st-ease);
}

.stauth-block-row:hover {
    border-color: var(--st-border);
    background: #fff;
}

.stauth-block-row dt {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--st-muted);
}

.stauth-block-row dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--st-ink);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.stauth-block-note {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1.05rem 0.95rem 1.05rem;
    padding-inline-start: 1.2rem;
    background:
        linear-gradient(135deg, #fffbeb 0%, var(--st-saffron-bg) 100%);
    border: 1px solid var(--st-saffron-border);
    color: var(--st-saffron-text);
    border-radius: 14px;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.7;
    margin-bottom: 1rem;
    box-shadow:
        0 1px 2px rgba(120, 53, 15, 0.04),
        0 4px 12px -6px rgba(180, 83, 9, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

.stauth-block-note::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 4px;
    background: linear-gradient(180deg, #f59e0b, #b45309);
    border-radius: 4px 0 0 4px;
}

.stauth-block-note > i {
    flex-shrink: 0;
    width: 1.85rem;
    height: 1.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(155deg, #f59e0b, #b45309);
    border-radius: 50%;
    box-shadow:
        0 2px 4px rgba(180, 83, 9, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    margin-top: 0.05rem;
}

.stauth-block-note > span,
.stauth-block-note > p {
    flex: 1;
    min-width: 0;
}

.stauth-block-note strong,
.stauth-block-note b {
    font-weight: 800;
    color: #5c270a;
}

/* ==============================================================
   Footer — ministry credit at the bottom of the login stage.
   ============================================================== */

.stauth-foot {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--st-muted);
    font-size: 0.78rem;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.stauth-foot-rule {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-border), transparent);
}

/* ==============================================================
   Channel tarshih page — top app bar + hero + grid.
   ============================================================== */

.stauth-appbar {
    background: rgba(246, 241, 231, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--st-border);
    padding: 0.85rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.stauth-appbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stauth-appbar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
}

.stauth-appbar-logo {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 10px rgba(152, 28, 75, 0.20));
}

.stauth-appbar-logo img { width: 100%; height: 100%; object-fit: contain; }

.stauth-appbar-mark {
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1;
    background: linear-gradient(95deg, var(--st-wine) 30%, var(--st-teal) 70%, var(--st-navy) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--st-wine);
}

.stauth-appbar-sub {
    margin: 0.1rem 0 0;
    font-size: 0.7rem;
    color: var(--st-muted);
    letter-spacing: 0.04em;
    font-family: var(--st-font-display-ar);
    font-weight: 600;
}

.stauth-appbar-spacer { flex: 1; }

.stauth-appbar-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    background: var(--st-card);
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-pill);
    color: var(--st-ink);
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all .15s var(--st-ease);
}

.stauth-appbar-logout:hover {
    background: var(--st-danger);
    color: #fff;
    border-color: var(--st-danger);
    text-decoration: none;
}

/* ==============================================================
   Hero — Student Identity Dossier.
   Five vertical zones inside one gradient band:
     1. header  — eyebrow pill + status chips (martyr, attempts).
     2. intro   — greeting + full name.
     3. identity — two "statement" stats: exam number + sum.
     4. ledger  — 2-col secondary info (school, branch, phone…).
     5. actions — optional CTA (view last submission).
   Stable grid: rows never reflow when a ledger entry is missing;
   the 2-col collapse just produces one fewer row in its column.
   ============================================================== */

.stauth-hero-band {
    position: relative;
    overflow: hidden;
    color: var(--st-on-dark);
    background:
        radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.12), transparent 55%),
        radial-gradient(circle at 85% 88%, rgba(58, 143, 163, 0.22), transparent 55%),
        linear-gradient(135deg, var(--st-wine) 0%, var(--st-wine-deep) 48%, var(--st-navy-deep) 100%);
    border-radius: var(--st-r-lg);
    padding: 1.75rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--st-shadow-md);
    display: block;
}

.stauth-hero-band-watermark {
    position: absolute;
    inset-inline-end: -34px;
    bottom: -44px;
    width: 240px;
    height: 240px;
    opacity: 0.085;
    pointer-events: none;
    filter: saturate(0) brightness(1.8);
}

.stauth-hero-band-watermark img { width: 100%; height: 100%; object-fit: contain; }

.stauth-hero-band-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}

/* ----- 1. Header row (eyebrow + badges) ----- */
.stauth-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stauth-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.8rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--st-r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--st-on-dark);
    font-family: var(--st-font-display-ar);
    backdrop-filter: blur(6px);
}

.stauth-hero-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--st-teal);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(58, 143, 163, 0.35);
    animation: stauthPulseDot 2.6s var(--st-ease) infinite;
}

@keyframes stauthPulseDot {
    0%, 60%, 100% { box-shadow: 0 0 0 3px rgba(58, 143, 163, 0.35); }
    30%           { box-shadow: 0 0 0 6px rgba(58, 143, 163, 0.08); }
}

.stauth-hero-badges {
    display: inline-flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stauth-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--st-r-pill);
    color: var(--st-on-dark);
    font-size: 0.82rem;
    font-weight: 600;
}

.stauth-hero-chip i {
    color: var(--st-teal);
    font-size: 0.82rem;
}

.stauth-hero-chip-num {
    font-family: var(--st-font-display-en);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* ----- 2. Intro — greeting + full name ----- */
.stauth-hero-intro {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.stauth-hero-greeting {
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    letter-spacing: -0.005em;
}

.stauth-hero-greeting em {
    font-style: normal;
    color: var(--st-cream);
    background: linear-gradient(95deg, var(--st-cream), #fff 65%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stauth-hero-fullname {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: var(--st-font-display-ar);
}
.stauth-hero-fullname i { color: var(--st-cream); font-size: 0.85rem; }

/* ----- 3. Identity statement strip ----- */
.stauth-hero-identity {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0;
    padding: 0.7rem 0.9rem;
    background:
        linear-gradient(115deg,
            rgba(255, 255, 255, 0.07) 0%,
            rgba(255, 255, 255, 0.03) 50%,
            rgba(58, 143, 163, 0.10) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--st-r-md);
    overflow: hidden;
}

.stauth-hero-identity::after {
    content: '';
    position: absolute;
    top: 0.55rem;
    bottom: 0.55rem;
    inset-inline-start: calc(1.35 / 2.35 * 100%);
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgba(245, 232, 214, 0.28) 30%,
        rgba(245, 232, 214, 0.28) 70%,
        transparent);
    pointer-events: none;
}

.stauth-hero-feature {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    min-width: 0;
}

.stauth-hero-feature-k {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.70);
    font-family: var(--st-font-display-ar);
}

.stauth-hero-feature-k i {
    color: var(--st-teal);
    font-size: 0.74rem;
}

.stauth-hero-feature-v {
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.stauth-hero-feature--exam .stauth-hero-feature-v {
    color: var(--st-cream);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.stauth-hero-feature--sum .stauth-hero-feature-v {
    background: linear-gradient(95deg, #fff, var(--st-cream) 55%, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
}

/* ----- 4. Dossier ledger ----- */
.stauth-hero-ledger {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
    row-gap: 0;
}

.stauth-hero-ledger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.72rem 0;
    min-width: 0;
    border-block-end: 1px dashed rgba(245, 232, 214, 0.14);
}

.stauth-hero-ledger-row dt {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.68);
    font-family: var(--st-font-display-ar);
    flex-shrink: 0;
}

.stauth-hero-ledger-row dt i {
    color: var(--st-teal);
    font-size: 0.82rem;
    width: 16px;
    text-align: center;
}

.stauth-hero-ledger-row dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    text-align: end;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.stauth-hero-ledger-row dd.stauth-num {
    font-family: var(--st-font-display-en);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ----- 5. Actions (trailing CTA) ----- */
.stauth-hero-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

/* Hero responsive — collapse the two multi-col grids to single columns
   on phones. Horizontal seam replaces the vertical one when stacked. */
@media (max-width: 640px) {
    .stauth-hero-band { padding: 1.4rem 1.15rem; }
    .stauth-hero-band-content { gap: 1.15rem; }

    .stauth-hero-header { align-items: flex-start; }
    .stauth-hero-badges { justify-content: flex-start; }

    .stauth-hero-identity {
        grid-template-columns: 1fr;
        padding: 1rem 1.1rem;
        gap: 0.85rem;
    }
    .stauth-hero-feature { padding: 0.2rem 0.2rem; }
    .stauth-hero-identity::after {
        top: calc(50% - 0.5px);
        bottom: auto;
        inset-inline-start: 0.85rem;
        inset-inline-end: 0.85rem;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg,
            transparent,
            rgba(245, 232, 214, 0.28) 20%,
            rgba(245, 232, 214, 0.28) 80%,
            transparent);
    }

    .stauth-hero-ledger {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    .stauth-hero-ledger-row { padding: 0.62rem 0; }

    .stauth-hero-actions { justify-content: stretch; }
    .stauth-hero-actions .stauth-hero-view-btn { width: 100%; justify-content: center; }
}

@media (max-width: 380px) {
    .stauth-hero-band-watermark { width: 170px; height: 170px; bottom: -34px; inset-inline-end: -28px; }
    .stauth-hero-feature-v { font-size: 1.05rem; }
    .stauth-hero-greeting { font-size: 1.4rem; }
}

/* ----- Content grid -----
   `minmax(0, 1fr)` (not plain `1fr`) is load-bearing here: `1fr` is
   shorthand for `minmax(auto, 1fr)`, which sets the track's min to
   min-content. Any descendant with non-wrapping text (long uni title,
   a chip with white-space:nowrap, the receipt stamp, etc.) then
   expands the track past the viewport, horizontal scroll appears, and
   every fixed-width UI layered above (the swal2 popup, sticky
   appbar, hero-band) reports a viewport-width inflated by the
   overflow — which is why the page "breaks" on phones when grid is
   enabled and looks fine when grid is removed. `minmax(0, 1fr)`
   lets the track shrink below its content, so overflow is opt-in
   (child must handle its own clipping) instead of accidental. */
.stauth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    min-width: 0;
}

/* ==============================================================
   Channel status card — status pill is hex-shaped.
   ============================================================== */

.stauth-channel-card .stauth-block-head { flex-wrap: wrap; }

.stauth-channel-card.is-closed .stauth-block-icon {
    background: linear-gradient(155deg, var(--st-danger), #7e1030);
}

.stauth-channel-card.is-open .stauth-block-icon {
    background: linear-gradient(155deg, var(--st-teal), var(--st-teal-deep));
}

.stauth-channel-card.is-open .stauth-block-subtitle {
    color: var(--st-teal-deep);
    font-weight: 700;
}

.stauth-status-pill {
    margin-inline-start: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-family: var(--st-font-display-ar);
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: var(--st-r-pill);
    letter-spacing: 0.04em;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

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

.stauth-status-pill.is-open {
    background: var(--st-teal-soft);
    color: var(--st-teal-deep);
    border-color: rgba(58, 143, 163, 0.30);
}

.stauth-status-pill.is-open::before {
    background: var(--st-teal);
    box-shadow: 0 0 0 3px rgba(58, 143, 163, 0.20);
    animation: stauth-pulse 1.8s ease-in-out infinite;
}

.stauth-status-pill.is-closed {
    background: var(--st-danger-soft);
    color: var(--st-danger);
    border-color: rgba(159, 18, 57, 0.25);
}

.stauth-status-pill.is-closed::before { background: var(--st-danger); }

/* "Coming soon" pill + card — for channels that are announced but not yet
   live. Visually quieter than is-closed (which signals an error/blocked
   state); uses an amber accent to read as "anticipation, not failure". */
.stauth-status-pill.is-soon {
    background: rgba(217, 119, 6, 0.10);
    color: #b45309;
    border-color: rgba(217, 119, 6, 0.28);
}
.stauth-status-pill.is-soon::before { display: none; }
.stauth-status-pill.is-soon i {
    font-size: 0.78rem;
    color: #b45309;
}

.stauth-channel-card--soon {
    background-image: none;
    opacity: 0.92;
    cursor: not-allowed;
}
.stauth-channel-card--soon .stauth-card-tab {
    background: linear-gradient(155deg, #b45309, #92400e);
}
.stauth-channel-card--soon .stauth-block-title {
    color: var(--st-ink-soft, #6b7280);
}
.stauth-channel-card--soon .stauth-block-subtitle {
    color: #b45309;
    font-weight: 700;
}
.stauth-block-note--soon {
    background:
        linear-gradient(135deg, rgba(255, 251, 235, 0.9) 0%, rgba(217, 119, 6, 0.10) 100%);
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.22);
}
.stauth-block-note--soon > i {
    color: #fff;
    background: linear-gradient(155deg, #d97706, #92400e);
}

.stauth-channels-list--soon { margin-top: 0.85rem; }

@keyframes stauth-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(58, 143, 163, 0.20); }
    50%      { box-shadow: 0 0 0 7px rgba(58, 143, 163, 0.04); }
}

.stauth-apply .stauth-form { gap: 1rem; }

/* Compact horizontal channel card. Used on the channels landing for the
   martyr-privilege shortcut where a full hero-style card wastes vertical
   space. Icon sits inline on the side instead of overhanging on top. */
.stauth-card.stauth-channel-card--slim {
    padding: 1rem 1.2rem;
    background-image: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.6rem;
}
.stauth-channel-card--slim .stauth-slim-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    background: linear-gradient(155deg, var(--st-teal) 0%, var(--st-teal-deep) 100%);
    box-shadow: 0 6px 14px rgba(58, 143, 163, 0.3);
}
.stauth-channel-card--slim.is-closed .stauth-slim-icon {
    background: linear-gradient(155deg, #6c757d 0%, #495057 100%);
    box-shadow: 0 6px 14px rgba(73, 80, 87, 0.3);
}
.stauth-channel-card--slim .stauth-slim-body {
    flex: 1 1 auto;
    min-width: 0;
}
.stauth-channel-card--slim .stauth-slim-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--st-ink);
}
.stauth-channel-card--slim .stauth-slim-sub {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: var(--st-ink-soft, #6b7280);
    line-height: 1.5;
}
.stauth-channel-card--slim .stauth-slim-end {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--st-wine);
    font-weight: 700;
    font-size: 0.85rem;
}
.stauth-channel-card--slim .stauth-slim-end i {
    transition: transform 0.18s ease;
}
.stauth-channel-card--slim.is-clickable:hover .stauth-slim-end i {
    transform: translateX(-3px);
}
@media (max-width: 540px) {
    .stauth-channel-card--slim .stauth-slim-end span { display: none; }
}

/* Two-column form layout (used by the martyr application page).
   Mobile stays single-column; ≥640px splits into two equal tracks.
   .stauth-field--full lets a single field (or the submit button) span
   both tracks when needed. */
.stauth-form.stauth-form--two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.1rem;
    row-gap: 1.05rem;
}
@media (min-width: 640px) {
    .stauth-form.stauth-form--two-col {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.stauth-form.stauth-form--two-col .stauth-field--full,
.stauth-form.stauth-form--two-col > .stauth-submit {
    grid-column: 1 / -1;
}

/* Wider variant — packs a 3rd column in on desktop for cards with many
   short fields (e.g. قناة حفظة القرآن). Opt-in per usage; the shared
   2-col form above stays untouched for every other channel. */
@media (min-width: 1024px) {
    .stauth-form.stauth-form--two-col.stauth-form--wide-cols {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==============================================================
   Selectable radio "cards" — bigger, clearer target than a bare
   native radio row. Used by the قناة حفظة القرآن نوع المتقدم picker;
   generic enough for any future multi-choice field.
   ============================================================== */
.stauth-radio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
@media (min-width: 640px) {
    .stauth-radio-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .stauth-radio-grid { grid-template-columns: repeat(4, 1fr); }
}

.stauth-radio-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-md);
    background: var(--st-parchment);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--st-ink);
    cursor: pointer;
    transition: border-color .18s var(--st-ease),
                background-color .18s var(--st-ease),
                box-shadow .18s var(--st-ease);
}
.stauth-radio-card:hover { background: #fff; border-color: #d6c9ad; }
.stauth-radio-card input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var(--st-wine);
    cursor: pointer;
}
.stauth-radio-card:has(input:checked) {
    background: #fff;
    border-color: var(--st-wine);
    box-shadow: 0 0 0 4px var(--st-wine-soft);
    color: var(--st-wine-deep);
}

/* Toggle row — a checkbox (optionally revealing an extra field) boxed
   in its own bordered card so it doesn't float loosely inside a
   two-column field grid next to unrelated inputs. */
.stauth-toggle-row {
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-md);
    background: var(--st-parchment);
    padding: 0.9rem 1rem;
    gap: 0.75rem;
}
.stauth-toggle-check {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--st-ink);
    cursor: pointer;
}
.stauth-toggle-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--st-wine);
    cursor: pointer;
    flex-shrink: 0;
}
.stauth-toggle-extra {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.75rem;
    margin-top: 0.15rem;
    border-top: 1px dashed var(--st-border);
}
.stauth-toggle-extra.d-none { display: none; }

/* ==============================================================
   Entry animation — staggered cascade.
   ============================================================== */

.stauth-page > * {
    animation: stauth-rise .55s var(--st-ease) both;
}

.stauth-page > *:nth-child(1) { animation-delay: .05s; }
.stauth-page > *:nth-child(2) { animation-delay: .14s; }
.stauth-page > *:nth-child(3) { animation-delay: .23s; }
.stauth-page > *:nth-child(4) { animation-delay: .32s; }
.stauth-page > *:nth-child(5) { animation-delay: .41s; }

@keyframes stauth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Logo gentle float — only on the login hero, only on capable devices. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .stauth-hero-logo {
        animation: stauth-float 5s ease-in-out infinite;
    }
}

@keyframes stauth-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .stauth-page > *,
    .stauth-hero-logo,
    .stauth-status-pill.is-open::before { animation: none; }
}

/* ==============================================================
   Channel tarshih page padding wrapper.
   ============================================================== */

.stauth-welcome-wrap { padding: 1rem; }

.stauth-welcome-wrap .stauth-page {
    max-width: 1180px;
    margin: 0 auto;
}

/* ==============================================================
   Responsive.
   ============================================================== */

@media (min-width: 640px) {
    .stauth-stage { padding: 2.5rem 1.5rem 3rem; }
    .stauth-card { padding: 2.7rem 2rem 1.85rem; }
    .stauth-card-tab { inset-inline-start: 2rem; }
    .stauth-appbar { padding: 1rem 1.5rem; }
    .stauth-hero-band { padding: 2.2rem 2rem; }
    .stauth-welcome-wrap { padding: 1.5rem; }
}

@media (min-width: 1024px) {
    .stauth-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        align-items: start;
        gap: 1.25rem;
    }
}

/* Desktop — bigger scale for the centered stage. */
@media (min-width: 1024px) {
    .stauth-stage { padding: 4rem 2rem 4rem; }
    .stauth-page { max-width: 540px; }

    .stauth-hero-logo { width: 84px; height: 84px; }
    .stauth-hero-mark { font-size: 2.4rem; }
    .stauth-hero-tag { font-size: 1.05rem; }

    .stauth-card { padding: 3rem 2.4rem 2rem; }
    .stauth-card-tab { width: 60px; height: 68px; top: -24px; inset-inline-start: 2.4rem; }
    .stauth-card-title { font-size: 1.35rem; }
    .stauth-card-sub { font-size: 0.92rem; }

    .stauth-welcome-wrap { padding: 2rem 1.5rem 3rem; }
    .stauth-hero-band { padding: 2.5rem 2.4rem; }
    .stauth-hero-band-watermark { width: 280px; height: 280px; }
}

/* ==============================================================
   Ordered priority list — the "chosen departments" chips that
   the user builds on channel_tarshih.php after picking from #stauthDepartment.

   Picking a department pushes a chip into #stauthSelectedDepartments
   (the <ol>) and removes the matching <option> from the Select2.
   Order of chips IS priority order; drag handles + up/down buttons
   let the student reshuffle.
   ============================================================== */

.stauth-selected-field {
    gap: 0.55rem;
}

.stauth-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.stauth-selected-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.stauth-selected-label i {
    color: var(--st-teal-deep);
    font-size: 0.95rem;
}

/* Counter + "من N" label grouped together on the head. */
.stauth-selected-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Hex-badge counter on the head — echoes the card-tab motif. */
.stauth-selected-count {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(155deg, var(--st-teal) 0%, var(--st-teal-deep) 100%);
    filter: drop-shadow(0 4px 10px rgba(58, 143, 163, 0.35));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    transition: transform .2s var(--st-ease), filter .2s var(--st-ease),
                background .2s var(--st-ease);
}

/* Recolor to the wine tone the moment the max cap is hit — signals
   "you're at the limit" without requiring an extra text node. */
.stauth-selected-count.is-full {
    background: linear-gradient(155deg, var(--st-wine) 0%, var(--st-wine-deep) 100%);
    filter: drop-shadow(0 4px 10px rgba(152, 28, 75, 0.35));
}

.stauth-selected-max {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--st-ink-soft);
    letter-spacing: 0.01em;
}

.stauth-selected-max strong {
    color: var(--st-ink);
    font-family: var(--st-font-display-en);
    font-weight: 800;
}

.stauth-selected-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    counter-reset: stauth-selected;
}

.stauth-selected-list.is-empty {
    display: none;
}

/* ----- Empty placeholder ----- */
.stauth-selected-empty {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.1rem;
    border: 1.5px dashed var(--st-border);
    border-radius: var(--st-r-md);
    background:
        linear-gradient(180deg, var(--st-parchment) 0%, var(--st-parchment-soft) 100%);
    color: var(--st-ink-soft);
    font-size: 0.88rem;
    line-height: 1.55;
}

.stauth-selected-empty i {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--st-muted);
}

/* ==============================================================
   Chip — a single selected department.
   Layout (RTL): [handle] [hex-order] [body stack] [actions]
   ============================================================== */
.stauth-selected-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: var(--st-card);
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-md);
    box-shadow: var(--st-shadow-sm);
    cursor: grab;
    transition: border-color .18s var(--st-ease),
                background-color .18s var(--st-ease),
                box-shadow .18s var(--st-ease),
                transform .18s var(--st-ease),
                opacity .18s var(--st-ease);
}

/* Wine accent bar on the leading edge (RTL-aware). */
.stauth-selected-item::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--st-wine) 0%, var(--st-teal) 100%);
    opacity: 0.85;
    transition: width .18s var(--st-ease), opacity .18s var(--st-ease);
}

.stauth-selected-item:hover {
    border-color: var(--st-wine);
    background: #fff;
    box-shadow: var(--st-shadow-md);
}

.stauth-selected-item:hover::before {
    width: 5px;
    opacity: 1;
}

.stauth-selected-item:active {
    cursor: grabbing;
}

/* Dragging — ghost the source, highlight the edges of siblings so
   the drop target is obvious. */
.stauth-selected-item.is-dragging {
    opacity: 0.55;
    transform: scale(0.985);
    border-style: dashed;
    border-color: var(--st-wine);
    box-shadow: var(--st-shadow-lg);
    cursor: grabbing;
}

/* Enter/leave animations for chip add/remove. */
.stauth-selected-item.is-entering {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
}

.stauth-selected-item.is-leaving {
    opacity: 0;
    transform: translateX(12px);
    pointer-events: none;
}

/* ----- Grip handle ----- */
.stauth-selected-handle {
    flex-shrink: 0;
    width: 28px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--st-muted);
    font-size: 0.95rem;
    cursor: grab;
    border-radius: 6px;
    transition: color .15s var(--st-ease), background-color .15s var(--st-ease);
}

.stauth-selected-handle:hover {
    color: var(--st-wine);
    background: var(--st-wine-soft);
}

.stauth-selected-item:active .stauth-selected-handle,
.stauth-selected-handle:active {
    cursor: grabbing;
}

/* ----- Hex priority number ----- */
.stauth-selected-order {
    flex-shrink: 0;
    width: 40px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(155deg, var(--st-wine) 0%, var(--st-wine-deep) 100%);
    color: #fff;
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    filter: drop-shadow(0 4px 10px rgba(152, 28, 75, 0.30));
    transition: transform .2s var(--st-ease), filter .2s var(--st-ease);
}

.stauth-selected-item:hover .stauth-selected-order {
    transform: rotate(-4deg);
    filter: drop-shadow(0 6px 12px rgba(152, 28, 75, 0.42));
}

/* ----- Body (university + college + department stacked) ----- */
.stauth-selected-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.35;
}

/* University label — only appears in preloaded mode where chips span
   multiple universities. Slightly bolder and in wine so it reads as
   the top-of-hierarchy label. */
.stauth-selected-university {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--st-wine);
    letter-spacing: 0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stauth-selected-college {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--st-teal-deep);
    letter-spacing: 0.015em;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stauth-selected-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--st-ink);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
}

/* ----- Action buttons (up / down / remove) ----- */
.stauth-selected-actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.stauth-selected-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--st-border);
    background: var(--st-parchment);
    color: var(--st-ink-soft);
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color .15s var(--st-ease),
                border-color .15s var(--st-ease),
                color .15s var(--st-ease),
                transform .12s var(--st-ease);
}

.stauth-selected-btn:hover {
    background: #fff;
    border-color: var(--st-teal);
    color: var(--st-teal-deep);
}

.stauth-selected-btn:active { transform: translateY(1px); }

.stauth-selected-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    background: var(--st-parchment-soft);
}

/* The up-arrow on the first chip and the down-arrow on the last are
   still clickable (they just no-op) — dim them to communicate that. */
.stauth-selected-item:first-child .stauth-selected-up,
.stauth-selected-item:last-child  .stauth-selected-down {
    opacity: 0.35;
    color: var(--st-muted);
}

.stauth-selected-remove:hover {
    background: var(--st-danger-soft);
    border-color: var(--st-danger);
    color: var(--st-danger);
}

/* Narrow phones — compact the chip so it still fits side-by-side. */
@media (max-width: 420px) {
    .stauth-selected-item {
        gap: 0.5rem;
        padding: 0.6rem 0.65rem;
    }
    .stauth-selected-handle { width: 22px; height: 32px; }
    .stauth-selected-order  { width: 34px; height: 40px; font-size: 0.9rem; }
    .stauth-selected-title  { font-size: 0.9rem; }
    .stauth-selected-college { font-size: 0.68rem; }
    .stauth-selected-btn {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    .stauth-selected-actions { gap: 0.15rem; }
}

/* Touch devices — HTML5 drag-and-drop doesn't fire on touch, but the
   up/down/remove buttons still work. Swap the cursor hint. */
@media (hover: none) {
    .stauth-selected-item,
    .stauth-selected-handle,
    .stauth-selected-item:active { cursor: default; }
}

/* Preloaded mode — the entire eligible universe is rendered as chips,
   the student can only reorder. Remove buttons aren't rendered server-side
   but we also defensively hide them if something slips in. */
.stauth-selected-list.is-preloaded .stauth-selected-remove { display: none; }

/* ==============================================================
   Save button hint — small line below the save CTA explaining why
   it's disabled (or "ready to save" when it isn't).
   ============================================================== */
.stauth-save-hint {
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--st-ink-soft);
    text-align: center;
    min-height: 1.1em;   /* reserve a line so the button doesn't jump */
}

.stauth-save-hint.is-ok {
    color: var(--st-teal-deep);
    font-weight: 700;
}

/* ==============================================================
   Remaining-tries strip (apply card) — shown only after the
   student's first save, so they always see how many edit
   attempts they still have before the MAX_TRIES lock.
   ============================================================== */
.stauth-tries-remaining {
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: var(--st-r-md);
    background: rgba(58, 143, 163, 0.12);
    border: 1px solid rgba(58, 143, 163, 0.30);
    color: var(--st-teal-deep);
    font-family: var(--st-font-body);
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
}

.stauth-tries-remaining i { color: var(--st-teal-deep); }

.stauth-tries-remaining strong {
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 1.02rem;
    padding: 0 0.15rem;
}

/* Per-mode wrapper — flex container so the general + martyr strips
   sit side by side (and wrap on narrow screens). One strip per chooser
   pick (general/martyr), populated only for martyr-family students;
   non-martyr students see the general strip alone, identical to the
   pre-split visual. */
.stauth-tries-by-mode {
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stauth-tries-by-mode .stauth-tries-remaining {
    margin: 0;
}

/* Martyr variant — navy tone so the two strips read as related-but-
   distinct (mirrors how the available-deps strip uses navy alongside
   the teal tries-remaining). */
.stauth-tries-remaining--martyr {
    background: rgba(28, 51, 87, 0.08);
    border-color: rgba(28, 51, 87, 0.30);
    color: var(--st-navy-deep, #1c3357);
}

.stauth-tries-remaining--martyr i { color: var(--st-navy-deep, #1c3357); }

/* ==============================================================
   Available-departments strip (apply card) — surfaces the total
   plan rows that accept the student across every university so
   they know the size of the eligible universe before they start
   the uni → dept cascade. Sibling treatment of the tries-remaining
   strip; navy tone so the two read as related-but-distinct chips
   when both are rendered. Number is server-counted after by_city,
   diff-tie, and accepted_code gates are applied (matches the JS
   applyServerSideGates() set).
   ============================================================== */
.stauth-available-deps {
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.6rem 0.6rem 1rem;
    border-radius: var(--st-r-md);
    background: rgba(28, 51, 87, 0.08);
    border: 1px solid rgba(28, 51, 87, 0.22);
    color: var(--st-navy-deep, #1c3357);
    font-family: var(--st-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
}

.stauth-available-deps + .stauth-tries-remaining,
.stauth-tries-remaining + .stauth-available-deps {
    margin-inline-start: 0.5rem;
}

.stauth-available-deps i {
    color: var(--st-navy-deep, #1c3357);
    font-size: 1rem;
}

/* Number rendered as a solid navy pill so the count is the first
   thing the eye lands on — QA flagged the previous inline number
   as visually lost inside the surrounding label text. */
.stauth-available-deps strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--st-navy-deep, #1c3357);
    color: #fff;
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 1rem;
}

/* ==============================================================
   Cross-mode warning (apply card) — surfaces the fact that the
   student's currently saved picks live under the OTHER chooser
   pick (general vs martyr). Saving here will overwrite those
   picks; an inline preview button reuses the view_submission
   AJAX so the student can review what they're about to lose
   before they commit.
   Amber/warning tone so it reads as actionable but non-blocking.
   ============================================================== */
.stauth-cross-mode-warning {
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.95rem;
    border-radius: var(--st-r-md);
    background: rgba(217, 119, 6, 0.10);
    border: 1px solid rgba(217, 119, 6, 0.35);
    color: #8a4a06;
    font-family: var(--st-font-body);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.5;
}

.stauth-cross-mode-warning i { color: #b45309; flex-shrink: 0; }

.stauth-cross-mode-warning strong {
    font-weight: 700;
    color: #6b3304;
    padding: 0 0.15rem;
}

/* Provisional-martyr warning — the student is applying on قناة الشهداء with a
   still-pending martyr application. Deliberately large + high-contrast amber so
   it cannot be missed: his choices fall back to the general channel if the
   application is not approved in time. */
.stauth-provisional-martyr-warning {
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--st-r-md);
    background: rgba(217, 119, 6, 0.14);
    border: 2px solid rgba(217, 119, 6, 0.55);
    color: #7a3d05;
    font-family: var(--st-font-body);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.6;
}

.stauth-provisional-martyr-warning i {
    color: #b45309;
    flex-shrink: 0;
    font-size: 1.35rem;
}

.stauth-cross-mode-preview-btn {
    margin-inline-start: auto;
    padding: 0.4rem 0.85rem;
    border-radius: var(--st-r-sm);
    border: 1px solid rgba(180, 83, 9, 0.55);
    background: #fff;
    color: #b45309;
    font-family: var(--st-font-body);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.stauth-cross-mode-preview-btn:hover {
    background: #b45309;
    color: #fff;
    border-color: #b45309;
}

.stauth-cross-mode-preview-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==============================================================
   Revert-edit button — secondary action beneath the save CTA.
   Lighter treatment (outlined, not filled) so it doesn't compete
   with the primary save button visually, but still clearly
   clickable. Only rendered when the student has a saved
   submission to revert to.
   ============================================================== */
.stauth-revert {
    margin: 0.55rem 0 0;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1rem;
    border: 1.5px solid var(--st-border);
    background: var(--st-parchment);
    color: var(--st-ink);
    border-radius: var(--st-r-md);
    font-family: var(--st-font-body);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background-color .15s var(--st-ease),
                border-color .15s var(--st-ease),
                color .15s var(--st-ease);
}

.stauth-revert:hover,
.stauth-revert:focus-visible {
    background: #fff;
    border-color: var(--st-wine);
    color: var(--st-wine);
    outline: none;
}

.stauth-revert i { font-size: 0.92rem; }

/* Input + addon row — pairs the dept select with the inline "اضافة"
   button so the action sits attached to the field instead of stealing
   its own row in the form. */
.stauth-input-row {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.stauth-input-row > .stauth-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.stauth-add {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    padding: 0;
    border: 0;
    border-radius: var(--st-r-md);
    color: #fff;
    background: linear-gradient(155deg, var(--st-teal) 0%, var(--st-teal-deep) 100%);
    cursor: pointer;
    font-size: 1.1rem;
    transition: filter .15s var(--st-ease),
                box-shadow .18s var(--st-ease),
                transform .12s var(--st-ease);
    box-shadow: 0 8px 18px -10px rgba(58, 143, 163, 0.45);
}

.stauth-add:hover:not(:disabled),
.stauth-add:focus-visible:not(:disabled) {
    filter: brightness(1.06);
    outline: none;
    box-shadow: 0 12px 22px -12px rgba(58, 143, 163, 0.55);
}

.stauth-add:active:not(:disabled) { transform: translateY(1px); }

.stauth-add:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.stauth-add i { font-size: 1rem; }

@media (max-width: 420px) {
    .stauth-add { width: 48px; }
}

/* ==============================================================
   Hero chip variants (header-row badges).
   Sum moved to the identity feature strip — no --sum chip here.
   ============================================================== */
/* Martyr-family chip — distinct wine-tinted badge so the category is
   immediately readable next to the identity chips. Rendered only when
   martyr_family > 0. */
.stauth-hero-chip--martyr {
    background: rgba(110, 29, 50, 0.38);
    border-color: rgba(245, 232, 214, 0.40);
}
.stauth-hero-chip--martyr i { color: var(--st-cream); }

.stauth-hero-chip--try {
    background: rgba(58, 143, 163, 0.22);
    border-color: rgba(245, 232, 214, 0.35);
}

.stauth-hero-chip--try i { color: var(--st-cream); }

.stauth-hero-chip--try .stauth-hero-chip-num {
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--st-cream);
    padding-inline-start: 0.15rem;
    display: inline-flex;
    align-items: baseline;
    gap: 0.12rem;
}

.stauth-hero-chip--try .stauth-hero-chip-sep {
    opacity: 0.55;
    font-weight: 600;
    padding: 0 0.1rem;
}

/* Tries-exhausted state — red-ish accent so it reads as "spent". */
.stauth-hero-chip--try-max {
    background: rgba(159, 18, 57, 0.28);
    border-color: rgba(254, 240, 246, 0.45);
}

.stauth-hero-chip--try-max i,
.stauth-hero-chip--try-max .stauth-hero-chip-num {
    color: #ffe0ea;
}

/* ==============================================================
   "عرض الاستمارة" chip-button — opens the receipt populated from
   the student's current live submission. Glass-style so it reads as
   an action against the hero band's wine/teal gradient, matching
   the deleted .stauth-hero-pdf-link footprint.
   ============================================================== */
.stauth-hero-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1rem;
    border-radius: var(--st-r-pill);
    background: rgba(255, 255, 255, 0.14);
    color: var(--st-cream);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 160ms var(--st-ease),
                border-color 160ms var(--st-ease),
                transform 160ms var(--st-ease);
}

.stauth-hero-view-btn:hover,
.stauth-hero-view-btn:focus-visible {
    background: rgba(255, 255, 255, 0.22);
    border-color: var(--st-cream);
    transform: translateY(-1px);
    color: #fff;
}

.stauth-hero-view-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.stauth-hero-view-btn i {
    font-size: 1.05rem;
    color: var(--st-cream);
}

/* ==============================================================
   Channel-window timeline — replaces the plain date rows with a
   visual start/end spread. Two dated end-caps bracket a progress
   bar; "اليوم" pip sits at the elapsed-% along the bar. RTL: start
   end-cap on the right, end end-cap on the left.
   ============================================================== */
.stauth-timeline {
    margin-top: 1.2rem;
}

.stauth-timeline-ends {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.stauth-timeline-end {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem;
    background: var(--st-parchment);
    border: 1px solid var(--st-border);
    border-radius: var(--st-r-md);
    min-width: 0;
    position: relative;
    overflow: hidden;
}

.stauth-timeline-end::before {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--st-wine);
}

.stauth-timeline-end--finish::before {
    background: var(--st-teal);
}

.stauth-timeline-end-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--st-muted);
    font-weight: 600;
}

.stauth-timeline-end-kicker i {
    color: var(--st-wine);
    font-size: 0.8rem;
}

.stauth-timeline-end--finish .stauth-timeline-end-kicker i {
    color: var(--st-teal);
}

.stauth-timeline-end-day {
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--st-wine-deep);
    margin-top: 0.15rem;
}

.stauth-timeline-end--finish .stauth-timeline-end-day {
    color: var(--st-teal-deep);
}

.stauth-timeline-end-sub {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--st-ink);
}

.stauth-timeline-end-sub .stauth-num {
    font-family: var(--st-font-display-en);
    font-weight: 700;
    color: var(--st-ink-soft);
}

/* Bar — parchment-soft track, wine fill. Fill is anchored at the
   inline-start so in RTL it grows leftward from the start date. */
.stauth-timeline-bar {
    position: relative;
    height: 8px;
    border-radius: var(--st-r-pill);
    background: var(--st-parchment-soft);
    margin: 0.85rem 0.5rem 2.3rem;
    overflow: visible;
}

.stauth-timeline-bar-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: linear-gradient(to var(--st-logical-end, left),
                 var(--st-wine) 0%, var(--st-wine-deep) 100%);
    border-radius: var(--st-r-pill);
    max-width: 100%;
    transition: width 400ms var(--st-ease);
}

/* Today marker — thin teal stem + pip + label */
.stauth-timeline-bar-today {
    position: absolute;
    top: -7px;
    bottom: -7px;
    width: 2px;
    background: var(--st-teal-deep);
    border-radius: 2px;
    pointer-events: none;
}

.stauth-timeline-bar-today-pip {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--st-teal);
    border: 2px solid #fff;
    box-shadow: 0 0 0 3px rgba(58, 143, 163, 0.22),
                0 2px 4px rgba(31, 45, 64, 0.18);
    transform: translate(-50%, -50%);
}

[dir="rtl"] .stauth-timeline-bar-today-pip {
    transform: translate(50%, -50%);
}

.stauth-timeline-bar-today-label {
    position: absolute;
    top: 18px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--st-teal-deep);
    white-space: nowrap;
    background: #fff;
    padding: 0.05rem 0.45rem;
    border-radius: var(--st-r-pill);
    border: 1px solid rgba(58, 143, 163, 0.3);
}

[dir="rtl"] .stauth-timeline-bar-today-label {
    transform: translateX(50%);
}

/* Summary row — "تبقى N أيام" */
.stauth-timeline-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: var(--st-r-pill);
    background: var(--st-wine-soft);
    border: 1px solid rgba(152, 28, 75, 0.22);
    color: var(--st-wine-deep);
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 0.92rem;
}

.stauth-timeline-summary i {
    align-self: center;
    font-size: 0.9rem;
    color: var(--st-wine);
}

.stauth-timeline-summary strong {
    font-family: var(--st-font-display-en);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--st-wine-deep);
}

.stauth-timeline-summary--pending {
    background: rgba(42, 61, 86, 0.06);
    border-color: rgba(42, 61, 86, 0.2);
    color: var(--st-navy);
}

.stauth-timeline-summary--pending i,
.stauth-timeline-summary--pending strong {
    color: var(--st-navy);
}

/* Narrow phones — stack the two end-caps so numbers stay legible. */
@media (max-width: 480px) {
    .stauth-timeline-ends {
        flex-direction: column;
        align-items: stretch;   /* fill the column width instead of flex-end-hugging */
        gap: 0.6rem;
    }
    .stauth-timeline-end {
        padding: 0.7rem 0.9rem;
        width: 100%;
    }
    .stauth-timeline-end-day {
        font-size: 1.55rem;
    }
    .stauth-timeline-bar {
        margin: 1rem 0.25rem 2rem;
    }
    .stauth-timeline-summary {
        width: 100%;
        justify-content: center;
    }
}

/* Narrow 2-col grid (the desktop layout's channel card can drop under
   ~420px): keep the end-caps readable by trimming their padding and
   letting them wrap gracefully instead of squishing the digits. */
@media (min-width: 1024px) and (max-width: 1180px) {
    .stauth-timeline-ends {
        gap: 0.55rem;
    }
    .stauth-timeline-end {
        padding: 0.6rem 0.75rem;
    }
    .stauth-timeline-end-day {
        font-size: 1.65rem;
    }
}

/* ==============================================================
   Post-save receipt — takes the apply card's slot in the grid after
   the student saves. Teal tab signals "accepted / finalized". The
   .stauth-receipt-doc block is what the browser's print dialog sees
   (everything else is hidden via @media print at the bottom of this
   file), so the doc block is styled to read as a clean A4 page.
   ============================================================== */
.stauth-receipt {
    border: 1px solid rgba(58, 143, 163, 0.35);
    background: linear-gradient(160deg, #ffffff 0%, rgba(58, 143, 163, 0.06) 100%);
}

.stauth-receipt .stauth-card-title {
    color: var(--st-teal-deep);
}

.stauth-receipt-top {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.stauth-receipt-top-text {
    flex: 1 1 260px;
    min-width: 0;
}

.stauth-receipt-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.stauth-receipt-actions .stauth-submit {
    margin: 0;
    white-space: nowrap;
}

/* "رجوع" control — wine-outlined secondary button matched to the
   print button's height so the two sit as a pair. Only shown when
   the receipt was opened from the view-submission flow (canReturn=true). */
.stauth-receipt-close {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-radius: var(--st-r-pill);
    background: transparent;
    color: var(--st-wine-deep);
    border: 1.5px solid var(--st-wine-deep);
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 160ms var(--st-ease),
                color 160ms var(--st-ease),
                transform 160ms var(--st-ease);
}

.stauth-receipt-close:hover,
.stauth-receipt-close:focus-visible {
    background: var(--st-wine-deep);
    color: #fff;
    transform: translateY(-1px);
}

.stauth-submit--pdf {
    background: linear-gradient(100deg, var(--st-teal) 0%, var(--st-teal-deep) 100%);
    color: #fff;
}

.stauth-submit--pdf:hover,
.stauth-submit--pdf:focus-visible {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

/* Printable receipt body. Sized to resemble the old TCPDF layout so
   the printed page feels familiar. `print-color-adjust: exact` cascades
   down so every colored child (wine table header, parchment KV grid,
   wine-deep stamp, etc.) keeps its backgrounds when sent to a printer
   or "Save as PDF". Without it, browsers strip backgrounds to save ink. */
.stauth-receipt-doc {
    position: relative;
    isolation: isolate;
    border: 1px solid var(--st-border);
    border-radius: var(--st-r-md);
    background: var(--st-card);
    padding: 1.4rem 1.4rem 1.6rem;
    overflow: hidden;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* Centered faint logo — sits behind the content (z-index: 0 under the
   content wrappers). Matches the old TCPDF watermark at ~6% alpha. */
.stauth-receipt-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
}

.stauth-receipt-watermark img {
    width: min(60%, 320px);
    height: auto;
    object-fit: contain;
}

/* Ensure content sits above the watermark. */
.stauth-receipt-doc > .stauth-receipt-header,
.stauth-receipt-doc > .stauth-receipt-grid,
.stauth-receipt-doc > .stauth-receipt-subhead,
.stauth-receipt-doc > .stauth-receipt-table,
.stauth-receipt-doc > .stauth-receipt-sign,
.stauth-receipt-doc > .stauth-receipt-foot {
    position: relative;
    z-index: 1;
}

/* Full-width grid cell — spans both columns for long values (name,
   school, source university). */
.stauth-receipt-kv--full {
    grid-column: 1 / -1;
}

.stauth-receipt-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid var(--st-wine);
    margin-bottom: 1rem;
}

.stauth-receipt-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

.stauth-receipt-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.stauth-receipt-title h3 {
    margin: 0.35rem 0 0;
    font-family: var(--st-font-display-ar);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--st-wine-deep);
    letter-spacing: 0.01em;
}

.stauth-receipt-title p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--st-muted);
    letter-spacing: 0.04em;
}

/* Ministry / department lines above the form title.
   Bold and slightly larger than the muted HEPIQ line so the
   official identity reads first on the printed receipt. */
.stauth-receipt-title .stauth-receipt-ministry {
    margin: 0;
    font-family: var(--st-font-display-ar);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--st-wine-deep);
    line-height: 1.35;
    letter-spacing: 0;
}

.stauth-receipt-title .stauth-receipt-ministry + .stauth-receipt-ministry {
    margin-top: 0.1rem;
}

/* Academic year line directly under the form title. */
.stauth-receipt-title .stauth-receipt-year {
    margin: 0.25rem 0 0;
    font-family: var(--st-font-display-ar);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--st-wine-deep);
    letter-spacing: 0;
}

.stauth-receipt-stamp {
    align-self: flex-start;
    padding: 0.45rem 0.75rem;
    border-radius: var(--st-r-sm);
    background: var(--st-wine-deep);
    color: #fff;
    font-family: var(--st-font-display-en);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.stauth-receipt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1.3rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--st-border);
    border-radius: var(--st-r-sm);
    background: var(--st-parchment);
    margin-bottom: 1.1rem;
}

.stauth-receipt-kv {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.stauth-receipt-k {
    font-size: 0.8rem;
    color: var(--st-muted);
    font-weight: 600;
}

.stauth-receipt-v {
    font-size: 1rem;
    color: var(--st-ink);
    font-weight: 700;
    word-break: break-word;
}

.stauth-receipt-subhead {
    margin: 0 0 0.6rem;
    font-family: var(--st-font-display-ar);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--st-navy);
    padding-inline-end: 0.2rem;
    border-inline-end: 3px solid var(--st-wine);
    padding-inline-start: 0.6rem;
}

.stauth-receipt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.stauth-receipt-table thead {
    background: var(--st-wine);
    color: #fff;
}

.stauth-receipt-table th,
.stauth-receipt-table td {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--st-border);
    text-align: right;
    vertical-align: middle;
}

.stauth-receipt-table th {
    font-weight: 700;
    font-size: 0.9rem;
    border-color: var(--st-wine-deep);
}

.stauth-receipt-table .stauth-receipt-th-n,
.stauth-receipt-table .stauth-receipt-td-n {
    width: 140px;
    white-space: nowrap;
    text-align: center;
}

.stauth-receipt-table .stauth-receipt-td-n {
    font-weight: 800;
    color: var(--st-wine-deep);
    background: rgba(152, 28, 75, 0.06);
}

.stauth-receipt-table tbody tr:nth-child(even) td {
    background: var(--st-parchment-soft);
}

.stauth-receipt-foot {
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--st-border);
    text-align: center;
    font-size: 0.8rem;
    color: var(--st-muted);
}

.stauth-receipt-hash {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--st-muted);
    word-break: break-all;
    direction: ltr;
    text-align: center;
}

.stauth-receipt-hash-v {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.02em;
}

/* Signature + fingerprint area — empty bordered box the student signs
   and thumb-prints after printing. Sits at the foot of the form. */
.stauth-receipt-sign {
    margin-top: 1.4rem;
    display: flex;
    justify-content: flex-start;
}

.stauth-receipt-sign-box {
    width: min(360px, 100%);
    border: 1px solid var(--st-border);
    border-radius: var(--st-r-sm);
    padding: 0.7rem 0.9rem 0;
    display: flex;
    flex-direction: column;
}

.stauth-receipt-sign-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--st-ink);
}

.stauth-receipt-sign-area {
    display: block;
    min-height: 120px;
}

/* Receipt in its "final attempt used" state — wine tint on the
   outer card so the student reads it as "done, no more saves". */
.stauth-receipt--final {
    background: linear-gradient(160deg, #ffffff 0%, rgba(159, 18, 57, 0.06) 100%);
    border-color: rgba(159, 18, 57, 0.3);
}

.stauth-receipt--final .stauth-card-title {
    color: var(--st-wine-deep);
}

/* ==============================================================
   Print stylesheet — the student presses "طباعة / حفظ كـ PDF" and
   the browser dialog offers either a real print or "Save as PDF".
   We hide everything except the receipt body (#stauthReceipt) and
   reset its paddings so it sits cleanly on an A4 sheet.
   `print-color-adjust: exact` is duplicated on every colored element
   so the wine table header, wine stamp, parchment grid, and faint
   watermark survive the browser's default "strip backgrounds to save
   ink" rule.
   ============================================================== */
@media print {
    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .env-test-banner,
    .wf-stepnav,
    .wf-review-banner,
    .stauth-appbar,
    .stauth-hero-band,
    .stauth-channel-card,
    .stauth-channel-backrow,
    .stauth-grid-col--info,
    .stauth-card--compact,
    .stauth-apply,
    .stauth-locked-card,
    .stauth-selected-field,
    .stauth-receipt-top,
    #stauthReceiptHint,
    #stauthTeacherReceiptHint,
    .stauth-save-hint,
    .stauth-card-tab {
        display: none !important;
    }

    /* Collapse the desktop two-column teacher grid so the receipt-only
       column expands to the full printable width. */
    .stauth-welcome-wrap,
    .stauth-page,
    .stauth-grid,
    .stauth-grid-col,
    .stauth-grid-col--apply {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Re-hide the info side column AFTER the .stauth-grid-col block rule
       above — same specificity, so the later rule wins. Without this,
       the "ضوابط تعديل الترشيح" panel inherits display:block from
       .stauth-grid-col and ends up on the printed sheet. */
    .stauth-grid-col--info,
    .stauth-rules {
        display: none !important;
    }

    /* Outer card wrapper — strip padding/border; DON'T force the
       background since the receipt-doc inside handles its own. */
    .stauth-card {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
        background: #fff !important;
    }

    .stauth-receipt-doc {
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Wine-banded header rule — print engines will otherwise drop the
       2px wine bottom border. Explicit !important keeps it visible. */
    .stauth-receipt-header {
        margin-top: 0;
        border-bottom: 2px solid var(--st-wine) !important;
    }

    .stauth-receipt-stamp,
    .stauth-receipt-grid,
    .stauth-receipt-table thead,
    .stauth-receipt-table .stauth-receipt-td-n,
    .stauth-receipt-table tbody tr:nth-child(even) td,
    .stauth-receipt-watermark {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Fade the watermark a touch so it doesn't over-darken on print. */
    .stauth-receipt-watermark {
        opacity: 0.06 !important;
    }

    .stauth-receipt-table thead {
        /* Repeat the header on each printed page when the picks list
           overflows a single page. */
        display: table-header-group;
    }

    .stauth-receipt-table tr,
    .stauth-receipt-table th,
    .stauth-receipt-table td {
        page-break-inside: avoid;
    }

    /* Tighten the printed table so a full pick list lands on one A4
       sheet. Reduce padding (the main driver of row height) and font,
       and trim the surrounding margins around the subhead and foot. */
    .stauth-receipt-table {
        font-size: 0.82rem !important;
    }

    .stauth-receipt-table th,
    .stauth-receipt-table td {
        padding: 0.22rem 0.55rem !important;
        line-height: 1.25 !important;
    }

    .stauth-receipt-table th {
        font-size: 0.82rem !important;
    }

    /* Sparse-receipt scaling on the printed sheet — same row-count tiers
       as on screen, but with the !important needed to win over the
       tighten-for-print rules above. The goal is the same: make a short
       pick list fill the A4 page instead of clustering at the top. */
    .stauth-receipt-table[data-rows="1"] th,
    .stauth-receipt-table[data-rows="1"] td,
    .stauth-receipt-table[data-rows="2"] th,
    .stauth-receipt-table[data-rows="2"] td,
    .stauth-receipt-table[data-rows="3"] th,
    .stauth-receipt-table[data-rows="3"] td {
        padding: 1.5rem 1rem !important;
        font-size: 1.2rem !important;
        line-height: 1.45 !important;
    }
    .stauth-receipt-table[data-rows="1"] th,
    .stauth-receipt-table[data-rows="2"] th,
    .stauth-receipt-table[data-rows="3"] th {
        font-size: 1.05rem !important;
    }

    .stauth-receipt-table[data-rows="4"] th,
    .stauth-receipt-table[data-rows="4"] td,
    .stauth-receipt-table[data-rows="5"] th,
    .stauth-receipt-table[data-rows="5"] td,
    .stauth-receipt-table[data-rows="6"] th,
    .stauth-receipt-table[data-rows="6"] td {
        padding: 1.3rem 0.95rem !important;
        font-size: 1.15rem !important;
        line-height: 1.45 !important;
    }
    .stauth-receipt-table[data-rows="4"] th,
    .stauth-receipt-table[data-rows="5"] th,
    .stauth-receipt-table[data-rows="6"] th {
        font-size: 1rem !important;
    }

    .stauth-receipt-table[data-rows="7"] th,
    .stauth-receipt-table[data-rows="7"] td,
    .stauth-receipt-table[data-rows="8"] th,
    .stauth-receipt-table[data-rows="8"] td,
    .stauth-receipt-table[data-rows="9"] th,
    .stauth-receipt-table[data-rows="9"] td,
    .stauth-receipt-table[data-rows="10"] th,
    .stauth-receipt-table[data-rows="10"] td {
        padding: 0.85rem 0.8rem !important;
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
    }
    .stauth-receipt-table[data-rows="7"] th,
    .stauth-receipt-table[data-rows="8"] th,
    .stauth-receipt-table[data-rows="9"] th,
    .stauth-receipt-table[data-rows="10"] th {
        font-size: 0.95rem !important;
    }

    .stauth-receipt-subhead {
        margin: 0.4rem 0 0.35rem !important;
        font-size: 0.95rem !important;
    }

    .stauth-receipt-grid {
        padding: 0.45rem 0.7rem !important;
        margin-bottom: 0.5rem !important;
        gap: 0.3rem 0.9rem !important;
    }

    .stauth-receipt-kv {
        gap: 0.05rem !important;
    }

    .stauth-receipt-k {
        font-size: 0.68rem !important;
        line-height: 1.15 !important;
    }

    .stauth-receipt-v {
        font-size: 0.82rem !important;
        line-height: 1.2 !important;
    }

    .stauth-receipt-header {
        padding-bottom: 0.55rem !important;
        margin-bottom: 0.6rem !important;
    }

    .stauth-receipt-foot {
        margin-top: 0.55rem !important;
        padding-top: 0.4rem !important;
    }

    /* The wafedeen form carries the full student dossier + activation data
       above the picks table, so the shared "inflate a sparse table to fill
       an empty page" tiers (data-rows 1..10) would overflow onto a second
       sheet. The id selector outranks the .table[data-rows] tiers, pinning
       the picks rows to a compact, constant height for this form only. */
    #stauthWafedeenReceiptDoc .stauth-receipt-table th,
    #stauthWafedeenReceiptDoc .stauth-receipt-table td {
        padding: 0.24rem 0.55rem !important;
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
    }

    /* Keep the wafedeen receipt on a single A4 sheet. The form carries the full
       dossier (10-cell student grid) + activation + form data + up to 5 picks +
       a signature box, so at Cairo's real metrics it runs right up against — and
       just over — the A4 printable height, orphaning the footer onto a 2nd page.
       Browsers also silently enlarge the top/bottom margin to fit the print
       date/URL header when it's enabled, shrinking the usable area further, so
       we compact hard for a big safety margin rather than shave to the pixel.
       Claw back slack from every block that has give — header, KV grids, the
       repeated subheads, the oversized signature area, and the footer. All
       id-scoped so other channels' receipts (which fit fine) are untouched, and
       nothing here drops data. */
    #stauthWafedeenReceiptDoc {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-header {
        padding-bottom: 0.4rem !important;
        margin-bottom: 0.5rem !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-logo img {
        width: 40px !important;
        height: 40px !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-subhead {
        margin: 0.28rem 0 0.2rem !important;
        font-size: 0.9rem !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-grid {
        padding: 0.35rem 0.6rem !important;
        margin-bottom: 0.35rem !important;
        gap: 0.18rem 0.8rem !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-kv { gap: 0.02rem !important; }
    #stauthWafedeenReceiptDoc .stauth-receipt-k {
        font-size: 0.66rem !important;
        line-height: 1.1 !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-v {
        font-size: 0.78rem !important;
        line-height: 1.15 !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-sign {
        margin-top: 0.45rem !important;
        page-break-inside: avoid !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-sign-box {
        padding: 0.4rem 0.7rem 0 !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-sign-label { font-size: 0.8rem !important; }
    #stauthWafedeenReceiptDoc .stauth-receipt-sign-area {
        min-height: 46px !important;
    }
    #stauthWafedeenReceiptDoc .stauth-receipt-foot {
        margin-top: 0.4rem !important;
        padding-top: 0.3rem !important;
    }

    /* Keep the signature/fingerprint box intact across a page break. */
    .stauth-receipt-sign {
        margin-top: 1.2rem !important;
        page-break-inside: avoid;
    }

    /* ── Long pick list (>25 options): flow the rows into TWO columns so the
       whole list still lands on a single A4 sheet. The channel JS adds
       .stauth-receipt-table--split when picks.length > 25. The thead is
       dropped (each row already carries its own number/"الاختيار رقم (N)"
       label) and tbody rows flow newspaper-style into 2 balanced columns —
       in RTL the first column sits on the right, matching reading order.
       Mirror of the rule in centeral_channel_admin/student_choices.css —
       keep both sides in sync. */
    .stauth-receipt-table--split {
        display: block !important;
        font-size: 0.72rem !important;
    }
    .stauth-receipt-table--split thead { display: none !important; }
    .stauth-receipt-table--split tbody {
        display: block !important;
        column-count: 2 !important;
        column-gap: 0.8rem !important;
        column-fill: balance !important;
    }
    .stauth-receipt-table--split tbody tr {
        display: flex !important;
        align-items: stretch;
        break-inside: avoid !important;
        -webkit-column-break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .stauth-receipt-table--split tbody td {
        display: block !important;
        padding: 0.18rem 0.4rem !important;
        line-height: 1.2 !important;
        border: 1px solid var(--st-border) !important;
    }
    .stauth-receipt-table--split tbody .stauth-receipt-td-n {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 2.4rem;
        white-space: normal !important;
    }
    .stauth-receipt-table--split tbody td:last-child {
        flex: 1 1 auto !important;
        min-width: 0;
    }

    /* ── Count-aware shrink so 26–50+ picks ALWAYS land on ONE A4 sheet ──
       The base --split rule (0.72rem) is comfortable up to ~29 picks, but
       at 40–50 picks each column holds 20–25 rows and a long college name
       wrapping to 2–3 lines used to push the last row — or just the footer
       hash — onto a lonely 2nd page. These bands shrink the row font /
       padding / line-height as the count climbs so the whole list + footer
       stay on one page. JS already stamps data-rows="N" for every count,
       and inside a split table the count is always >25, so the substring
       selectors resolve to clean ranges with no JS change:
         [data-rows^="3"] → 30–39, [data-rows^="4"] → 40–49,
         [data-rows^="5"] → 50–59 (+ the explicit 60).
       Keep the student (student_auth.css) and admin (student_choices.css)
       copies in sync. */
    .stauth-receipt-table--split[data-rows^="3"] tbody td {
        font-size: 0.66rem !important;
        padding: 0.14rem 0.36rem !important;
        line-height: 1.18 !important;
    }
    .stauth-receipt-table--split[data-rows^="4"] tbody td {
        font-size: 0.6rem !important;
        padding: 0.11rem 0.32rem !important;
        line-height: 1.16 !important;
    }
    .stauth-receipt-table--split[data-rows^="5"] tbody td,
    .stauth-receipt-table--split[data-rows="60"] tbody td {
        font-size: 0.52rem !important;
        padding: 0.09rem 0.28rem !important;
        line-height: 1.13 !important;
    }

    /* Long college names wrap inside the narrow 2-column cells, which can
       push the footer (hash + "تمت الطباعة") onto a second page. Claw back
       vertical space from the surrounding chrome — header, KV grid,
       subhead, footer — but ONLY when the split table is present, so normal
       receipts keep their roomy layout. Table rows are left untouched. */
    .stauth-receipt-doc:has(.stauth-receipt-table--split) .stauth-receipt-logo img {
        width: 40px !important;
        height: 40px !important;
    }
    .stauth-receipt-doc:has(.stauth-receipt-table--split) .stauth-receipt-header {
        padding-bottom: 0.3rem !important;
        margin-bottom: 0.3rem !important;
    }
    .stauth-receipt-doc:has(.stauth-receipt-table--split) .stauth-receipt-grid {
        padding: 0.3rem 0.6rem !important;
        margin-bottom: 0.3rem !important;
        gap: 0.15rem 0.8rem !important;
    }
    .stauth-receipt-doc:has(.stauth-receipt-table--split) .stauth-receipt-subhead {
        margin: 0.2rem 0 0.15rem !important;
    }
    .stauth-receipt-doc:has(.stauth-receipt-table--split) .stauth-receipt-foot {
        margin-top: 0.25rem !important;
        padding-top: 0.2rem !important;
    }

    @page {
        size: A4;
        margin: 10mm;
    }
}

/* Locked card — rendered server-side when tries are exhausted on
   page load. Navy tab + wine banner to convey "finished". */
.stauth-locked-card {
    border: 1px solid rgba(31, 45, 64, 0.18);
    background: linear-gradient(160deg, #ffffff 0%, rgba(42, 61, 86, 0.05) 100%);
}

.stauth-locked-card .stauth-card-title {
    color: var(--st-navy);
}

/* Narrow phones — rein in padding so cards don't crowd the edges. */
@media (max-width: 380px) {
    .stauth-card { padding: 2.3rem 1.2rem 1.4rem; }
    .stauth-card-tab { inset-inline-start: 1.2rem; }
    .stauth-hero-logo { width: 60px; height: 60px; }
    .stauth-hero-mark { font-size: 1.7rem; }
    .stauth-hero-tag { font-size: 0.85rem; }
    .stauth-hero-band { padding: 1.5rem 1.25rem; }
    .stauth-hero-band-watermark { width: 160px; height: 160px; bottom: -30px; inset-inline-end: -25px; }
}

/* ==============================================================
   SweetAlert2 — re-skin in HEPIQ tokens.
   The theme's sweetalert.css references --bg-primary / --text-primary
   from the admin Hive theme; those vars don't exist here, so without
   these overrides the popup paints transparent on top of the backdrop
   blur and all the text collapses into an unreadable dark wash.
   ============================================================== */
.swal2-popup {
    background: var(--st-card) !important;
    border: 1px solid var(--st-border) !important;
    color: var(--st-ink) !important;
    font-family: var(--st-font-body) !important;
    backdrop-filter: none !important;
}

.swal2-title {
    color: var(--st-ink) !important;
    font-family: var(--st-font-display-ar) !important;
}

.swal2-html-container {
    color: var(--st-ink-soft) !important;
}

.swal2-html-container .swal2-input {
    background: #fff !important;
    border: 1px solid var(--st-border) !important;
    color: var(--st-ink) !important;
    border-radius: var(--st-r-sm) !important;
    box-shadow: none !important;
    font-family: var(--st-font-body) !important;
}

.swal2-html-container .swal2-input::placeholder {
    color: var(--st-muted) !important;
    opacity: 1;
}

.swal2-html-container .swal2-input:focus {
    border-color: var(--st-wine) !important;
    box-shadow: 0 0 0 4px var(--st-wine-soft) !important;
}

.swal2-actions .swal2-confirm {
    background: linear-gradient(155deg, var(--st-wine) 0%, var(--st-wine-deep) 100%) !important;
    color: #fff !important;
    border: 0 !important;
    font-family: var(--st-font-display-ar) !important;
    font-weight: 700 !important;
}

.swal2-actions .swal2-cancel {
    background: var(--st-parchment-soft) !important;
    color: var(--st-ink) !important;
    border: 1px solid var(--st-border) !important;
    font-family: var(--st-font-display-ar) !important;
}

.swal2-validation-message {
    background: var(--st-danger-soft) !important;
    color: var(--st-danger) !important;
    border-radius: var(--st-r-sm) !important;
}

/* ==============================================================
   Swal2 — small-screen responsive clamp.
   Default popup width is 32em which overflows phone viewports in
   RTL (the popup drifts off the right edge on ≤480px screens).
   Clamping the popup to the visible viewport minus a gutter, and
   forcing the container to have matching padding, keeps it
   centered and readable. Also constrains the inputs so they never
   overflow the popup on narrow screens.
   ============================================================== */
@media (max-width: 560px) {
    .swal2-container { padding: 0.75rem !important; }

    .swal2-popup {
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        padding: 1.25rem 1rem !important;
    }

    .swal2-html-container {
        margin: 0.75rem 0 0 !important;
        padding: 0 !important;
    }

    .swal2-html-container .swal2-input {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.6rem 0 0 !important;
        box-sizing: border-box;
    }

    /* Wrapper we inject for the password + eye toggle: match the
       swal2-input spacing so the toggle stays centered on the input
       even after the responsive width clamp above. */
    .swal2-html-container .stauth-pw-wrap {
        width: 100% !important;
        margin: 0.6rem 0 0 !important;
    }

    .swal2-html-container .stauth-pw-wrap .swal2-input {
        margin: 0 !important;
    }

    /* Stack Confirm above Cancel so the primary action is the
       top, most-tappable row on a small screen. */
    .swal2-actions {
        flex-direction: column !important;
        gap: 0.55rem !important;
        width: 100% !important;
    }

    .swal2-actions .swal2-confirm,
    .swal2-actions .swal2-cancel {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ============================================================
   Channels landing page — list of enrolled channels with
   clickable cards that route to the matching forms page.
   ============================================================ */

.stauth-channels-section {
    margin-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.stauth-channels-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-inline-start: 0.25rem;
}

.stauth-channels-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--st-navy);
    letter-spacing: -0.01em;
}

.stauth-channels-sub {
    margin: 0;
    font-size: 0.95rem;
    color: var(--st-navy);
    opacity: 0.75;
}

.stauth-channels-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 960px) {
    .stauth-channels-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mode chooser (channel_choose.php): the two type cards (العامة / الشهداء)
   can hold different amounts of body text, so force equal-height tiles. The
   grid stretches each <a>/locked <section> to the row height; the card inside
   the <a> then fills that height so both columns read the same size. */
.stauth-channels-list--modes .stauth-channel-link,
.stauth-channels-list--modes .stauth-channel-link .stauth-channel-card {
    height: 100%;
}
.stauth-channels-list--modes .stauth-channel-card {
    display: flex;
    flex-direction: column;
}
.stauth-channels-list--modes .stauth-channel-card .stauth-channel-cta {
    margin-top: auto;  /* pin the CTA to the bottom so cards align */
}

/* <a> that wraps a clickable channel card — kill the default
   anchor styling so the card itself stays the visual unit. */
.stauth-channel-link {
    display: block;
    text-decoration: none;
    color: inherit;
    outline: none;
}

.stauth-channel-link:focus-visible .stauth-channel-card {
    box-shadow: 0 0 0 3px var(--st-teal-soft), 0 0 0 4.5px var(--st-teal);
}

.stauth-channel-card.is-clickable {
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.stauth-channel-link:hover .stauth-channel-card.is-clickable {
    transform: translateY(-2px);
    border-color: var(--st-teal);
    box-shadow: 0 10px 24px -14px rgba(58, 143, 163, 0.45);
}

/* "Go to the form" footer row — only renders inside clickable cards
   so the card's CTA is explicit even though the whole surface is a link.
   Rendered as a filled button (not a quiet footer caption) so the tap
   target reads as an action even at a glance — QA flagged the previous
   text-only treatment as not obviously clickable. */
.stauth-channel-cta {
    margin-top: 1.1rem;
    padding: 0.75rem 1.1rem;
    border-radius: var(--st-r-md);
    background: var(--st-teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 16px -10px rgba(58, 143, 163, 0.55);
    transition: background 160ms ease, box-shadow 160ms ease;
}

.stauth-channel-cta i {
    transition: transform 160ms ease;
}

.stauth-channel-link:hover .stauth-channel-cta {
    background: var(--st-teal-deep);
    box-shadow: 0 10px 22px -10px rgba(58, 143, 163, 0.65);
}

.stauth-channel-link:hover .stauth-channel-cta i {
    transform: translateX(-3px);  /* RTL: arrow drifts to the start edge on hover */
}

/* Mode-chooser identity (channel_choose.php): القناة العامة keeps the default
   teal accent; قناة الشهداء reads wine — its hexagon tab already is wine, so we
   carry the same brand tone through the CTA, hover border/shadow and focus ring
   to make the two cards distinct at a glance. Wine and teal are both in the
   brand tri-tone, so this stays inside the existing palette. Status pills stay
   semantic (open/closed) and are left untouched. */
.stauth-channel-card--martyr .stauth-channel-cta {
    background: var(--st-wine);
    box-shadow: 0 6px 16px -10px rgba(152, 28, 75, 0.55);
}
.stauth-channel-link:hover .stauth-channel-card--martyr .stauth-channel-cta {
    background: var(--st-wine-deep);
    box-shadow: 0 10px 22px -10px rgba(152, 28, 75, 0.65);
}
.stauth-channel-link:hover .stauth-channel-card--martyr.is-clickable {
    border-color: var(--st-wine);
    box-shadow: 0 10px 24px -14px rgba(152, 28, 75, 0.45);
}
.stauth-channel-link:focus-visible .stauth-channel-card--martyr {
    box-shadow: 0 0 0 3px var(--st-wine-soft), 0 0 0 4.5px var(--st-wine);
}

/* Back-to-channels link on the forms page. */
.stauth-channel-backrow {
    margin: 1.1rem 0 0.25rem;
    display: flex;
    justify-content: flex-start;
}

.stauth-channel-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: var(--st-teal-soft);
    color: var(--st-teal-deep);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 160ms ease, background 160ms ease;
}

.stauth-channel-back:hover {
    border-color: var(--st-teal);
    background: rgba(58, 143, 163, 0.16);
}

.stauth-channel-back i {
    transition: transform 160ms ease;
}

.stauth-channel-back:hover i {
    transform: translateX(3px);
}

/* ==============================================================
   Channel 4 (قناة المعلمين) — compact two-column grid + condition
   list. Stacks on mobile (.stauth-grid is already 1-col by default);
   2-col at ≥1024px so الضوابط and معلومات الاستيفاء sit side-by-side.
   ============================================================== */

/* Each column owns its own internal vertical stack so the two cards in
   the info column sit on top of each other while the apply column
   contains the form (+ receipt) — no margin collapse with the grid gap. */
.stauth-grid-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (min-width: 1024px) {
    .stauth-grid--teacher {
        /* info column sized to its content; apply form gets the bigger
           share since it's the primary action surface. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        align-items: start;
        gap: 1.25rem;
    }
    .stauth-grid-col { gap: 1.25rem; }
}

.stauth-card--compact { padding: 2rem 1.4rem 1.35rem; }
@media (min-width: 768px)  { .stauth-card--compact { padding: 2.25rem 1.6rem 1.45rem; } }
@media (min-width: 1024px) { .stauth-card--compact { padding: 2.4rem 1.75rem 1.5rem;  } }

.stauth-card--compact .stauth-block-head {
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
}
.stauth-card--compact .stauth-block-title { font-size: 1.05rem; }

.stauth-conditions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.stauth-condition-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--st-border, #e5e7eb);
}
.stauth-condition-row:last-child { border-bottom: 0; }
.stauth-condition-body { flex: 1; min-width: 0; }
.stauth-condition-label {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--st-ink, #1f2937);
}
.stauth-condition-label .stauth-num { margin-inline-end: 0.25rem; }
.stauth-condition-detail {
    color: var(--st-muted, #6b7280);
    font-size: 0.78rem;
    margin-top: 0.15rem;
    line-height: 1.5;
}
.stauth-condition-row .stauth-status-pill {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.3rem 0.65rem;
}

.stauth-info-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1fr;
}
.stauth-info-row { margin: 0; }
.stauth-info-row dt {
    color: var(--st-muted, #6b7280);
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
}
.stauth-info-row dd {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--st-ink, #1f2937);
}
.stauth-info-empty {
    color: var(--st-muted, #6b7280);
    font-weight: 500;
    font-size: 0.85rem;
}
.stauth-spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.stauth-spec-chips .stauth-status-pill { font-size: 0.72rem; padding: 0.3rem 0.65rem; }

/* ==============================================================
   ضوابط تعديل الترشيح — informational rules grid on channel_tarshih.
   Mirrors the channel_teacher "الضوابط" card visually but uses CSS
   grid so each numbered clause sits in its own cell on desktop.
   ============================================================== */
/* Channel-9 two-column layout — apply form on the left, rules panel on
   the right (RTL). Apply gets the larger share since it's the primary
   action; rules panel is compact + collapsible. Stacks on mobile in
   source order (apply first, rules below). */
/* Stack order on mobile: info ABOVE apply so the student reads the
   instructions before scrolling to the picks. The DOM ships apply first
   (so desktop layout works without ::after tricks), so we use `order` on
   both ends — single-column grid honors `order` the same as flex. */
.stauth-grid--tarshih .stauth-grid-col--info  { order: 1; }
.stauth-grid--tarshih .stauth-grid-col--apply { order: 2; }

@media (min-width: 1024px) {
    /* Two-column layout: instructions on the visual right (smaller),
       apply card on the visual left (larger). Mirrors the original
       ضوابط grid proportions — info compact, apply roomy. */
    .stauth-grid--tarshih {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        align-items: start;
        gap: 1.25rem;
    }
    /* In RTL, column 1 = right edge. order:1 keeps info pinned to the
       right (visual start) while the larger apply column takes the left. */
    .stauth-grid--tarshih .stauth-grid-col--info {
        position: sticky;
        top: 1rem;
    }

    /* When the info column isn't rendered (tries exhausted /
       ineligible type), let the apply column take the full width
       capped at a comfortable reading measure. */
    .stauth-grid--tarshih .stauth-grid-col--apply:only-child {
        grid-column: 1 / -1;
        max-width: 56rem;
        margin-inline: auto;
        width: 100%;
    }
}

/* Pre-acknowledgement gate. The grid ships with `is-ack-pending` when the
   info column is rendered; channel_tarshih.js drops the class once the
   student ticks #stauthRulesAck. While the class is present, the apply
   column is collapsed so the instructions panel reads alone, centered.
   `is-info-hidden` is the inverse — set by paintReceipt to collapse the
   instructions panel and let the receipt take the full grid width;
   without it the apply column would sit in the narrower track and look
   offset on desktop. */
.stauth-grid--tarshih.is-ack-pending .stauth-grid-col--apply {
    display: none;
}
@media (min-width: 1024px) {
    .stauth-grid--tarshih.is-ack-pending {
        grid-template-columns: minmax(0, 1fr);
        max-width: 36rem;
        margin-inline: auto;
    }
    .stauth-grid--tarshih.is-ack-pending .stauth-grid-col--info {
        position: static;
    }
    .stauth-grid--tarshih.is-info-hidden .stauth-grid-col--apply {
        grid-column: 1 / -1;
        max-width: 56rem;
        margin-inline: auto;
        width: 100%;
    }

    /* Same inverse for the teacher-grid channels (e.g. awael): when the
       receipt replaces the form, paintReceipt hides the info column and
       sets `is-info-hidden`, collapsing its track so the receipt spans
       the full width instead of sitting in the narrower apply track. */
    .stauth-grid--teacher.is-info-hidden {
        grid-template-columns: minmax(0, 1fr);
    }
    .stauth-grid--teacher.is-info-hidden .stauth-grid-col--apply {
        grid-column: 1 / -1;
        max-width: 56rem;
        margin-inline: auto;
        width: 100%;
    }
}

/* Compact collapsible rules panel — replaces the full card chrome with a
   single clickable summary bar. Expands inline on click, no JS. */
.stauth-rules {
    background: var(--st-card, #ffffff);
    border: 1px solid var(--st-border, #e6dcc6);
    border-radius: var(--st-r-md, 16px);
    box-shadow: var(--st-shadow-sm);
    overflow: hidden;
}

.stauth-rules-details > summary { list-style: none; }
.stauth-rules-details > summary::-webkit-details-marker { display: none; }

.stauth-rules-summary {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.05rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s var(--st-ease, ease);
}
.stauth-rules-summary:hover,
.stauth-rules-details[open] > .stauth-rules-summary {
    background: var(--st-parchment-soft, #ede5d2);
}

.stauth-rules-summary-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--st-r-md, 16px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, var(--st-navy), var(--st-navy-deep));
    color: var(--st-on-dark, #f6f1e7);
    flex-shrink: 0;
    font-size: 1rem;
}

.stauth-rules-summary-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.stauth-rules-summary-title {
    font-family: var(--st-font-display-ar);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--st-ink, #1f2d40);
    line-height: 1.2;
}
.stauth-rules-summary-sub {
    color: var(--st-muted, #8a93a3);
    font-size: 0.76rem;
}

.stauth-rules-summary-chev {
    color: var(--st-muted, #8a93a3);
    transition: transform 0.25s var(--st-ease, ease);
    flex-shrink: 0;
    font-size: 0.85rem;
}
.stauth-rules-details[open] .stauth-rules-summary-chev {
    transform: rotate(180deg);
}

.stauth-rules-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 1.05rem 1.05rem;
    display: grid;
    gap: 0.85rem;
    border-top: 1px dashed var(--st-border, #e6dcc6);
}

/* Body of the collapsible "previous applications" panel on the martyr page.
   Each child is already a .stauth-card, so we only need spacing + a separator
   under the summary header. */
.stauth-history-body {
    padding: 0.85rem 1.05rem 1.05rem;
    display: grid;
    gap: 0.85rem;
    border-top: 1px dashed var(--st-border, #e6dcc6);
}
.stauth-history-body > .stauth-card { margin: 0; }

/* Action row at the bottom of each form card. Holds the print + delete
   buttons side-by-side on roomy screens, stacks on narrow ones. Sits
   outside the .stauth-form grid so the buttons span the full card width. */
.stauth-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 0.95rem;
    border-top: 1px dashed var(--st-border, #e6dcc6);
}
.stauth-action-row > .stauth-action {
    flex: 1 1 11rem;
}

.stauth-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1.1rem;
    border: 1.5px solid transparent;
    border-radius: var(--st-r-md, 14px);
    font-family: var(--st-font-display-ar, 'Cairo', sans-serif);
    font-weight: 700;
    font-size: 0.94rem;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform 0.15s var(--st-ease, ease),
                box-shadow 0.2s var(--st-ease, ease),
                background 0.2s var(--st-ease, ease),
                color 0.2s var(--st-ease, ease),
                border-color 0.2s var(--st-ease, ease);
    text-decoration: none;
    line-height: 1;
    user-select: none;
}
.stauth-action i { font-size: 0.95rem; line-height: 1; }
.stauth-action:focus-visible {
    outline: 2px solid var(--st-accent, #c8a04a);
    outline-offset: 2px;
}
.stauth-action:hover { transform: translateY(-1px); }
.stauth-action:active { transform: translateY(0); }
.stauth-action:disabled,
.stauth-action[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Primary action: print. Filled navy with depth so it reads as the
   recommended action when both print + delete are present. */
.stauth-action--print {
    background: linear-gradient(155deg, var(--st-navy, #2a3d56), var(--st-navy-deep, #1f2d40));
    color: var(--st-on-dark, #f6f1e7);
    box-shadow: 0 6px 14px rgba(42, 61, 86, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.stauth-action--print:hover {
    box-shadow: 0 8px 18px rgba(42, 61, 86, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Secondary action: delete. Outlined red — unmistakably destructive but
   visually subordinate. Fills on hover so the intent is unambiguous. */
.stauth-action--delete {
    background: #fff;
    color: var(--st-red, #b00020);
    border-color: var(--st-red, #b00020);
    box-shadow: 0 1px 3px rgba(176, 0, 32, 0.08);
}
.stauth-action--delete:hover {
    background: var(--st-red, #b00020);
    color: #fff;
    box-shadow: 0 6px 14px rgba(176, 0, 32, 0.28);
}


.stauth-rule-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
    align-items: start;
    padding-top: 0.5rem;
}

.stauth-rule-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: var(--st-r-pill, 999px);
    background: var(--st-navy, #2a3d56);
    color: var(--st-on-dark, #f6f1e7);
    font-weight: 800;
    font-size: 0.76rem;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0.1rem;
}

.stauth-rule-text {
    margin: 0;
    color: var(--st-ink, #1f2d40);
    font-size: 0.81rem;
    line-height: 1.7;
    text-align: justify;
}
.stauth-rule-text p { margin: 0 0 0.35rem; }
.stauth-rule-text p:last-child { margin-bottom: 0; }

.stauth-rule-sublist {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.25rem;
}
.stauth-rule-sublist li {
    color: var(--st-ink-soft, #4a5a6e);
    font-size: 0.79rem;
    line-height: 1.7;
}

/* ─── Printable martyr Foundation form for pending applications ────────
   Screen cards keep the normal review UI (.stauth-martyr-screen).
   A separate official document (.stauth-martyr-print-doc) is hidden on
   screen and revealed when JS clones the card into #stauthPrintHost.
   The clone host is kept LAID OUT (off-canvas) rather than display:none
   so Firefox has real frames for the print-only subtree. */
.stauth-print-host {
    position: fixed;
    inset-inline-start: -100vw;
    top: 0;
    width: 210mm;
    z-index: -1;
    pointer-events: none;
    background: #fff;
}
.stauth-martyr-print-doc { display: none; }
.stauth-print-host .stauth-martyr-print-doc { display: block; }
.stauth-print-host .stauth-martyr-screen { display: none; }

/* Official print-doc structure — also applied off-canvas so Gecko has
   layout frames before window.print(). */
.stauth-martyr-print-doc {
    font-family: 'Cairo', sans-serif;
    color: #111;
    direction: rtl;
}
.stauth-martyr-print-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.stauth-martyr-print-titles {
    flex: 1 1 34%;
    text-align: right;
}
.stauth-martyr-print-titles h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #7a1f2b;
    line-height: 1.45;
}
.stauth-martyr-print-titles p {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111;
}
.stauth-martyr-print-logos {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    min-width: 9rem;
}
.stauth-martyr-print-logo-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.stauth-martyr-print-logo {
    width: 4.6rem;
    height: 4.6rem;
    object-fit: contain;
}
.stauth-martyr-print-dir {
    font-size: 0.92rem;
    font-weight: 700;
    color: #111;
    text-align: center;
}
.stauth-martyr-print-meta {
    flex: 1 1 22%;
    text-align: left;
}
.stauth-martyr-print-formno {
    font-size: 1rem;
    font-weight: 800;
    color: #c0392b;
}
.stauth-martyr-print-date {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111;
}

.stauth-martyr-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.2rem;
    row-gap: 1.15rem;
    margin-bottom: 2rem;
}
.stauth-martyr-print-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}
.stauth-martyr-print-k {
    font-size: 0.92rem;
    font-weight: 800;
    color: #111;
}
.stauth-martyr-print-v {
    font-size: 0.98rem;
    font-weight: 600;
    color: #111;
    line-height: 1.45;
    word-break: break-word;
}

.stauth-martyr-print-signs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-top: 0.5rem;
}
.stauth-martyr-print-sign {
    border: 1px solid #bbb;
    background: #fff;
    min-height: 11rem;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
}
.stauth-martyr-print-sign-label {
    font-size: 0.88rem;
    font-weight: 800;
    color: #111;
    line-height: 1.45;
    text-align: center;
}
.stauth-martyr-print-sign-area {
    flex: 1 1 auto;
    min-height: 7.5rem;
}

@media print {
    @page { size: A4; margin: 0; }

    body.stauth-printing {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    body.stauth-printing > *:not(#stauthPrintHost) { display: none !important; }
    body.stauth-printing #stauthPrintHost {
        display: block !important;
        position: static !important;
        inset-inline-start: auto !important;
        top: auto !important;
        width: auto !important;
        z-index: auto !important;
        pointer-events: auto !important;
        background: #fff;
        /* Replace the zeroed @page margin so content keeps a clean edge
           without leaving room for the browser URL / title headers. */
        padding: 1.2cm !important;
    }

    #stauthPrintHost .stauth-card {
        background: #fff !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0.4rem 0.2rem !important;
        color: #111 !important;
    }
    #stauthPrintHost .stauth-card-tab,
    #stauthPrintHost .stauth-martyr-screen { display: none !important; }
    #stauthPrintHost .stauth-martyr-print-doc {
        display: block !important;
    }
    #stauthPrintHost .stauth-martyr-print-formno {
        color: #c0392b !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #stauthPrintHost .stauth-martyr-print-titles h1 {
        color: #7a1f2b !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #stauthPrintHost .stauth-martyr-print-sign {
        border-color: #999 !important;
        background: #fff !important;
    }
}

/* ── Pre-submit instructions panel (channel 9 side info column) ──────
   Always-visible eye-catching panel that replaces the old collapsible
   "ضوابط تعديل الترشيح" side block. Card-on-card construction: a
   white card with a navy header strip, accent corner ribbon, numbered
   chips per rule, a highlighted target-rule line, and a custom
   acknowledgement checkbox wired into syncSaveButton(). */
.stauth-instructions {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--st-border, #e6dcc6);
    border-radius: var(--st-r-lg, 18px);
    overflow: hidden;
    box-shadow: 0 6px 18px -10px rgba(31, 45, 64, 0.18),
                0 2px 6px  -2px  rgba(31, 45, 64, 0.06);
}

/* Soft accent stripe on the inline-start edge — RTL-safe via
   inset-inline-start so the ribbon hugs the right edge in Arabic. */
.stauth-instructions::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    background: linear-gradient(180deg, #c0392b 0%, #1f2d40 100%);
}

/* ── Header strip ── */
.stauth-instructions-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 1.15rem 0.95rem 1.4rem;
    background: linear-gradient(150deg, #1f2d40 0%, #2b3d5c 100%);
    color: #f6f1e7;
    position: relative;
}
/* Subtle decorative dots (top-end corner) — visual interest without
   hurting readability. */
.stauth-instructions-head::after {
    content: '';
    position: absolute;
    inset-block-start: -10px;
    inset-inline-end: -10px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
                                rgba(255, 255, 255, 0.10) 0%,
                                rgba(255, 255, 255, 0)    65%);
    pointer-events: none;
}
.stauth-instructions-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: linear-gradient(155deg, #c0392b 0%, #8a261b 100%);
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 3px 10px -2px rgba(192, 57, 43, 0.55);
}
.stauth-instructions-head-text { flex: 1; min-width: 0; }
.stauth-instructions-title {
    margin: 0;
    font-family: var(--st-font-display-ar, 'Cairo', sans-serif);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    letter-spacing: 0.01em;
}
.stauth-instructions-sub {
    margin: 0.2rem 0 0;
    font-size: 0.82rem;
    color: rgba(246, 241, 231, 0.78);
    line-height: 1.4;
}

/* ── Ordered list with numbered chips ── */
.stauth-instructions-list {
    list-style: none;
    margin: 0;
    padding: 1rem 1.15rem 0.5rem 1.4rem;
    counter-reset: instr;
}
.stauth-instructions-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.65rem 0;
    border-bottom: 1px dashed var(--st-border-soft, #ece3cb);
}
.stauth-instructions-item:last-of-type { border-bottom: 0; }
.stauth-instructions-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: linear-gradient(155deg, #1f2d40 0%, #3a4d6b 100%);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.stauth-instructions-item > p {
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.8;
    color: #2b3445;
}
.stauth-instructions-item > p strong {
    color: #1f2d40;
    font-weight: 700;
}

/* ── Highlighted "target / cap" rule (type 2 or type 3) ── */
.stauth-instructions-rule {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.4rem 1.15rem 0.95rem;
    padding: 0.75rem 0.95rem;
    background: linear-gradient(155deg, #fff4f1 0%, #fde9dc 100%);
    border: 1.5px solid #f1c0b1;
    border-radius: var(--st-r-md, 12px);
    color: #7a2a1d;
    box-shadow: 0 1px 0 rgba(192, 57, 43, 0.04);
}
.stauth-instructions-rule > i {
    font-size: 1rem;
    color: #c0392b;
    flex-shrink: 0;
}
.stauth-instructions-rule > p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.6;
    font-weight: 600;
}
.stauth-instructions-rule .stauth-num {
    color: #1f2d40;
    font-weight: 800;
    padding: 0 0.15rem;
}

/* ── Acknowledgement checkbox row ── */
.stauth-instructions-ack {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.4rem 1.15rem 1.15rem;
    padding: 0.85rem 0.95rem;
    background: #fbf6e9;
    border: 1.5px solid var(--st-border, #e6dcc6);
    border-radius: var(--st-r-md, 12px);
    cursor: pointer;
    transition: border-color 0.18s ease,
                background     0.18s ease,
                box-shadow     0.18s ease;
    user-select: none;
}
.stauth-instructions-ack:hover {
    border-color: #1f2d40;
    background: #ffffff;
}
.stauth-instructions-ack-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.stauth-instructions-ack-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #b9b0a0;
    border-radius: 7px;
    background: #ffffff;
    color: transparent;
    font-size: 0.85rem;
    transition: background 0.18s ease,
                border     0.18s ease,
                color      0.18s ease,
                transform  0.18s ease;
    flex-shrink: 0;
}
.stauth-instructions-ack-input:checked ~ .stauth-instructions-ack-box {
    background: linear-gradient(155deg, #1aa179 0%, #117a5a 100%);
    border-color: #117a5a;
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 2px 8px -2px rgba(17, 122, 90, 0.55);
}
.stauth-instructions-ack-input:focus-visible ~ .stauth-instructions-ack-box {
    box-shadow: 0 0 0 3px rgba(31, 45, 64, 0.18);
}
.stauth-instructions-ack-label {
    font-size: 0.96rem;
    font-weight: 700;
    color: #1f2d40;
    line-height: 1.4;
}
/* When checked, give the whole row a subtle "confirmed" treatment so
   the student gets a clear visual reward for ticking. */
.stauth-instructions-ack:has(.stauth-instructions-ack-input:checked) {
    border-color: #1aa179;
    background: #f1f9f4;
    box-shadow: 0 2px 10px -4px rgba(26, 161, 121, 0.35);
}

/* Fallback for browsers without :has() — JS could add a class, but the
   plain hover + checked-box visuals are still readable so we just
   degrade gracefully. */

/* ── Re-edit warning banner (inside #stauthSuccessCard) ───────────────
   Surfaced by channel_tarshih.js when canReturn=true (student is
   reviewing a prior submission, not landing right after a save). Sits
   above the print/edit actions so the consequences of editing are read
   before the buttons. */
.stauth-receipt-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    margin: 0 0 0.95rem;
    background: #fff4f1;
    border: 1.5px solid #f1c0b1;
    border-inline-start: 4px solid #c0392b;
    border-radius: var(--st-r-md, 12px);
    color: #7a2a1d;
}
.stauth-receipt-warning > i {
    font-size: 1.1rem;
    color: #c0392b;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.stauth-receipt-warning-body {
    flex: 1;
    min-width: 0;
}
.stauth-receipt-warning-body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
}
.stauth-receipt-warning-body p + p {
    margin-top: 0.35rem;
}

/* Hide the warning during print — same rationale as the apply-card
   chrome: only the receipt itself should land on the printed sheet. */
@media print {
    .stauth-receipt-warning {
        display: none !important;
    }
}

/* ==============================================================
   "ملء البيانات" — student-data fill flow (Student_data).
   Type selector + multi-step wizard, built on the existing
   stauth-* tokens/components (.stauth-card, .stauth-input, …).
   ============================================================== */

/* Content column for the data forms — a single readable form column, NOT the
   1180px two-column channel grid. Must match the specificity of
   `.stauth-welcome-wrap .stauth-page` (both two classes) and sit later in the
   file so it wins; a bare `.stauth-page--wide` (one class) loses and the form
   blows out to 1180px on tablet/desktop. Stays centered via the inherited
   `margin: 0 auto`. */
.stauth-welcome-wrap .stauth-page--wide { max-width: 720px; }

.stauth-data-intro { text-align: center; }

/* ---------- Type selector ---------- */
.stauth-data-types {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.stauth-type-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    background: var(--st-card);
    border: 1.5px solid var(--st-border);
    border-radius: var(--st-r-md);
    box-shadow: var(--st-shadow-sm);
    cursor: pointer;
    transition: border-color .2s var(--st-ease), box-shadow .2s var(--st-ease),
                transform .2s var(--st-ease), background-color .2s var(--st-ease);
}
.stauth-type-option:hover { border-color: var(--st-teal); transform: translateY(-1px); }
.stauth-type-option.is-selected {
    border-color: var(--st-wine);
    background: var(--st-wine-soft);
    box-shadow: var(--st-shadow-md);
}

/* The native radio drives :checked but stays visually hidden. */
.stauth-type-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.stauth-type-mark {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--st-teal-soft);
    color: var(--st-teal-deep);
    font-size: 1.15rem;
}
.stauth-type-option.is-selected .stauth-type-mark {
    background: var(--st-wine);
    color: #fff;
}

.stauth-type-body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 auto; }
.stauth-type-title { font-weight: 700; color: var(--st-ink); line-height: 1.4; }
.stauth-type-desc { font-size: 0.85rem; color: var(--st-muted); line-height: 1.6; }

.stauth-type-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--st-border);
    color: transparent;
    font-size: 0.7rem;
    align-self: center;
    transition: all .2s var(--st-ease);
}
.stauth-type-option.is-selected .stauth-type-check {
    background: var(--st-wine);
    border-color: var(--st-wine);
    color: #fff;
}

.stauth-data-types-actions {
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
}
.stauth-data-types-actions .stauth-submit { width: auto; min-width: 200px; }

/* ---------- Wizard: stepper nav ---------- */
.stauth-stepper {
    list-style: none;
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    display: flex;
    /* Single non-wrapping row at every width — items shrink to fit instead
       of wrapping into a grid (which broke the connector lines on mobile). */
    flex-wrap: nowrap;
    gap: 0.25rem;
    justify-content: space-between;
}
.stauth-stepper-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
    position: relative;
    cursor: default;
}
/* Connector line between dots. */
.stauth-stepper-item::before {
    content: "";
    position: absolute;
    top: 17px;
    height: 2px;
    background: var(--st-border);
    /* RTL: the line runs to the previous (right-hand) step. */
    right: -50%;
    width: 100%;
    z-index: 0;
}
.stauth-stepper-item:first-child::before { display: none; }
.stauth-stepper-item.is-done::before,
.stauth-stepper-item.is-current::before { background: var(--st-teal); }

.stauth-stepper-dot {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--st-card);
    border: 2px solid var(--st-border);
    color: var(--st-muted);
    font-weight: 700;
    transition: all .2s var(--st-ease);
}
.stauth-stepper-done { display: none; font-size: 0.85rem; }
.stauth-stepper-item.is-current .stauth-stepper-dot {
    border-color: var(--st-wine);
    background: var(--st-wine);
    color: #fff;
}
.stauth-stepper-item.is-done .stauth-stepper-dot {
    border-color: var(--st-teal);
    background: var(--st-teal);
    color: #fff;
    cursor: pointer;
}
.stauth-stepper-item.is-done .stauth-stepper-num { display: none; }
.stauth-stepper-item.is-done .stauth-stepper-done { display: block; }

.stauth-stepper-label {
    font-size: 0.78rem;
    color: var(--st-muted);
    line-height: 1.4;
}
.stauth-stepper-item.is-current .stauth-stepper-label { color: var(--st-wine); font-weight: 700; }
.stauth-stepper-item.is-done .stauth-stepper-label { color: var(--st-teal-deep); }

/* Tighten the stepper on narrow phones so 4 steps stay on one row. */
@media (max-width: 480px) {
    .stauth-stepper-dot { width: 30px; height: 30px; font-size: 0.85rem; }
    .stauth-stepper-item::before { top: 14px; }
    .stauth-stepper-label { font-size: 0.66rem; line-height: 1.3; }
}

/* ---------- Wizard: step panels ---------- */
.stauth-step { display: none; }
.stauth-step.is-active { display: block; animation: stauthStepIn .25s var(--st-ease); }
@keyframes stauthStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stauth-step-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--st-navy);
    margin: 1.25rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--st-border-soft);
}
.stauth-step-heading:first-child { margin-top: 0; }
.stauth-step-heading i { color: var(--st-teal); }

/* Two-column field grid on wider viewports. */
.stauth-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}
@media (min-width: 560px) {
    .stauth-field-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Wizard: actions ---------- */
.stauth-step-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--st-border-soft);
}
.stauth-step-actions .stauth-back { width: auto; margin: 0; }
.stauth-step-actions .stauth-submit { margin: 0; flex: 1 1 auto; }
.stauth-step-actions .stauth-back[disabled] { opacity: .45; cursor: not-allowed; }

.stauth-nopw-row {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--st-border-soft);
    text-align: center;
}

/* ---------- Verify (read-only) grid for ministry types ---------- */
.stauth-verify-grid {
    margin: 1rem 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
@media (min-width: 560px) {
    .stauth-verify-grid { grid-template-columns: 1fr 1fr; }
}
.stauth-verify-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--st-parchment-soft);
    border: 1px solid var(--st-border-soft);
    border-radius: var(--st-r-sm);
}
.stauth-verify-row dt { font-size: 0.82rem; color: var(--st-muted); margin: 0; }
.stauth-verify-row dd { margin: 0; font-weight: 700; color: var(--st-ink); }

/* ---------- File-upload tiles ---------- */
.stauth-uploads {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1rem;
}
@media (min-width: 560px) {
    .stauth-uploads { grid-template-columns: 1fr 1fr; }
}
.stauth-upload-intro { margin-bottom: 0.75rem; }

.stauth-upload {
    position: relative;
    display: block;
    cursor: pointer;
}
.stauth-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.stauth-upload-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.4rem 1rem;
    border: 2px dashed var(--st-border);
    border-radius: var(--st-r-md);
    background: var(--st-parchment-soft);
    color: var(--st-muted);
    text-align: center;
    transition: all .2s var(--st-ease);
}
.stauth-upload:hover .stauth-upload-face { border-color: var(--st-teal); color: var(--st-teal-deep); }
.stauth-upload-face i { font-size: 1.5rem; color: var(--st-teal); }
.stauth-upload-text { font-size: 0.85rem; word-break: break-all; }
.stauth-upload.is-filled .stauth-upload-face {
    border-style: solid;
    border-color: var(--st-teal);
    background: var(--st-teal-soft);
    color: var(--st-teal-deep);
}
.stauth-upload-input.is-invalid + .stauth-upload-face,
.stauth-upload-field.is-invalid .stauth-upload-face { border-color: var(--st-danger); }

/* ---------- Review / save step ---------- */
.stauth-data-review { text-align: center; padding: 1rem 0.5rem; }
.stauth-data-review-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--st-teal-soft);
    color: var(--st-teal-deep);
    font-size: 1.6rem;
}
.stauth-data-review-title { font-size: 1.15rem; font-weight: 800; color: var(--st-navy); margin: 0 0 0.5rem; }
.stauth-data-review-text { color: var(--st-muted); line-height: 1.8; max-width: 540px; margin: 0 auto; }

/* ---------- Invalid field highlight (selects/inputs in the wizard) ---------- */
.stauth-wizard-form .is-invalid,
.stauth-wizard-form .is-invalid:focus {
    border-color: var(--st-danger) !important;
    box-shadow: 0 0 0 3px var(--st-danger-soft) !important;
}

/* ---------- Login: "no exam number / username" → fill-data flow ---------- */
.stauth-login-alt {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}
.stauth-login-alt-rule {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-border), transparent);
}
.stauth-noacct-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border: 1.5px dashed var(--st-teal);
    border-radius: var(--st-r-pill);
    background: var(--st-teal-soft);
    color: var(--st-teal-deep);
    font-family: var(--st-font-body);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s var(--st-ease), border-color .2s var(--st-ease),
                color .2s var(--st-ease), transform .2s var(--st-ease);
}
.stauth-noacct-link:hover {
    background: var(--st-teal);
    border-color: var(--st-teal);
    color: #fff;
    transform: translateY(-1px);
}
.stauth-noacct-link i { font-size: 0.95rem; }