@charset "UTF-8";

/* ===========================================================================
   RASTA Competitive Grants Portal - design system
   Brand navy #122275 sampled from the RASTA mark.
   Mobile-first: base styles are the phone layout, media queries scale up.
   =========================================================================== */

:root {
    /* --- Brand ---------------------------------------------------------- */
    --navy:        #122275;
    --navy-deep:   #0c1750;
    --navy-soft:   #2c3d94;
    --navy-tint:   #eef1fb;
    --navy-tint-2: #dde3f7;

    /* --- Accents -------------------------------------------------------- */
    --teal:        #0f766e;
    --teal-tint:   #e6f4f1;
    --amber:       #b45309;
    --amber-tint:  #fef4e7;
    --rose:        #be123c;
    --rose-tint:   #fdeaef;

    /* --- Neutrals ------------------------------------------------------- */
    --ink:      #0f172a;
    --body:     #334155;
    --muted:    #64748b;
    --faint:    #94a3b8;
    --border:   #e2e8f0;
    --border-2: #cbd5e1;
    --surface:  #ffffff;
    --canvas:   #f7f8fc;

    /* --- Type ----------------------------------------------------------- */
    --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    /* --- Shape & depth --------------------------------------------------- */
    --radius:    10px;
    --radius-lg: 16px;
    --radius-sm: 7px;

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 12px 32px rgba(18, 34, 117, .10), 0 4px 8px rgba(15, 23, 42, .04);

    --ring: 0 0 0 3px rgba(18, 34, 117, .18);
}

/* --- Reset ------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    /* 16px minimum everywhere: anything smaller makes iOS zoom on focus. */
    font: 400 16px/1.6 var(--font-sans);
    color: var(--body);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* Any component that sets its own display would otherwise beat the browser's
   [hidden] rule, leaving empty panels on screen. This keeps hidden hidden. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
    margin: 0 0 .5rem;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.011em;
}

h1 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid rgba(18, 34, 117, .25);
    transition: color .15s ease, border-color .15s ease;
}
a:hover { color: var(--navy-deep); border-bottom-color: var(--navy); }
a.plain { border-bottom: none; }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.75rem 0;
}

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

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

/* ===========================================================================
   LAYOUT - AUTH PAGES
   =========================================================================== */

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Soft navy wash rather than a flat colour - calmer, less corporate. */
    background:
        radial-gradient(1100px 520px at 50% -12%, var(--navy-tint) 0%, rgba(238, 241, 251, 0) 62%),
        var(--canvas);
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.15rem 2.5rem;
}

.auth-shell { width: 100%; max-width: 27rem; }
.auth-shell.wide { max-width: 34rem; }

.auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-brand img {
    width: 128px;
    margin: 0 auto .85rem;
}

.auth-brand .eyebrow {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy-soft);
    margin: 0;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.75rem 1.35rem;
}

.auth-card > h1 {
    margin-bottom: .35rem;
    font-size: 1.45rem;
}

.auth-card .lede {
    color: var(--muted);
    font-size: .94rem;
    margin-bottom: 1.5rem;
}

.auth-alt {
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: .93rem;
    color: var(--muted);
}

.auth-footer {
    text-align: center;
    padding: 0 1.15rem 2rem;
    font-size: .82rem;
    color: var(--faint);
}
.auth-footer a { color: var(--muted); border-bottom-color: var(--border-2); }

@media (min-width: 40em) {
    .auth-card { padding: 2.25rem 2rem; }
    .auth-brand img { width: 148px; }
    h1 { font-size: 1.75rem; }
}

/* ===========================================================================
   LAYOUT - APPLICATION SHELL
   =========================================================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
}

.app-header-inner {
    max-width: 68rem;
    margin: 0 auto;
    padding: .7rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-bottom: none;
    flex: 1;
    min-width: 0;
}
.app-logo img { width: 84px; }
.app-logo span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--navy);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-nav { display: flex; align-items: center; gap: .35rem; }

.app-main {
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.5rem 1.15rem 4rem;
}

.page-head { margin-bottom: 1.5rem; }
.page-head .eyebrow {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy-soft);
    margin-bottom: .3rem;
}
.page-head p { color: var(--muted); margin-bottom: 0; }

@media (min-width: 48em) {
    .app-logo img { width: 100px; }
    .app-main { padding: 2.25rem 1.5rem 5rem; }
}

/* ===========================================================================
   CARDS
   =========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.35rem 1.15rem;
}
.card + .card { margin-top: 1.15rem; }

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.card-head h2 { margin: 0; }
.card-head p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }

@media (min-width: 40em) {
    .card { padding: 1.6rem 1.5rem; }
}

/* ===========================================================================
   FORMS
   =========================================================================== */

.field { margin-bottom: 1.15rem; }

.label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .4rem;
}
.label .optional {
    font-weight: 400;
    color: var(--faint);
    margin-left: .3rem;
}

.input,
.select,
.textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    padding: .7rem .85rem;
    /* 44px minimum touch target. */
    min-height: 2.85rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    appearance: none;
}

.input::placeholder { color: var(--faint); }

.input:hover, .select:hover, .textarea:hover { border-color: #b6c2d4; }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: var(--ring);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"] {
    border-color: var(--rose);
    background: var(--rose-tint);
}
.input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(190, 18, 60, .16);
}

.input:disabled, .select:disabled { background: #f1f5f9; color: var(--muted); cursor: not-allowed; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    padding-right: 2.4rem;
}

.hint {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--muted);
}

.field-error {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: .4rem 0 0;
    font-size: .84rem;
    color: var(--rose);
}
.field-error::before {
    content: "!";
    flex: 0 0 auto;
    width: 1rem; height: 1rem;
    margin-top: .12rem;
    border-radius: 50%;
    background: var(--rose);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

/* Grouped fields side by side once there is room. */
.field-row { display: grid; gap: 0; }
@media (min-width: 34em) {
    .field-row { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
    .field-row.thirds { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Segmented control (CNIC / Passport) -------------------------------- */

.segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem;
    padding: .3rem;
    background: var(--navy-tint);
    border-radius: var(--radius);
    margin-bottom: .85rem;
}

.segmented input { position: absolute; opacity: 0; pointer-events: none; }

.segmented label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .4rem .6rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--navy-soft);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;
}

.segmented input:checked + label {
    background: var(--surface);
    color: var(--navy);
    box-shadow: var(--shadow-xs);
}
.segmented input:focus-visible + label { box-shadow: var(--ring); }

/* --- Password field ------------------------------------------------------ */

.password-wrap { position: relative; }
.password-wrap .input { padding-right: 3.4rem; }

.password-toggle {
    position: absolute;
    top: 0; right: 0;
    height: 100%;
    padding: 0 .85rem;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius);
}
.password-toggle:hover { color: var(--navy); }

.strength { margin-top: .55rem; }
.strength-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
    height: 4px;
}
.strength-track span {
    background: var(--border);
    border-radius: 999px;
    transition: background-color .25s ease;
}
.strength-label {
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    color: var(--muted);
}
.strength[data-score="1"] .strength-track span:nth-child(-n+1) { background: var(--rose); }
.strength[data-score="2"] .strength-track span:nth-child(-n+2) { background: var(--amber); }
.strength[data-score="3"] .strength-track span:nth-child(-n+3) { background: #0891b2; }
.strength[data-score="4"] .strength-track span { background: var(--teal); }

/* --- Checkbox ------------------------------------------------------------ */

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .9rem;
    color: var(--body);
    cursor: pointer;
}
.checkbox input {
    flex: 0 0 auto;
    width: 1.15rem; height: 1.15rem;
    margin-top: .2rem;
    accent-color: var(--navy);
}

/* ===========================================================================
   BUTTONS
   =========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.85rem;
    padding: .7rem 1.15rem;
    font: 600 .95rem/1.2 var(--font-sans);
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn-primary:focus-visible { box-shadow: var(--ring); outline: none; }

.btn-secondary {
    background: var(--surface);
    color: var(--navy);
    border-color: var(--border-2);
}
.btn-secondary:hover { background: var(--navy-tint); border-color: var(--navy-soft); color: var(--navy); }

.btn-ghost {
    background: transparent;
    color: var(--body);
    border-color: transparent;
    padding: .5rem .75rem;
    min-height: 2.4rem;
}
.btn-ghost:hover { background: var(--navy-tint); color: var(--navy); }

.btn-block { display: flex; width: 100%; }
.btn-sm { min-height: 2.3rem; padding: .45rem .8rem; font-size: .86rem; }

.btn-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--navy);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-actions { margin-top: 1.5rem; }

/* ===========================================================================
   ALERTS & BADGES
   =========================================================================== */

.alert {
    display: flex;
    gap: .7rem;
    padding: .85rem 1rem;
    margin-bottom: 1.15rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: .91rem;
    line-height: 1.5;
}
.alert p { margin: 0; }
.alert-icon { flex: 0 0 auto; font-weight: 700; line-height: 1.5; }

.alert-success { background: var(--teal-tint);  border-color: #a7d9d1; color: #115e56; }
.alert-error   { background: var(--rose-tint);  border-color: #f4b8c6; color: #9f0f33; }
.alert-info    { background: var(--navy-tint);  border-color: var(--navy-tint-2); color: var(--navy-deep); }
.alert-warning { background: var(--amber-tint); border-color: #f2d3a7; color: #92400e; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.badge-draft     { background: var(--border);     color: var(--body); }
.badge-submitted { background: var(--teal-tint);  color: #115e56; }
.badge-locked    { background: var(--amber-tint); color: #92400e; }

/* ===========================================================================
   DASHBOARD PIECES
   =========================================================================== */

.deadline-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    padding: .85rem 1.05rem;
    margin-bottom: 1.5rem;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    font-size: .9rem;
}
.deadline-bar strong { font-weight: 600; }
.deadline-bar .countdown { margin-left: auto; opacity: .92; font-variant-numeric: tabular-nums; }

.summary-list { margin: 0; }
.summary-list div {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--border);
}
.summary-list div:last-child { border-bottom: 0; }
.summary-list dt { flex: 0 0 11rem; color: var(--muted); font-size: .875rem; margin: 0; }
.summary-list dd { margin: 0; color: var(--ink); font-weight: 500; }

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
}
.empty-state h2 { margin-bottom: .4rem; }
.empty-state p { color: var(--muted); max-width: 30rem; margin: 0 auto 1.5rem; }

/* ===========================================================================
   DEV BANNER (local mail driver only)
   =========================================================================== */

.dev-banner {
    background: #1e293b;
    color: #e2e8f0;
    font-size: .82rem;
    padding: .6rem 1.15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .8rem;
}
.dev-banner strong { color: #fbbf24; font-weight: 600; }
.dev-banner a { color: #7dd3fc; border-bottom-color: rgba(125, 211, 252, .4); word-break: break-all; }

/* ===========================================================================
   ERROR PAGES
   =========================================================================== */

.error-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem 1.15rem;
    text-align: center;
}
.error-code {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--navy);
    margin-bottom: .5rem;
}
.error-page p { color: var(--muted); max-width: 32rem; margin: 0 auto 1.5rem; }

.debug-trace {
    margin-top: 2rem;
    text-align: left;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--radius);
    padding: 1rem;
    font: 400 .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-x: auto;
    max-width: 60rem;
}

/* ===========================================================================
   MOTION
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Text the applicant justified in the proposal editor. A fixed class rather
   than an inline style, because the server sanitiser strips every style. */
.align-justify { text-align: justify; text-justify: inter-word; }

/* --- Site credit ------------------------------------------------------------
   The closing band on every portal page: who built the system. Deliberately
   a quiet navy strip with a gold rule, so it reads as a signature rather
   than as another card competing with the form above it. */

.site-credit {
    margin-top: 3rem;
    border-top: 3px solid var(--navy);
    background: var(--navy-tint);
    box-shadow: inset 0 3px 0 -1px #d4af37;
    text-align: center;
}
.site-credit-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    max-width: 82rem;
    margin: 0 auto;
    padding: 1.35rem 1.15rem 1.5rem;
}
.site-credit-line {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.site-credit-name {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--navy-deep);
}
@media (min-width: 40em) {
    .site-credit-inner { flex-direction: row; justify-content: center; gap: .7rem; padding: 1.2rem 1.5rem; }
    .site-credit-name { font-size: 1.3rem; }
}
@media print { .site-credit { display: none; } }