/* Modern presentation layer. Shared by public pages, forms and staff tools. */
:root { --blue:#2456a6; --navy:#122c50; --ink:#1b2c43; --muted:#586b80; --line:#dee6ef; --pale:#edf3fa; --red:#bf343e; --yellow:#ffd65a; }
body { background:#f7f9fc; line-height:1.65; -webkit-font-smoothing:antialiased; }
main { min-height:65vh; }
h1 { font-size:clamp(2rem,4.4vw,3.6rem); letter-spacing:-.045em; }
h2 { font-size:clamp(1.45rem,2.6vw,2rem); letter-spacing:-.035em; }
.container { width:min(1240px,100%); }
.narrow { max-width:840px; }
.section { padding-top:48px; padding-bottom:48px; }
.topbar { background:#112b4e; padding:7px 0; font-size:.75rem; }
.site-header { background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); box-shadow:0 4px 20px #122c5005; }
.header-row { padding-top:18px; padding-bottom:12px; gap:16px; }
.brand { font-size:1.4rem; letter-spacing:-.035em; }
.brand small { letter-spacing:.02em; }
.agency-logos { padding-right:14px; border-right:1px solid var(--line); }
#main-nav { flex:1 0 100%; flex-wrap:wrap; gap:5px; padding-top:8px; border-top:1px solid #edf1f6; }
#main-nav a { padding:10px 13px; border-radius:10px; color:#4b607a; font-size:.85rem; }
#main-nav a:hover { background:var(--pale); color:var(--blue); }
#main-nav a[aria-current] { text-decoration:none; color:var(--blue); background:#eaf1ff; }
#main-nav .nav-button { margin-left:auto; background:var(--navy); color:white; border-color:var(--navy); }
.hero { position:relative; overflow:hidden; background:radial-gradient(ellipse at 80% 0%,#32639b 0,transparent 50%),linear-gradient(125deg,#102847,#1d416e); border-bottom:0; padding:76px 0; }
.hero:after { content:''; position:absolute; width:300px; height:300px; border:1px solid #ffffff16; border-radius:50%; right:-100px; bottom:-180px; pointer-events:none; }
.hero-grid { position:relative; z-index:1; gap:64px; }
.hero h1 { line-height:1.12; max-width:700px; }
.hero .eyebrow { color:#c2d8f6; }
.hero .hero-card .eyebrow { color:var(--blue); }
.hero-card { border:1px solid #ffffff80; box-shadow:0 24px 64px #061a3638; border-radius:24px; padding:32px; }
.hero-card .steps { list-style:none; counter-reset:journey; padding:0; }
.hero-card .steps li { counter-increment:journey; position:relative; padding:0 0 0 48px; margin-bottom:24px; }
.hero-card .steps li:before { content:counter(journey,decimal-leading-zero); position:absolute; left:0; top:0; width:34px; height:34px; background:#edf3fc; color:var(--blue); border-radius:10px; display:grid; place-items:center; font-size:.8rem; font-weight:700; }
.card { border-radius:20px; padding:30px; box-shadow:0 6px 24px #243f6510; }
.program-card { border-top:0; position:relative; overflow:hidden; padding:34px; }
.program-card:before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--blue); }
.program-card.red-top:before { background:var(--red); }
.program-card h3 { font-size:2.6rem; }
.badge { border-radius:30px; padding:5px 12px; font-size:.73rem; letter-spacing:.025em; }
.eyebrow { margin-bottom:12px; letter-spacing:.13em; }
.text-link { display:inline-block; text-decoration:none; border-bottom:1px solid #b5c9e5; padding-bottom:3px; }
.soft-section { background:#edf3fb; padding:54px 0; border-top:1px solid var(--line); }
.page-heading { background:linear-gradient(120deg,#edf3ff,#f8faff); padding:42px 0; }
button,.button { border-radius:11px; padding:12px 19px; font-size:.92rem; transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease,border-color .18s ease; }
button:hover,.button:hover { filter:none; box-shadow:0 5px 14px #17345618; transform:translateY(-1px); }
button:active,.button:active { transform:translateY(0); }
button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.primary { background:var(--blue); box-shadow:0 3px 8px #2456a61a; }
.primary:hover { background:#19488f; }
.secondary { border-color:#ccd7e5; background:white; }
.secondary:hover { background:#f0f5fc; border-color:#a9bdd7; }
.yellow:hover { background:#ffe084; }
.outline-light:hover { background:#ffffff12; }
.field { font-size:.93rem; gap:8px; }
/* Native selects retain keyboard navigation, validation and mobile support. */
select {
 appearance:none;
 background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232456a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
 padding-right:44px !important;
 color:var(--ink);
 cursor:pointer;
 font:inherit;
 min-height:48px;
}
select:hover { border-color:#8ba9d1 !important; background-color:#f8fbff; }
select:disabled { opacity:.6; cursor:not-allowed; }
@supports (appearance:base-select) {
 select,select::picker(select) { appearance:base-select; }
 select { background-image:none; padding-right:14px !important; align-items:center; gap:16px; }
 select::picker-icon { color:var(--blue); transition:rotate .18s ease; }
 select:open::picker-icon { rotate:180deg; }
 select:open { border-color:var(--blue); box-shadow:0 0 0 3px #2456a615; }
 select::picker(select) {
  background:white; border:1px solid var(--line); border-radius:14px;
  padding:6px; margin-top:6px; box-shadow:0 12px 32px #122c5026;
  max-height:320px; overflow:auto; color:var(--ink); font:inherit;
 }
 select option { padding:11px 13px; border-radius:8px; gap:10px; white-space:normal; cursor:pointer; transition:background-color .15s ease; }
 select option:hover,select option:focus { background:#edf3fc; color:var(--navy); outline:none; }
 select option:checked { background:#eaf1ff; color:var(--blue); font-weight:600; }
 select option::checkmark { color:var(--blue); }
 select option:disabled { color:var(--muted); cursor:default; }
}
input:not([type=checkbox]):not([type=radio]),select,textarea { border-color:#cbd6e4; border-radius:11px; padding:12px 14px; transition:border-color .18s ease,box-shadow .18s ease; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #2456a615; }
input[type=checkbox],input[type=radio] { min-height:0 !important; accent-color:var(--blue); }
#application-form fieldset { padding-bottom:24px; margin-bottom:28px; border-bottom:1px solid #e6edf5; }
legend { letter-spacing:-.02em; }
.notice,.error { border-radius:12px; font-size:.93rem; }
.notice { background:#fff8e6; border-left-color:#e6b32d; }
.mode-notice { background:#edf4ff; border-left-color:var(--blue); }
.check-choice { background:white; border-color:var(--line); border-radius:13px; transition:background-color .18s,border-color .18s,box-shadow .18s; }
.check-choice:hover { border-color:#9eb6d8; background:#f8faff; }
.check-choice:has(input:checked) { border-color:var(--blue); background:#edf4ff; box-shadow:0 0 0 1px var(--blue); }
progress { height:9px !important; border:0; border-radius:20px; overflow:hidden; }
progress::-webkit-progress-bar { background:#e5edf7; }
progress::-webkit-progress-value { background:var(--blue); transition:width .25s ease; }
nav[aria-label="Admin navigation"] { display:flex !important; flex-direction:row; width:100%; gap:8px; padding:14px; margin:18px 0 28px; border:1px solid var(--line); border-radius:16px; background:#edf2f8; }
nav[aria-label="Admin navigation"] .button { font-size:.8rem; padding:9px 12px; min-height:42px; }
nav[aria-label="Admin navigation"] form { margin-left:auto; }
.table-scroll { background:white; border:1px solid var(--line); border-radius:16px; }
.applicant-table { margin:0; font-size:.88rem; }
.applicant-table th { background:#edf3fa; font-size:.75rem; letter-spacing:.035em; color:#4a607a; }
.applicant-table th,.applicant-table td { padding:15px 18px; }
.applicant-table tbody tr:hover { background:#f6f9fe; }
.applicant-table tr:last-child td { border-bottom:0; }
.applicant-table td { overflow-wrap:anywhere; }
.calendar { background:white; border-radius:14px; overflow:hidden; }
.calendar td a { border-radius:5px; background:#eaf1fc; padding:3px 5px; margin-top:4px; text-decoration:none; }
.calendar .today { background:#fff7db; }
.date-box { background:#edf3ff; color:var(--blue); border-radius:12px; }
details { background:white; border-radius:14px; padding:20px 24px; transition:border-color .2s,box-shadow .2s; }
details[open] { border-color:#b7cbea; box-shadow:0 6px 24px #243f6510; }
summary { min-height:26px; }
.timeline article { position:relative; }
.timeline article:before { content:''; position:absolute; left:-28px; top:7px; width:10px; height:10px; background:var(--blue); border:2px solid #f7f9fc; border-radius:50%; }
.page-language form { justify-content:flex-end; font-size:.85rem; margin-bottom:18px; }
.page-language select { width:auto; min-width:130px; }
.site-footer { background:#102846; padding:40px 0; }
.skip-link { z-index:100; }
:focus-visible { outline:3px solid #be8100; outline-offset:4px; }
@keyframes page-enter { from { opacity:.4; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference) { main > section,main > div { animation:page-enter .32s ease-out both; } html { scroll-behavior:smooth; } }
@media (max-width:850px) {
 .header-row { padding-top:14px; padding-bottom:14px; }
 .menu-button { display:block; margin-left:auto; }
 #main-nav { flex-direction:column; align-items:stretch; }
 #main-nav .nav-button { margin-left:0; text-align:center; }
 .js #main-nav { display:none; }
 .js #main-nav.open { display:flex; }
 nav[aria-label="Admin navigation"] { align-items:center; }
 .hero { padding:46px 0; }
 .hero-grid { gap:30px; }
 .hero-card { max-width:600px; }
 .section { padding-top:32px; padding-bottom:36px; }
 .applicant-table { min-width:650px; }
}
@media (max-width:480px) {
 .container { padding-left:16px; padding-right:16px; }
 .brand { font-size:1.15rem; }
 .brand small { font-size:.6rem; }
 .agency-logos { padding-right:8px; }
 .card { padding:22px 18px; border-radius:16px; }
 .hero .actions { flex-direction:column; align-items:stretch; text-align:center; }
 .toolbar > * { max-width:100%; }
 .mode-notice .button { width:100%; text-align:center; }
 nav[aria-label="Admin navigation"] form { margin-left:0; }
 .event { gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media print {
 body { background:white; } .card { box-shadow:none; } .site-header,.page-language { display:none !important; }
 main > * { animation:none !important; } .table-scroll { overflow:visible; border:0; } .applicant-table { min-width:0; }
}

/* Shared calendar: date values remain native ISO inputs. */
.date-input-wrap { display:flex; position:relative; width:100%; }
.date-input-wrap input { width:100%; padding-right:52px !important; }
.date-input-wrap input::-webkit-calendar-picker-indicator { display:none; }
.date-open { position:absolute; right:5px; top:50%; transform:translateY(-50%); padding:9px; border:0; background:#edf3fc; color:var(--blue); display:grid; place-items:center; }
.date-open:hover,.date-open:active { transform:translateY(-50%); background:#dce9fc; }
.date-calendar { width:min(380px,calc(100% - 32px)); max-height:90vh; overflow:auto; padding:24px; border:1px solid var(--line); border-radius:22px; color:var(--ink); box-shadow:0 24px 80px #10284640; }
.date-calendar::backdrop { background:#10284666; backdrop-filter:blur(3px); }
.date-calendar[open] { animation:page-enter .18s ease-out; }
.date-calendar-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.date-calendar-title h2 { font-size:1.2rem; margin:0; }
.date-calendar button { background:#f0f5fc; color:var(--blue); border:0; padding:8px; box-shadow:none; }
.date-calendar-controls { display:grid; grid-template-columns:30px 1fr 82px 30px; align-items:end; gap:7px; }
.date-calendar-controls label { font-size:.75rem; color:var(--muted); min-width:0; }
.date-calendar-controls select,.date-calendar-controls input { width:100%; min-height:40px; padding:8px !important; font-size:.85rem; }
.date-calendar-controls > button { height:40px; font-size:1.4rem; }
.date-month-label { font-size:.85rem; font-weight:600; text-align:center; margin:16px 0 10px; }
.date-weekdays,.date-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.date-weekdays { font-size:.75rem; color:var(--muted); margin-bottom:8px; }
.date-days button { min-height:38px; padding:6px 0; background:white; color:var(--ink); font-size:.85rem; }
.date-days button:hover { background:#edf3fc; }
.date-days button[aria-current] { box-shadow:inset 0 0 0 1px #96b2dc; }
.date-days button[aria-pressed="true"] { background:var(--blue); color:white; }
.date-days button:disabled { opacity:.3; }
.date-calendar-footer { display:flex; justify-content:space-between; padding-top:16px; margin-top:12px; border-top:1px solid var(--line); }
@media (prefers-reduced-motion:reduce) { .date-calendar[open] { animation:none; } }
.otp-row { display:flex; align-items:flex-end; gap:12px; }
.otp-row .field { flex:1; min-width:0; margin-bottom:0; }
.otp-row button { flex:none; min-height:48px; margin-bottom:0; }

/* Compact staff navigation with a distinct current-page state. */
nav.admin-navigation[aria-label="Admin navigation"] { display:flex !important; flex-wrap:nowrap; align-items:center; gap:12px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 3px 12px #122c5006; }
.admin-navigation-links { display:flex; align-items:center; flex-wrap:wrap; gap:4px; flex:1; min-width:0; }
.admin-navigation-links a { display:block; padding:10px 12px; border-radius:9px; font-size:.82rem; font-weight:600; color:var(--muted); text-decoration:none; transition:background-color .18s,color .18s; }
.admin-navigation-links a:hover { background:#f0f5fc; color:var(--blue); }
.admin-navigation-links a[aria-current="page"] { background:#eaf1ff; color:#19488f; box-shadow:inset 0 0 0 1px #d5e3fa; }
nav.admin-navigation .admin-navigation-logout { flex:none; margin:0; padding-left:10px; border-left:1px solid var(--line); }
.admin-navigation-logout button { background:transparent; color:var(--muted); border:0; box-shadow:none; font-size:.82rem; padding:10px 12px; white-space:nowrap; }
.admin-navigation-logout button:hover { background:#fff0f0; color:#a12b36; transform:none; box-shadow:none; }
@media (max-width:850px) {
 nav.admin-navigation[aria-label="Admin navigation"] { flex-direction:column; align-items:stretch; gap:8px; }
 .admin-navigation-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .admin-navigation-links a { padding:12px; }
 nav.admin-navigation .admin-navigation-logout { padding:8px 0 0; border-left:0; border-top:1px solid var(--line); text-align:right; }
}

.table-scroll.import-preview-scroll { height: min(60vh,480px); max-height:480px; overflow:scroll; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-color:#829bbd #edf3fc; margin-bottom:20px; }
.import-preview-table { width:max-content; min-width:100%; }
.import-preview-table th { position:sticky; top:0; z-index:1; background:#edf3fc; box-shadow:0 1px 0 var(--line); white-space:nowrap; }
.import-preview-table td { min-width:130px; max-width:320px; overflow-wrap:anywhere; }
.import-preview-table td:first-child { min-width:54px; }
@media print { .table-scroll.import-preview-scroll { height:auto; max-height:none; overflow:visible; } .import-preview-table th { position:static; } [data-preview-scroll] { display:none; } }