/* ============================================================
   EUCCDB, glass.css
   The site-wide liquid glass design language, extracted from the
   2026 landing page. Load AFTER css/fonts.css on every page:

     <link rel="stylesheet" href="/css/glass.css">

   Provides: brand tokens, the animated sky background, the glass
   surface primitives (.glass, .pill-btn, .glass-chip), the shared
   floating nav, form controls, and the shared modal shell. Pages
   keep only their own layout CSS; visual identity lives here.
   Web approximation of Apple's Liquid Glass material: backdrop
   blur + saturation, white rim light, capsule shapes, springy
   press physics.
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/fonts/montserrat-var.woff2) format('woff2');
}

:root {
  --navy:      #0A2240;
  --sky:       #0099CC;
  --sky-deep:  #007AAD;
  --sky-soft:  #8FD4EF;
  --stamp:     #F5C518;

  --text:      #0A2240;
  --text-dim:  #3D5470;
  --text-faint:#6B8099;

  --glass-bg:     rgba(255,255,255,.34);
  --glass-border: rgba(255,255,255,.75);
  --glass-blur:   26px;
  --glass-sat:    170%;
  --glass-shadow: 0 20px 50px -18px rgba(10,34,64,.35);

  --r-card: 28px;
  --pill:   999px;

  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
.glass-page {
  overflow-x:clip;
  font-family:'Inter', system-ui, sans-serif;
  background:#DCEDF8;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.glass-page h1, .glass-page h2, .glass-page h3 {
  font-family:'Montserrat','Inter',system-ui,sans-serif;
  letter-spacing:-0.02em; text-wrap:balance; color:var(--navy);
}
.glass-page ::selection { background:rgba(0,153,204,.25); }

/* ---------- Sky: fixed light gradient + drifting colour ---------- */
.sky {
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, #C9E4F6 0%, #E4F1FA 34%, #F2F8FC 60%, #D8EBF8 100%);
}
.sky-glow { position:absolute; border-radius:50%; will-change:transform; }
.sky-glow.g1 { width:60vw; height:60vw; left:-16vw; top:-14vw; opacity:.8;
  background:radial-gradient(circle, rgba(0,153,204,.38), transparent 62%);
  animation:drift1 44s ease-in-out infinite alternate; }
.sky-glow.g2 { width:48vw; height:48vw; right:-12vw; top:16vh; opacity:.9;
  background:radial-gradient(circle, rgba(255,255,255,.95), transparent 60%);
  animation:drift2 56s ease-in-out infinite alternate; }
.sky-glow.g3 { width:54vw; height:54vw; left:20vw; bottom:-20vw; opacity:.7;
  background:radial-gradient(circle, rgba(143,212,239,.55), transparent 62%);
  animation:drift3 50s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform:translate(10vw, 8vh) scale(1.15); } }
@keyframes drift2 { to { transform:translate(-8vw, 12vh) scale(1.08); } }
@keyframes drift3 { to { transform:translate(-7vw, -9vh) scale(1.18); } }

/* ---------- Glass surfaces ---------- */
.glass {
  position:relative;
  isolation:isolate;
  background:
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 100%),
    var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(10,34,64,.06);
  border-radius:var(--r-card);
}

.glass-chip {
  display:inline-flex; align-items:center; gap:11px;
  padding:13px 20px; border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.85);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.35));
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 20px -12px rgba(10,34,64,.3), inset 0 1px 0 #fff;
  font:600 .95rem/1.3 'Inter',sans-serif; color:var(--navy);
}
.glass-chip i { color:var(--sky); }

/* ---------- Buttons ---------- */
.pill-btn {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px;
  border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.3));
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  box-shadow:
    0 8px 24px -10px rgba(10,34,64,.35),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(10,34,64,.06);
  color:var(--navy);
  font:600 0.9875rem/1 'Inter',sans-serif;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .45s var(--spring), box-shadow .3s ease, background-color .3s ease;
}
.pill-btn:hover {
  transform:translateY(-2px) scale(1.03);
  background-color:rgba(255,255,255,.55);
  box-shadow:0 14px 32px -12px rgba(10,34,64,.45), inset 0 1px 0 #fff;
}
.pill-btn:active { transform:scale(1.06,.94); transition-duration:.12s; }
.pill-btn:focus-visible { outline:2px solid var(--sky); outline-offset:3px; }
.pill-btn[disabled] { opacity:.55; pointer-events:none; }

/* the ONE tinted element per view: the primary action */
.pill-btn.tinted {
  background:linear-gradient(180deg, #19ADDE, #0099CC 55%, #0089BE);
  border-color:rgba(255,255,255,.55);
  color:#fff;
  text-shadow:0 1px 2px rgba(6,60,84,.3);
  box-shadow:
    0 12px 28px -10px rgba(0,122,173,.6),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(6,60,84,.25);
}
.pill-btn.tinted:hover { background:linear-gradient(180deg, #2BB9E8, #00A5DB 55%, #0095CE); }
.pill-btn.tinted::after {
  content:''; position:absolute; top:-30%; bottom:-30%; left:-70%; width:42%;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.5) 50%, transparent 80%);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.pill-btn.tinted:hover::after { animation:glass-sheen .9s ease-out forwards; }
@keyframes glass-sheen { 0%{left:-70%;opacity:0} 15%{opacity:1} 100%{left:135%;opacity:0} }

/* danger variant for destructive confirms */
.pill-btn.danger {
  background:linear-gradient(180deg, #E5484D, #D93036 60%, #C92A30);
  border-color:rgba(255,255,255,.5);
  color:#fff;
}

/* ---------- Shared floating nav ---------- */
.glass-nav {
  position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:100;
  width:min(1180px, calc(100vw - 24px));
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px 9px 10px;
  border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.8);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.3));
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 16px 44px -16px rgba(10,34,64,.4), inset 0 1px 0 #fff;
}
.glass-logo {
  display:inline-flex; align-items:center; flex-shrink:0;
  padding:5px 18px; border-radius:var(--pill);
  background:#fff;
  box-shadow:0 3px 12px -4px rgba(10,34,64,.3);
}
.glass-logo img { height:63px; width:auto; max-width:none; display:block; }

/* logo-nav.png is an OPAQUE rectangle: no alpha channel, white ground, ink running
   to within 1% of every edge. Its square corners therefore paint on top of any
   stadium pill whose horizontal padding is smaller than the pill's corner radius,
   which is what made the mark spill out of the pill on the candidate dashboard.
   Clip every logo pill to its own rounded outline so the mark can never escape it,
   at any logo height, on any page. Fix the shape here, never per page. */
.glass-logo,
.logo,
.nav-logo,
.reg-logo,
.card-logo,
.wrap-logo { overflow:hidden; }
.glass-nav-link {
  padding:10px 20px; border-radius:var(--pill); white-space:nowrap;
  font:600 .9rem/1 'Inter',sans-serif; color:var(--navy); text-decoration:none;
  border:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease;
}
.glass-nav-link:hover { background:rgba(255,255,255,.6); border-color:#fff; }

/* ---------- Forms ---------- */
.glass-field { display:flex; flex-direction:column; gap:7px; }
.glass-field label {
  font:600 .8125rem/1 'Inter',sans-serif; color:var(--text-dim); letter-spacing:.02em;
}
.glass-input, .glass-select, .glass-textarea {
  font-family:'Inter',sans-serif; font-size:.95rem; color:var(--navy);
  width:100%;
  padding:13px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 #fff, 0 4px 14px -10px rgba(10,34,64,.3);
  outline:none;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.glass-input::placeholder, .glass-textarea::placeholder { color:var(--text-faint); }
.glass-input:focus, .glass-select:focus, .glass-textarea:focus {
  border-color:var(--sky);
  background:rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 3px rgba(0,153,204,.18);
}
.glass-textarea { resize:vertical; min-height:130px; line-height:1.6; }
.glass-select {
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D5470' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
}
.glass-error { font-size:.83rem; color:#C62828; }
.glass-help  { font-size:.8rem; color:var(--text-faint); }

/* ---------- Shared modal shell ---------- */
.glass-modal-backdrop {
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(10,34,64,.3);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
}
.glass-modal-backdrop.open { display:flex; }
.glass-modal {
  position:relative; max-width:480px; width:100%; max-height:88dvh; overflow:auto;
  padding:36px 32px; border-radius:28px;
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(236,246,252,.9));
  box-shadow:0 40px 90px -30px rgba(10,34,64,.6), inset 0 1px 0 #fff;
  animation:glass-pop .4s var(--spring);
  color:var(--text);
  font-family:'Inter',sans-serif;
}
@keyframes glass-pop { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }
.glass-modal-close {
  position:absolute; top:16px; right:16px; width:34px; height:34px;
  border-radius:50%; border:1px solid rgba(10,34,64,.12);
  background:rgba(255,255,255,.8); color:var(--text-dim); cursor:pointer;
  transition:background-color .2s ease, transform .3s var(--spring);
}
.glass-modal-close:hover { background:#fff; transform:scale(1.08); }
.glass-modal h2 {
  font-family:'Montserrat','Inter',sans-serif;
  font-size:1.5rem; color:var(--navy); margin-bottom:12px; letter-spacing:-0.02em;
}
.glass-modal p { font-size:.94rem; color:var(--text-dim); line-height:1.65; }

/* ---------- Scroll reveal ---------- */
.sr { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.sr.on { opacity:1; transform:none; }
.sr[data-d="2"] { transition-delay:.12s; }
.sr[data-d="3"] { transition-delay:.24s; }
.sr[data-d="4"] { transition-delay:.36s; }

/* ---------- Fallbacks and preferences ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .glass-nav, .pill-btn, .glass-chip, .glass-modal { background:rgba(255,255,255,.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-nav, .pill-btn, .glass-chip, .glass-modal {
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(255,255,255,.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-glow { animation:none !important; }
  .sr { opacity:1; transform:none; transition:none; }
  .pill-btn, .glass-modal { transition:none; animation:none; }
}

@media (max-width: 960px) {
  :root { --glass-blur:16px; }
  .glass-logo img { height:44px; }
  .glass-logo { padding:5px 14px; }
}