/* TAWAJDM shared design system — used by every page (index, decoder, eligibility, compare,
   search) so header/brand/card/badge/button/footnote markup can't drift out of sync between
   pages. Page-specific layout (grids, drop zone, gradebox, vcard/lcard, search bar, etc.) stays
   inline in each page's own <style> block. */

:root{
  --bg:#080a0e; --bg2:#12161f; --card:#161b26; --line:#242b3a;
  --red:#e2402f; --red2:#ff5b45; --white:#f3f4f6; --gray:#9aa3b2; --gray2:#6b7280;
  --green:#3ecf8e; --amber:#e8b339; --dusk:#3f3e49;
  --glass:rgba(20,24,34,.55); --glass-line:rgba(255,255,255,.08); --ease-out:cubic-bezier(.16,1,.3,1);
  --font-display:'Barlow Condensed','Segoe UI',Arial,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font:var(--font-body); /* kept for any legacy var(--font) references */
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font-body);
  position:relative;overflow-x:hidden;isolation:isolate;}

/* ---- Ambient glow mesh — sunset-amber top blob, dusk-blue bottom blob, echoing the
   dock-at-golden-hour reference photo's warm/cool split. Fixed + pointer-events:none so it
   never intercepts clicks or affects layout/scroll height. ---- */
body::before,body::after{content:'';position:fixed;border-radius:50%;filter:blur(90px);
  z-index:0;pointer-events:none;}
body::before{width:560px;height:560px;top:-180px;left:50%;
  background:radial-gradient(circle,rgba(232,179,57,.16),transparent 70%);
  transform:translateX(-60%);animation:driftA 24s ease-in-out infinite alternate;}
body::after{width:460px;height:460px;bottom:-160px;right:-100px;
  background:radial-gradient(circle,rgba(63,62,73,.35),transparent 70%);
  animation:driftB 28s ease-in-out infinite alternate;}
@keyframes driftA{from{transform:translateX(-60%) translateY(0);}to{transform:translateX(-46%) translateY(36px);}}
@keyframes driftB{from{transform:translate(0,0);}to{transform:translate(-34px,-24px);}}

/* ---- Grain overlay — subtle filmic texture over everything, purely decorative. ---- */
.noise{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.wrap{max-width:960px;margin:0 auto;padding:0 20px 80px;position:relative;z-index:1;}

/* ---- Icons: inline SVG <use> against the sprite injected once per page after <body>. ---- */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;fill:none;flex-shrink:0;}

/* ---- Header / brand — dockside golden-hour photo as the site's visual anchor. Gradient
   overlay keeps the sky visible near the top (behind the logo) while darkening enough by the
   headline/badges for contrast, then fades into the page bg so it reads as one surface. ---- */
header{padding:64px 20px 30px;text-align:center;border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(8,10,14,.4) 0%,rgba(8,10,14,.86) 45%,var(--bg) 100%),
    url("hero-dock.jpg") center 38%/cover no-repeat;
  position:relative;z-index:1;}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;}
.brand-mark{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--red),#8c1f14);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;
  font-family:var(--font-display);letter-spacing:.02em;
  box-shadow:0 2px 10px rgba(226,64,47,.35), inset 0 1px 0 rgba(255,255,255,.18);}
.brand-name{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:.03em;}
.brand-name span{color:var(--red2);}
.brand-name a{color:inherit;text-decoration:none;}
.stripe{width:64px;height:3px;margin:0 auto 4px;border-radius:2px;
  background:linear-gradient(90deg,var(--red) 0 40%, var(--amber) 40% 65%, var(--line) 65% 100%);}
h1{font-family:var(--font-display);font-size:clamp(28px,4.6vw,44px);line-height:1.1;margin:16px 0 10px;
  font-weight:700;letter-spacing:.005em;text-shadow:0 2px 24px rgba(0,0,0,.5);
  background:linear-gradient(115deg,#fff 40%,var(--amber) 85%,var(--red2) 130%);-webkit-background-clip:text;
  background-clip:text;color:var(--white);-webkit-text-fill-color:transparent;}
header p{color:var(--gray);max-width:560px;margin:0 auto;font-size:15px;line-height:1.5;}
.badge-row{display:flex;gap:8px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-display);font-weight:600;
  letter-spacing:.02em;font-size:12.5px;color:var(--gray);border:1px solid var(--glass-line);padding:5px 11px;
  border-radius:20px;background:rgba(255,255,255,.03);backdrop-filter:blur(8px);}
.badge.warn{color:var(--amber);border-color:rgba(232,179,57,.4);}

/* ---- Cards — frosted glass over the ambient glow, hairline border, soft lift on hover. ---- */
.card{background:var(--glass);border:1px solid var(--glass-line);border-radius:16px;padding:22px;
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  animation:cardIn .4s var(--ease-out) both;position:relative;z-index:1;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -18px rgba(0,0,0,.6);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;}
.card:hover{transform:translateY(-3px);border-color:rgba(226,64,47,.3);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -18px rgba(226,64,47,.25), 0 12px 30px -18px rgba(0,0,0,.6);}
.card h2{font-family:var(--font-display);font-size:15px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--gray);margin:0 0 16px;font-weight:700;}
@keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ---- Forms (shared look; sizing tweaks stay per-page) ---- */
label{font-family:var(--font-body);}
input[type=date],input[type=number],input[type=text],select{
  font-family:var(--font-body);outline:none;transition:border-color .15s, box-shadow .15s;}
input:focus,select:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,64,47,.2);}
input:focus-visible,select:focus-visible,button:focus-visible,.radio-btn:focus-visible{
  box-shadow:0 0 0 3px rgba(226,64,47,.35);}

/* ---- Buttons — gradient fill + glow + a light sweep on hover. ---- */
.cta{font-family:var(--font-body);cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--red),var(--red2));
  transition:box-shadow .25s var(--ease-out), transform .2s var(--ease-out);}
.cta::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.25) 40%,transparent 60%);
  transform:translateX(-120%);transition:transform .6s var(--ease-out);}
.cta:hover:not(:disabled)::after{transform:translateX(120%);}
.cta:hover:not(:disabled){box-shadow:0 8px 24px -4px rgba(226,64,47,.5);transform:translateY(-1px);}
.cta:active:not(:disabled){transform:translateY(0);}

/* ---- Status banners ---- */
.status-banner{border-radius:12px;padding:16px 18px;margin-bottom:18px;font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:10px;backdrop-filter:blur(10px);}
.status-ok{background:rgba(62,207,142,.12);border:1px solid rgba(62,207,142,.4);color:var(--green);}
.status-warn{background:rgba(232,179,57,.12);border:1px solid rgba(232,179,57,.4);color:var(--amber);}
.status-bad{background:rgba(226,64,47,.12);border:1px solid rgba(226,64,47,.4);color:var(--red2);}

/* ---- Bento grid — used for index.html's tool showcase; degrades to 2-col then 1-col. ---- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:16px;
  grid-auto-flow:dense;margin-top:16px;}
.bento .card{margin:0;height:100%;display:flex;flex-direction:column;}
.b-featured{grid-column:span 2;grid-row:span 2;}
.b-normal{grid-column:span 2;}
.b-wide{grid-column:span 4;}
.bento-icon{width:30px;height:30px;color:var(--red2);margin-bottom:10px;}
.bento-cta{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;
  align-self:flex-start;font-family:var(--font-display);font-weight:700;font-size:13.5px;
  letter-spacing:.02em;color:var(--red2);text-decoration:none;}
.bento-cta:hover{text-decoration:underline;}
.bento-cta span{display:inline-block;transition:transform .2s var(--ease-out);}
.bento-cta:hover span{transform:translateX(3px);}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .b-featured{grid-column:span 2;grid-row:span 1;}
  .b-wide{grid-column:span 2;}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr;}
  .b-featured,.b-normal,.b-wide{grid-column:span 1;}
}

/* ---- Footer bits ---- */
.footnote{color:var(--gray2);font-size:11.5px;line-height:1.6;margin-top:26px;text-align:center;}
.back{display:block;text-align:center;margin-top:24px;color:var(--gray);font-size:13px;text-decoration:none;
  transition:color .15s;}
.back:hover{color:var(--red2);}

.b2b{margin-top:24px;border:1px solid var(--glass-line);border-radius:16px;padding:24px;
  background:linear-gradient(135deg,rgba(226,64,47,.1),var(--glass));backdrop-filter:blur(20px);
  text-align:center;}
.b2b h3{margin:0 0 8px;font-size:16px;font-family:var(--font-display);font-weight:700;letter-spacing:.01em;}
.b2b p{color:var(--gray);font-size:13.5px;max-width:520px;margin:0 auto;line-height:1.5;}
.b2b a{color:var(--red2);text-decoration:none;font-weight:700;}
.b2b a:hover{text-decoration:underline;}

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