/* ============================================================
   PESO HINIGARAN — Design Tokens
   Palette:  Red #CE1126 (primary) · Gold #C9971E (premium accent, text-safe)
             Blue #003893 (institutional anchor) · derived neutrals below
   Type:     Source Serif 4 — headline moments only (h1, h2, big stat figures),
             carrying the weight of an official seal or certificate.
             Inter — everything else: body copy, forms, tables, navigation.
   Signature: the "Pathway Deck" — a fanned 3D stack of program cards in the hero,
              echoing the government seal's concentric rings + the sidebar's 10 programs.
   Elevation: hairline borders define structure by default; shadow is reserved
              for things that actually float (hero deck, modals, the sticky header) —
              not applied uniformly to every card.
   ============================================================ */

:root{
  --red:        #CE1126;
  --red-dark:   #8F0B18;
  --red-light:  #FBEAEB;
  --gold:       #FFD100;
  --gold-ink:   #8A6A0A;
  --gold-line:  #C9971E;
  --blue:       #00347F;
  --blue-dark:  #001B44;
  --blue-light: #EAF0FB;

  --ink:        #14181F;
  --ink-soft:   #545A66;
  --ink-faint:  #7A8092;
  --gray-50:    #F6F7FA;
  --gray-100:   #EEF0F4;
  --gray-200:   #E1E4EA;
  --gray-300:   #C6CAD4;
  --white:      #FFFFFF;

  --success:    #1E7A3D;
  --warning:    #92600A;
  --danger:     #A32118;

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,24,31,.06);
  --shadow-md: 0 10px 28px rgba(20,24,31,.10), 0 2px 6px rgba(20,24,31,.05);
  --shadow-lg: 0 28px 64px rgba(0,27,68,.22), 0 8px 20px rgba(20,24,31,.10);
  --shadow-gold: 0 10px 24px rgba(201,151,30,.22);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --sidebar-w: 280px;
  --header-h: 76px;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
html, body{ max-width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--gray-50);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}

h1,h2{ font-family:var(--font-display); font-weight:600; line-height:1.12; margin:0 0 .4em; letter-spacing:-.01em; }
h3,h4{ font-family:var(--font-body); font-weight:800; line-height:1.2; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:var(--blue); text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* A quiet section marker — not a tracked all-caps label, just a short rule
   and a sentence-case serif word that names what follows. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:italic 500 1rem/1 var(--font-display); color:var(--ink-faint);
}
.eyebrow::before{ content:''; width:26px; height:1.5px; background:var(--gold-line); }

.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--radius-pill); font-weight:700; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition:transform .15s var(--ease-out), box-shadow .2s, background .2s, color .2s;
  transform:translateZ(0);
}
.btn:active{ transform:scale(.97) translateY(1px); }
.btn-primary{ background:var(--red); color:var(--white); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(20,24,31,.08); }
.btn-primary:hover{ background:var(--red-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 20px rgba(20,24,31,.16); transform:translateY(-2px); }
.btn-gold{ background:var(--gold); color:var(--blue-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(20,24,31,.08); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 20px rgba(20,24,31,.16); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:var(--white); transform:translateY(-2px); }
.btn-blue{ background:var(--blue); color:var(--white); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(20,24,31,.08); }
.btn-blue:hover{ background:var(--blue-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(20,24,31,.16); transform:translateY(-2px); }
.btn-ghost{ background:var(--gray-100); color:var(--ink); border-color:var(--gray-200); }
.btn-ghost:hover{ background:var(--gray-200); }
.btn-sm{ padding:9px 18px; font-size:.82rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* ---------- Top public header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-200);
}
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); }
.brand-mark{
  width:48px; height:48px; border-radius:50%; object-fit:contain; flex-shrink:0;
  background:var(--white); box-shadow:var(--shadow-md); padding:3px; border:2px solid var(--gold);
  transition:transform .4s var(--ease-out);
}
.brand:hover .brand-mark{ transform:rotate(18deg); }
.brand-text b{ display:block; font-size:1rem; }
.brand-text small{ display:block; font-size:.72rem; color:var(--ink-soft); letter-spacing:.04em; }

.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  position:relative; padding:10px 14px; font-weight:600; font-size:.92rem; color:var(--ink-soft);
  transition:color .2s;
}
.nav-links a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:5px; height:2px;
  background:var(--red); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease-out);
}
.nav-links a:hover, .nav-links a.active{ color:var(--red); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.hamburger{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    linear-gradient(to bottom, transparent 75%, rgba(0,0,0,.14) 100%),
    radial-gradient(1100px 620px at 78% -10%, rgba(255,209,0,.18), transparent 60%),
    linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 55%, var(--red-dark) 130%);
  color:var(--white);
  padding:84px 0 150px;
}
/* Fine sunburst rays, echoing the seal's sun — a quiet nod to the emblem
   rather than a literal repeat of it. Very low opacity, decorative only. */
.hero::before{
  content:''; position:absolute; top:-30%; right:-10%; width:900px; height:900px;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0deg 3deg, transparent 3deg 12deg);
  border-radius:50%; opacity:.5; pointer-events:none;
}
/* A whisper of grain so the gradient reads as engraved paper, not a flat CSS wash */
.hero::after{
  content:''; position:absolute; inset:0;
  background-image:var(--noise);
  mix-blend-mode:overlay; pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; z-index:2; }
.hero h1{ font-size:clamp(2.3rem,4.4vw,3.6rem); font-weight:500; color:var(--white); margin-bottom:.4em; }
.hero p.lead{ color:rgba(255,255,255,.86); font-size:1.08rem; max-width:52ch; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }
.hero-stats{ display:flex; gap:32px; margin-top:44px; flex-wrap:wrap; }
.hero-stats div{ position:relative; padding-left:16px; }
.hero-stats div::before{ content:''; position:absolute; left:0; top:3px; bottom:3px; width:2px; background:var(--gold-line); }
.hero-stats div b{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--gold); }
.hero-stats div span{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* Signature element: the Pathway Deck — fanned 3D card stack */
.pathway-deck{
  position:relative; height:420px; perspective:1400px;
}
.pathway-deck .seal{
  position:absolute; top:8%; left:50%; width:150px; height:150px; margin-left:-75px;
  border-radius:50%; background:var(--white);
  box-shadow:0 30px 60px rgba(0,27,68,.4), 0 0 0 3px var(--gold-line), 0 0 0 5px rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center;
  animation:floatSeal 6s ease-in-out infinite;
  transform-style:preserve-3d;
  padding:10px;
}
.pathway-deck .seal img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
@keyframes floatSeal{ 0%,100%{ transform:translateY(0) rotate(0deg);} 50%{ transform:translateY(-14px) rotate(4deg);} }

.deck-cards{ position:absolute; inset:auto 0 0 0; height:250px; transform-style:preserve-3d; }
.deck-card{
  position:absolute; bottom:0; left:50%; width:150px; height:190px;
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:16px 14px; color:var(--ink);
  transform-origin:bottom center;
  transition:transform .5s var(--ease-out), box-shadow .5s;
}
.deck-card b{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--red); }
.deck-card span{ display:block; font-size:.72rem; color:var(--ink-soft); margin-top:6px; line-height:1.3; }
.deck-card:hover{ transform:translateX(-50%) translateY(-18px) !important; box-shadow:0 30px 50px rgba(0,0,0,.3); z-index:20 !important; }

/* fan positions set via inline transform per card (data-index) */

/* ---------- Sections ---------- */
.section{ padding:88px 0; }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head.left{ margin:0 0 44px; text-align:left; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-top:.3em; }

.grid{ display:grid; gap:26px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

/* Tilt cards */
.tilt-card{
  background:var(--white); border-radius:var(--radius-lg); padding:28px 24px;
  box-shadow:var(--shadow-sm); border:1px solid var(--gray-200);
  transform-style:preserve-3d; transition:transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
  will-change:transform;
}
.tilt-card:hover{ box-shadow:var(--shadow-lg); border-color:transparent; }
.tilt-card .ic{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:16px; background:var(--red-light); color:var(--red);
  transform:translateZ(30px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -1px 3px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.04);
}
.tilt-card h3{ font-size:1.05rem; transform:translateZ(20px); }
.tilt-card p{ font-size:.9rem; margin-bottom:14px; transform:translateZ(10px); }
.tilt-card a.more{ font-weight:700; font-size:.85rem; color:var(--blue); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }

::selection{ background:var(--gold); color:var(--blue-dark); }

/* ---------- Official government trust bar ---------- */
.gov-bar{ background:var(--blue-dark); color:rgba(255,255,255,.88); font-size:.76rem; }
.gov-bar-inner{ display:flex; align-items:center; gap:9px; padding:7px 24px; }
.gov-bar-flag{
  width:16px; height:11px; flex-shrink:0; border-radius:2px; overflow:hidden;
  background:linear-gradient(to bottom, var(--blue) 50%, var(--red) 50%);
  position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.3);
}
.gov-bar-flag::after{
  content:''; position:absolute; top:50%; left:2px; width:4px; height:4px; margin-top:-2px;
  background:var(--gold); border-radius:50%;
}

/* ---------- Footer ---------- */
.site-footer{ position:relative; overflow:hidden; background:var(--ink); color:rgba(255,255,255,.75); padding:56px 0 28px; border-top:2px solid var(--gold-line); }
.site-footer::after{
  content:''; position:absolute; inset:0; background-image:var(--noise);
  mix-blend-mode:overlay; pointer-events:none;
}
.site-footer .container{ position:relative; z-index:1; }
.site-footer h4{ color:var(--white); font-size:.95rem; margin-bottom:14px; }
.site-footer a{ color:rgba(255,255,255,.68); font-size:.88rem; }
.site-footer a:hover{ color:var(--gold); }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:36px; }
.footer-bottom{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:.78rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ============================================================
   AUTH PAGES (login / register)
   ============================================================ */
.auth-wrap{
  min-height:100vh; display:grid; grid-template-columns:1fr 1fr;
  background:var(--white);
}
.auth-visual{
  position:relative; overflow:hidden; color:var(--white); padding:60px;
  background:linear-gradient(155deg, var(--blue-dark), var(--blue) 60%, var(--red-dark) 140%);
  display:flex; flex-direction:column; justify-content:space-between;
}
.auth-visual::after{
  content:''; position:absolute; inset:0; background-image:var(--noise);
  mix-blend-mode:overlay; pointer-events:none;
}
.auth-visual > *{ position:relative; z-index:1; }
.auth-visual .seal-lg{
  width:120px; height:120px; border-radius:50%; background:var(--white); padding:10px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 20px 50px rgba(0,27,68,.4), 0 0 0 3px var(--gold-line), 0 0 0 5px rgba(255,255,255,.6);
  animation:floatSeal 6s ease-in-out infinite;
}
.auth-visual .seal-lg img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.auth-visual blockquote{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; max-width:26ch; margin:0; }
.auth-visual .tags{ display:flex; gap:10px; flex-wrap:wrap; }
.auth-visual .tags span{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); padding:8px 14px; border-radius:var(--radius-pill); font-size:.78rem; font-weight:600; }

.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card{ width:100%; max-width:420px; }
.auth-card .brand{ margin-bottom:28px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; color:var(--ink); }
.field .hint{ font-size:.76rem; color:var(--ink-soft); margin-top:5px; }
.input, select.input, textarea.input{
  width:100%; padding:13px 15px; border-radius:var(--radius-sm); border:1.6px solid var(--gray-300);
  font-size:.95rem; font-family:inherit; background:var(--white); color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
}
.input:focus{ border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-light); outline:none; }
.input.error{ border-color:var(--danger); }
.error-text{ color:var(--danger); font-size:.78rem; margin-top:5px; display:none; }
.field.has-error .error-text{ display:block; }
.field.has-error .input{ border-color:var(--danger); }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.check-row{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--ink-soft); }
.between{ display:flex; justify-content:space-between; align-items:center; }
.divider{ display:flex; align-items:center; gap:12px; color:var(--ink-soft); font-size:.8rem; margin:22px 0; }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:var(--gray-200); }
.alert{ padding:13px 16px; border-radius:var(--radius-sm); font-size:.86rem; margin-bottom:16px; display:none; }
.alert.show{ display:block; }
.alert-error{ background:var(--red-light); color:var(--red-dark); border:1px solid #F7C7CB; }
.alert-success{ background:#E9F7EE; color:var(--success); border:1px solid #BFE7CC; }
.pw-strength{ height:5px; border-radius:3px; background:var(--gray-200); margin-top:8px; overflow:hidden; }
.pw-strength i{ display:block; height:100%; width:0%; background:var(--danger); transition:width .3s, background .3s; }

/* ============================================================
   APP SHELL (dashboard, admin)
   ============================================================ */
.app-shell{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; }
.sidebar-scrim{ display:none; } /* base state: hidden on all sizes, only shown+positioned via the mobile media query below */
.sidebar{
  background:var(--blue-dark); color:rgba(255,255,255,.86);
  padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:transform .3s var(--ease-out);
}
.sidebar .brand{ color:var(--white); padding:0 8px 20px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,.14); }
.sidebar .brand-text b{ color:var(--white); }
.sidebar .brand-text small{ color:rgba(255,255,255,.6); }
.nav-group-label{ font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); padding:16px 12px 8px; font-weight:700; }
.side-link{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px;
  font-size:.88rem; font-weight:600; color:rgba(255,255,255,.82); margin-bottom:2px;
  transition:background .2s, transform .2s, color .2s;
}
.side-link .ic{ width:22px; text-align:center; }
.side-link:hover{ background:rgba(255,255,255,.08); transform:translateX(3px); }
.side-link.active{ background:var(--red); color:var(--white); box-shadow:0 8px 18px rgba(206,17,38,.35); }

/* Expandable nav groups (Citizens Charter's siblings that have sub-programs) */
.side-group{ margin-bottom:2px; }
.side-group summary.side-parent{ cursor:pointer; list-style:none; justify-content:flex-start; }
.side-group summary.side-parent::-webkit-details-marker{ display:none; }
.side-label-text{ flex:1; }
.side-chevron{ font-size:.7rem; opacity:.6; transition:transform .2s; }
.side-group[open] > summary .side-chevron{ transform:rotate(180deg); }
.side-link.side-child{
  padding-left:40px; font-size:.82rem; font-weight:500; color:rgba(255,255,255,.68);
}
.side-link.side-child:hover{ transform:translateX(2px); }

.main-area{ background:var(--gray-50); min-height:100vh; }
.topbar{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; background:var(--white); border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:50;
}
.topbar .search{ display:flex; align-items:center; gap:10px; background:var(--gray-100); border-radius:var(--radius-pill); padding:9px 16px; width:320px; }
.topbar .search input{ border:none; background:transparent; outline:none; font-size:.86rem; width:100%; }
.topbar .user-chip{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar .user-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40vw; }
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--red); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; }
.content{ padding:28px; }

.stat-card{
  background:var(--white); border-radius:var(--radius-lg); padding:22px; border:1px solid var(--gray-200);
  display:flex; align-items:center; gap:16px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
.stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.stat-card .ic{
  width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -1px 3px rgba(0,0,0,.05);
  border:1px solid rgba(0,0,0,.04);
}
.stat-card b{ display:block; font-family:var(--font-display); font-size:1.5rem; }
.stat-card span{ font-size:.8rem; color:var(--ink-soft); }

.panel{ background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--gray-200); box-shadow:var(--shadow-sm); }
.panel-head{ padding:18px 22px; border-bottom:1px solid var(--gray-200); display:flex; justify-content:space-between; align-items:center; }
.panel-head h3{ font-size:1rem; margin:0; }
.panel-body{ padding:22px; }

table.data-table{ width:100%; border-collapse:collapse; font-size:.87rem; }
table.data-table th{ text-align:left; padding:12px 14px; background:var(--gray-50); color:var(--ink-soft); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--gray-200); }
table.data-table td{ padding:13px 14px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
table.data-table tr:hover td{ background:var(--gray-50); }
/* Every data table lives in a .panel-body — make that the horizontal
   scroll container on narrow screens instead of letting the table
   blow out the page layout. */
.panel-body:has(table.data-table){ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.panel-body:has(table.data-table) table.data-table{ min-width:640px; }
@media (min-width:769px){
  .panel-body:has(table.data-table) table.data-table{ min-width:0; }
}

.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--radius-pill); font-size:.72rem; font-weight:700; }
.badge-pending{ background:#FFF4DE; color:var(--warning); }
.badge-approved{ background:#E4F7E9; color:var(--success); }
.badge-rejected{ background:var(--red-light); color:var(--danger); }
.badge-review{ background:var(--blue-light); color:var(--blue); }

.icon-btn{ width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--gray-200); background:var(--white); cursor:pointer; transition:background .2s, transform .2s; }
.icon-btn:hover{ background:var(--gray-100); transform:translateY(-1px); }

/* modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,20,30,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ background:var(--white); border-radius:var(--radius-lg); width:100%; max-width:520px; box-shadow:var(--shadow-lg); transform:perspective(1000px) rotateX(6deg) scale(.96); opacity:0; transition:transform .3s var(--ease-out), opacity .3s; }
.modal-overlay.show .modal{ transform:perspective(1000px) rotateX(0) scale(1); opacity:1; }
.modal-head{ padding:20px 24px; border-bottom:1px solid var(--gray-200); display:flex; justify-content:space-between; align-items:center; }
.modal-body{ padding:24px; max-height:70vh; overflow-y:auto; }
.modal-foot{ padding:16px 24px; border-top:1px solid var(--gray-200); display:flex; justify-content:flex-end; gap:10px; }

.toast-wrap{ position:fixed; top:20px; right:20px; z-index:300; display:flex; flex-direction:column; gap:10px; }
.toast{ background:var(--ink); color:var(--white); padding:14px 18px; border-radius:12px; font-size:.85rem; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; animation:toastIn .35s var(--ease-out); }
.toast.success{ background:var(--success); } .toast.error{ background:var(--danger); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-10px) translateX(10px);} to{ opacity:1; transform:none; } }

/* utility */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.text-center{text-align:center}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .gap-8{gap:8px} .gap-14{gap:14px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .app-shell{ grid-template-columns:1fr; }
  .sidebar{ position:fixed; left:0; top:0; width:min(var(--sidebar-w), 85vw); z-index:150; transform:translateX(-100%); box-shadow:var(--shadow-lg); }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:140; }
  .sidebar-scrim.show{ display:block; }
  .hamburger.side-toggle{ display:inline-flex; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .pathway-deck{ height:340px; }
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .nav-links{ display:none; }
  .nav-links.nav-links--open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:absolute; top:var(--header-h); left:0; right:0;
    background:var(--white); padding:14px; box-shadow:var(--shadow-md);
    border-bottom:1px solid var(--gray-200);
  }
  .nav-links.nav-links--open a{ padding:13px 16px; }
  .hamburger.main-toggle{ display:inline-flex; }
  .topbar .search{ display:none; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
}

/* Animated hamburger -> X when a toggle is active */
.hamburger span{ transition:transform .25s var(--ease-out), opacity .2s; }
.hamburger.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:600px){
  .gov-bar-inner{ padding:6px 16px; font-size:.7rem; }
  .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; }
  .row-2{ grid-template-columns:1fr; gap:0; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero{ padding:50px 0 100px; }
  .section{ padding:56px 0; }
  .content{ padding:16px; }
  .topbar{ padding:0 16px; }
  .pathway-deck{ height:300px; }
  .auth-form-side{ padding:28px 20px; }
}
@media (max-width:480px){
  .container{ padding:0 16px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-stats{ gap:20px; }
}
@media (max-width:380px){
  .hero h1{ font-size:1.7rem; }
  .hero p.lead{ font-size:1rem; }
  .brand-text small{ display:none; }
  .btn{ padding:12px 18px; font-size:.88rem; }
  .pathway-deck{ height:260px; }
  .deck-card{ width:130px; height:170px; padding:14px 12px; }
  :root{ --header-h:64px; }
  .site-header .bar{ height:64px; }
}

/* ---------- Mobile hardening ---------- */
@media (max-width:768px){
  /* iOS Safari auto-zooms the page when a focused input's font-size is under
     16px — this is the #1 cause of a site "feeling broken" on an iPhone even
     when the layout itself is fine. Force all form fields to 16px on mobile. */
  input, select, textarea, .input, .topbar .search input{ font-size:16px !important; }

  /* Header rows that pair a title with one or more buttons can overflow a
     320–375px screen if they're not allowed to wrap. */
  .panel-head, .between{ flex-wrap:wrap; row-gap:10px; }

  /* Bigger, easier-to-tap touch targets on small screens */
  .icon-btn{ width:40px; height:40px; }
  .hamburger, .hamburger.main-toggle{ width:44px; height:44px; }

  /* Long unbroken strings (emails, long job/company names) shouldn't be able
     to force horizontal scroll on a narrow viewport. Tables are excluded —
     those already scroll horizontally by design via .panel-body:has(table). */
  h1,h2,h3,p,.side-link{ overflow-wrap:break-word; word-break:break-word; }
}
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
  background:var(--blue); color:var(--white); padding:12px 20px; border-radius:0 0 8px 0;
  z-index:1000; font-weight:700; font-size:.9rem;
}
.skip-link:focus{
  left:0; top:0; width:auto; height:auto; outline:3px solid var(--gold);
}

.hamburger{
  width:42px; height:42px; border-radius:10px; border:1px solid var(--gray-200); background:var(--white);
  align-items:center; justify-content:center; cursor:pointer; flex-direction:column; gap:4px;
}
.hamburger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; }