/* ── gf.css — Grant Finder design system (GF6 redesign) ──────────────────────
   Loaded first by every Grant Finder page. Tokens only in :root (docs/claude/ui-polish.md §1):
   every colour, face, radius, shadow, curve and duration is a custom property; no literal
   in a rule. Paper pages with navy stage sections, the Malaysian palette: navy ink,
   crimson accent, gold, the bunga mark. Motion: transform/opacity only, hover motion on a
   fine pointer only, reduced motion keeps opacity and colour and drops movement. */

@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2")}

:root{
  /* paper */
  --bg:#F6F7FB;--bg2:#EDF0F8;--surface:#E4E8F3;--card:#FFFFFF;
  --border:rgba(19,35,91,.10);--border2:rgba(19,35,91,.18);
  --text:#121C45;--text2:#414B78;--muted:#5F6889;--muted2:#A9B0C8;
  /* brand */
  --navy:#13235B;--navy-2:#1E3177;--navy-deep:#0B1340;
  --accent:#C8193F;--accent-bright:#E8335F;--accent-ink:#A3132F;--accent-wash:rgba(200,25,63,.08);--accent-dim:rgba(200,25,63,.18);
  --on-accent:#FFFFFF;
  --gold:#F6C343;--gold-ink:#7A5200;--gold-wash:#FFF4D6;
  --green:#1F7A4D;--green-wash:#E3F5EA;--amber:#8A5600;--amber-wash:#FFF1D2;--red:#A3262A;--red-wash:#FBE3E2;
  --wa:#1FAD55;--wa-ink:#0D6A33;
  --focus:#C8193F;--white:#FFFFFF;--print-line:#999999;
  --red-line:rgba(163,38,42,.25);--amber-line:rgba(138,86,0,.25);--ring-track-stage:rgba(255,255,255,.18);--matcher-bg:rgba(255,255,255,.97);--matcher-line:rgba(255,255,255,.4);--mask-ink:rgba(0,0,0,.9);--art-shadow:rgba(0,0,0,.45);
  /* stage (navy) */
  --stage-bg:#0F1C52;--stage-deep:#070E33;--stage-bg2:#152566;--stage-card:rgba(255,255,255,.06);
  --stage-border:rgba(255,255,255,.12);--stage-border2:rgba(255,255,255,.22);
  --stage-text:#F2F4FF;--stage-text2:#C3CCF0;--stage-muted:#8E9AC9;
  --stage-accent:#FF5C84;--stage-accent-2:#E8335F;--stage-gold:#FFD166;--stage-glass:rgba(7,14,51,.62);
  --stage-aura:rgba(232,51,95,.28);--stage-aura-2:rgba(246,195,67,.18);--stage-grid:rgba(255,255,255,.05);
  /* type */
  --font-body:"Plus Jakarta Sans","Noto Sans SC","Noto Sans Tamil",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:var(--font-body);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-script:"Great Vibes",cursive;
  /* radius */
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-full:999px;
  /* shadow */
  --shadow:0 1px 2px rgba(19,35,91,.04),0 10px 34px -16px rgba(19,35,91,.16);
  --shadow-lg:0 30px 70px -34px rgba(19,35,91,.35),0 14px 34px -18px rgba(19,35,91,.14);
  --shadow-accent:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -12px rgba(200,25,63,.7);
  --shadow-accent-hover:inset 0 1px 0 rgba(255,255,255,.35),0 16px 30px -12px rgba(200,25,63,.8);
  --shadow-nav:0 8px 26px -18px rgba(19,35,91,.5);
  --nav-bg:rgba(246,247,251,.82);--nav-bg-scrolled:rgba(246,247,251,.94);
  /* motion */
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --ease-rise:cubic-bezier(0.16,1,0.3,1);--ease-expo:cubic-bezier(0.19,1,0.22,1);
  --t-press:120ms;--t-fast:160ms;--t-ui:200ms;--t-panel:260ms;--t-reveal:700ms;--t-hero:900ms;--t-stagger:70ms;--t-stagger-s:60ms;
  /* stage art: constant or one-off motion, never UI feedback */
  --t-bloom:1.3s;--t-bloom-step:.08s;--t-art-fade:.8s;--t-art-wait:.7s;--t-rise-step:.1s;--t-matcher-wait:.35s;--t-pulse:1.8s;--t-drift:18s;--t-turn:90s;--t-turn-slow:120s;
  --gutter:16px;--maxw:1180px;
  color-scheme:light;
}
@media (min-width:481px){:root{--gutter:22px}}
@media (min-width:561px){:root{--gutter:32px}}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:400 15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent-ink)}
svg{max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;text-wrap:balance;line-height:1.12}
::selection{background:var(--accent-dim)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.gf-wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.gf-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── type ── */
.gf-eyebrow{display:inline-flex;align-items:flex-start;gap:10px;margin:0;font:500 11px/1.5 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.gf-eyebrow::before{content:"";flex:none;width:16px;height:1px;margin-top:.75em;background:var(--accent)}
.gf-label-m{font:500 11px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gf-h1{margin:0 0 10px;font-size:clamp(1.75rem,1.2rem + 2.2vw,2.5rem);line-height:1.1}
.gf-h2{margin:34px 0 10px;font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem)}
.gf-h3{margin:0 0 6px;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.gf-h3 a{color:inherit;text-decoration:none}
.gf-lead{margin:0 0 18px;max-width:40em;color:var(--text2);font-size:clamp(1rem,.95rem + .3vw,1.0625rem);line-height:1.6}
.gf-quiet{color:var(--muted);font-size:.8125rem}
.gf-small{font-size:.8125rem}
.gf-mt0{margin-top:0}
.gf-num{font-variant-numeric:tabular-nums}
[lang="zh"] .gf-eyebrow,[lang="ta"] .gf-eyebrow,[lang="zh"] .gf-label-m,[lang="ta"] .gf-label-m{letter-spacing:.04em}

/* ── buttons: press scale + separate hover lift so they compose ── */
.gf-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:44px;padding:0 20px;border-radius:var(--r-md);border:1px solid transparent;font:700 15px/1.2 var(--font-body);text-decoration:none;text-align:center;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out),translate var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.gf-btn:active{transform:scale(.97)}
.gf-btn[disabled]{opacity:.6;cursor:default}
.gf-btn-red{background:linear-gradient(180deg,var(--accent-bright),var(--accent));color:var(--on-accent);box-shadow:var(--shadow-accent)}
.gf-btn-red:hover{box-shadow:var(--shadow-accent-hover)}
.gf-btn-navy{background:var(--navy);color:var(--white)}
.gf-btn-navy:hover{background:var(--navy-2)}
.gf-btn-line{background:var(--card);color:var(--text);border-color:var(--border2);font-weight:600}
.gf-btn-line:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
.gf-btn-wa{background:var(--wa);color:var(--white)}
.gf-btn-alert{background:var(--accent-wash);color:var(--accent-ink);border-color:var(--accent-dim)}
.gf-btn-s{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--border2);background:var(--card);color:var(--text);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.gf-btn-s:active,.gf-chip:active{transform:scale(.97)}
.gf-btn-s:hover{border-color:var(--accent);color:var(--accent-ink)}
.gf-btn-ghost{background:transparent;color:inherit;border-color:var(--stage-border2)}
.gf-btn-ghost:hover{background:var(--stage-card);color:var(--white);border-color:var(--white)}
.gf-btn-sm{min-height:40px;font-size:14px}
.gf-link{background:transparent;border:0;padding:6px 0;color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.gf-arr{display:inline-block;transition:translate var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .gf-btn-red:hover{translate:0 -2px}
  .gf-btn:hover .gf-arr,.gf-btn-s:hover .gf-arr{translate:3px 0}
}
[dir="rtl"] .gf-arr{scale:-1 1}

/* ── fields ── */
.gf-label{display:block;font-weight:600;margin:0 0 6px}
.gf-row{display:flex;gap:8px;min-width:0}
.gf-input{flex:1 1 auto;min-width:0;width:100%;height:46px;padding:0 12px;border:1px solid var(--border2);border-radius:var(--r-sm);font-size:16px;color:var(--text);background:var(--card);transition:border-color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out)}
.gf-input:focus-visible{outline:2px solid transparent;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
select.gf-input{appearance:auto}
.gf-cc{display:inline-flex;align-items:center;padding:0 10px;height:46px;border:1px solid var(--border2);border-radius:var(--r-sm);background:var(--bg2);font-weight:600;flex-shrink:0}
.gf-code{letter-spacing:.5em;text-align:center;font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.gf-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text2)}
.gf-check input{margin-top:3px;width:18px;height:18px;flex-shrink:0;accent-color:var(--accent)}
.gf-or{margin:4px 0 0;text-align:center;font:500 11px/1.5 var(--font-mono);color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.gf-stack{display:flex;flex-direction:column;gap:12px}

/* ── chips (toggle buttons) ── */
.gf-chips{display:flex;flex-wrap:wrap;gap:8px}
.gf-chip{min-height:40px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--border2);background:var(--card);color:var(--text);font-weight:600;font-size:14px;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.gf-chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
a.gf-chip{display:inline-flex;align-items:center;text-decoration:none}
.gf-chip-s{min-height:30px;padding:0 10px;font-size:12px}
@media (hover:hover) and (pointer:fine){.gf-chip:hover{border-color:var(--navy)}.gf-chip[aria-pressed="true"]:hover{background:var(--navy-2)}}

/* ── pills (status) ── */
.gf-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.gf-pill{display:inline-flex;align-items:center;gap:4px;font:600 12px/1.4 var(--font-body);padding:3px 9px;border-radius:var(--r-sm);background:var(--bg2);color:var(--text2);font-variant-numeric:tabular-nums;white-space:nowrap}
.gf-fit-hi{background:var(--green-wash);color:var(--green)}.gf-fit-mid{background:var(--bg2);color:var(--text2)}.gf-fit-lo{background:var(--bg);color:var(--muted)}
.gf-type{background:var(--accent-wash);color:var(--accent-ink)}
.gf-dl-urgent{background:var(--red-wash);color:var(--red)}.gf-dl-soon{background:var(--amber-wash);color:var(--amber)}
.gf-fund-hi{background:var(--red-wash);color:var(--red)}.gf-fund-mid{background:var(--amber-wash);color:var(--amber)}
.gf-st-published{background:var(--accent-wash);color:var(--accent-ink)}.gf-st-draft{background:var(--bg2);color:var(--text2)}.gf-st-review{background:var(--amber-wash);color:var(--amber)}
.gf-st-paused,.gf-st-overdue{background:var(--red-wash);color:var(--red)}.gf-st-expired,.gf-st-closed,.gf-st-archived{background:var(--surface);color:var(--muted)}
.gf-conf-high{background:var(--green-wash);color:var(--green)}.gf-conf-medium,.gf-conf-adviser_estimate{background:var(--amber-wash);color:var(--amber)}.gf-conf-low{background:var(--red-wash);color:var(--red)}

/* ── surfaces ── */
.gf-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin:0 0 14px;min-width:0;box-shadow:var(--shadow)}
.gf-card{max-width:460px;margin:20px auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:30px clamp(18px,5vw,30px);box-shadow:var(--shadow)}
.gf-card h1{margin:0 0 6px;font-size:26px}
.gf-sub{margin:0 0 18px;color:var(--text2);font-size:14px}
.gf-note{padding:10px 12px;border-radius:var(--r-sm);font-size:14px;font-weight:600;background:var(--amber-wash);color:var(--amber)}
.gf-note-ok{background:var(--green-wash);color:var(--green)}
.gf-note-err{background:var(--red-wash);color:var(--red)}
.gf-hr{border:0;border-top:1px solid var(--border);margin:20px 0}
.gf-list{margin:8px 0;padding-inline-start:20px}
.gf-list li{margin:4px 0}
.gf-row-between{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.gf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px}

/* ── top bar (glass over paper; light ink on a stage) ── */
.gf-top{position:sticky;top:0;z-index:40;background:var(--nav-bg);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--border);transition:box-shadow var(--t-panel) var(--ease-out),background-color var(--t-panel) var(--ease-out)}
.gf-top.scrolled{box-shadow:var(--shadow-nav);background:var(--nav-bg-scrolled)}
.gf-top-in{max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter);min-height:62px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.gf-brand{display:inline-flex;align-items:center;gap:10px;color:var(--navy);text-decoration:none;font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.gf-brand svg{flex:none}
.gf-by{display:inline-flex;align-items:baseline;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}
.gf-by b{font-family:var(--font-script);font-weight:400;font-size:22px;line-height:1;color:var(--navy)}
.gf-sp{flex:1 1 auto}
.gf-langs{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--border2);border-radius:var(--r-full);background:var(--card)}
.gf-langs button{min-height:30px;padding:0 10px;white-space:nowrap;border:0;border-radius:var(--r-full);background:transparent;color:var(--text2);font-size:12.5px;font-weight:700;transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out)}
.gf-langs button[aria-pressed="true"]{background:var(--navy);color:var(--white)}
.gf-band{height:3px;background:linear-gradient(90deg,var(--navy),var(--accent) 55%,var(--gold))}
.gf-main{max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;padding:28px var(--gutter) 72px;min-height:calc(100vh - 260px)}
.gf-foot{background:var(--navy-deep);color:var(--stage-text2);margin-top:48px}
.gf-foot-in{max-width:calc(var(--maxw) + 2*var(--gutter));margin:0 auto;padding:26px var(--gutter);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13px}
.gf-foot b{color:var(--white)}
.gf-foot .gf-quiet{color:var(--stage-muted);flex:1 1 320px}
@media (hover:hover) and (pointer:fine){.gf-langs button:hover{color:var(--text)}}

/* ── toast ── */
.gf-toast{position:fixed;inset-inline:16px;bottom:16px;margin:0 auto;max-width:520px;background:var(--navy);color:var(--white);padding:12px 16px;border-radius:var(--r-md);font-weight:600;box-shadow:var(--shadow-lg);z-index:60;animation:gf-toast-in var(--t-panel) var(--ease-out)}
.gf-toast-err{background:var(--red)}
@keyframes gf-toast-in{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* ── reveal system: hidden only when JS is present and the element is still off-screen ── */
html.js .gf-rv{opacity:0;transform:translateY(16px);transition:opacity var(--t-reveal) var(--ease-rise),transform var(--t-reveal) var(--ease-rise);transition-delay:calc(var(--i,0)*var(--t-stagger))}
html.js .gf-rv.in{opacity:1;transform:none}
html.js .gf-rv-scale{transform:translateY(10px) scale(.97)}
.gf-stagger>*{--i:0}
.gf-stagger>*:nth-child(2){--i:1}.gf-stagger>*:nth-child(3){--i:2}.gf-stagger>*:nth-child(4){--i:3}.gf-stagger>*:nth-child(5){--i:4}.gf-stagger>*:nth-child(6){--i:5}.gf-stagger>*:nth-child(7){--i:6}.gf-stagger>*:nth-child(8){--i:7}
.gf-stagger>*:nth-child(n+9){--i:8}

/* ── progress ring ── */
.gf-ring{position:relative;width:72px;height:72px;flex:none}
.gf-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gf-ring circle{fill:none;stroke-width:6}
.gf-ring .bg{stroke:var(--bg2)}
.gf-ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:1 1;transition:stroke-dashoffset var(--t-hero) var(--ease-expo)}
.gf-ring .fg.hi{stroke:var(--green)}.gf-ring .fg.mid{stroke:var(--gold-ink)}
.gf-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.gf-ring b small{font-size:10px;font-weight:700;margin-inline-start:1px}

/* ── bars ── */
.gf-bar{height:8px;border-radius:var(--r-full);background:var(--bg2);overflow:hidden;margin:10px 0}
.gf-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit;transform-origin:0 50%;transition:transform var(--t-hero) var(--ease-expo)}
.gf-bar-fund i{background:var(--gold-ink)}

/* ── tables ── */
.gf-table-wrap{position:relative;padding:0;overflow-x:auto}
.gf-table{width:100%;border-collapse:collapse;font-size:14px}
.gf-table th{text-align:start;font:500 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
.gf-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.gf-table tr:last-child td{border-bottom:0}
[lang="zh"] .gf-table th,[lang="ta"] .gf-table th{letter-spacing:0;text-transform:none;font-family:var(--font-body);font-size:12px}

/* ── reduced motion: opacity and colour stay, movement goes ── */
@media (prefers-reduced-motion:reduce){
  html.js .gf-rv{transform:none;transition-duration:var(--t-panel)}
  html.js .gf-rv-scale{transform:none}
  .gf-btn:active,.gf-btn-s:active,.gf-chip:active{transform:none}
  .gf-btn-red:hover,.gf-btn:hover .gf-arr{translate:none}
  .gf-toast{animation:none}
  .gf-ring .fg,.gf-bar i{transition:none}
}
@media print{.gf-top,.gf-band,.gf-foot,#gf-toast{display:none!important}}