/* Shared by every page: the colour tokens (light, dark by system setting, dark by choice)
   and the few base rules every page had. A page's own <style> comes after and wins.
   Pages that differ in dark mode set a hook in their own :root:
   --dark-bg, --dark-chip-bg (e.g. the tracker's chips are card-coloured, not inset). */
:root{
  color-scheme: light;
  /* Base palette */
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --accent:#64748b;         /* slate */
  --accent-strong:#475569;  /* darker slate */
  --border:#e5e7eb;
  --danger:#dc2626;
  --danger-bg:#fee2e2;
  --danger-fg:#991b1b;
  --radius:12px;
  --radius-sm:10px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 12px rgba(0,0,0,.05);
  --shadow-focus: 0 0 0 3px rgba(100,116,139,.18);

  /* Secondary text / links / chips / badges / notes */
  --text-secondary:#374151;
  --link:#0b5ed7;
  --chip-bg:#f1f5f9;
  --chip-fg:#334155;
  --chip-hover:#e2e8f0;
  --badge-stale-bg:#fee2e2;
  --badge-stale-fg:#991b1b;
  --badge-ok-bg:#dcfce7;
  --badge-ok-fg:#166534;
  --badge-warn-bg:#fef3c7;
  --badge-warn-fg:#92400e;
  --badge-new-bg:#dbeafe;
  --badge-new-fg:#1e40af;
  --sync-ok-bg:#dcfce7; --sync-ok-fg:#166534; --sync-off-bg:#fef3c7; --sync-off-fg:#92400e;
  --tag-pill-bg:#eef2ff;
  --tag-pill-fg:#3730a3;
  --priority-high-bg:#ede9fe;
  --priority-high-fg:#5b21b6;
  --priority-medium-bg:#fef3c7;
  --priority-medium-fg:#92400e;
  --priority-low-bg:#f1f5f9;
  --priority-low-fg:#475569;
  --note-bg:#eff6ff;
  --note-fg:#1e3a8a;
  --notes-bg:#f8fafc;

  /* Charts (coach page): one blue for single-series marks; an ordinal blue ramp for the funnel
     (later stage = stronger). Checked against the card surface in each theme. */
  --chart-1:#2a78d6;
  /* Categorical slots, fixed order: 1 blue, 2 orange, 3 aqua; plus a neutral for "none". */
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-none:#cbd5e1;
  --funnel-1:#86b6ef; --funnel-2:#5598e7; --funnel-3:#2a78d6; --funnel-4:#1c5cab; --funnel-5:#104281;

  /* Button sizing (welcome and pass use 42px) */
  --btn-h: 38px;
  --btn-w: 116px;

  /* CTA brand colors */
  --add-bg:#10b981;        /* emerald-500 */
  --add-bg-hover:#059669;  /* emerald-600 */

  /* Status accent colors (left borders) */
  --clr-strongmatch:#06b6d4; /* cyan-500 */
  --clr-prospect:#6366f1;    /* indigo-500 */
  --clr-unlikely:#94a3b8;    /* slate-400 */
  --clr-applied:#10b981;     /* emerald-500 */
  --clr-interview:#22c55e;   /* green-500 */
  --clr-offer:#f59e0b;       /* amber-500 */
  --clr-accepted:#16a34a;    /* green-600 */
  --clr-rejected:#ef4444;    /* red-500 */
  --clr-ghosted:#8b5cf6;     /* violet-500 */
  --clr-expired:#94a3b8;     /* slate-400 */
  --clr-withdrawn:#f97316;   /* orange-500 */
  --clr-declined:#fb7185;    /* rose-400 */
}

/* Dark: the same list twice, once for the system setting (unless the user picked light)
   and once for a user who picked dark. Keep the two blocks equal. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:var(--dark-bg, #0f172a);
    --card:#1e293b;
    --text:#e2e8f0;
    --muted:#94a3b8;
    --accent:#94a3b8;
    --accent-strong:#cbd5e1;
    --border:#334155;
    --danger:#f87171;
    --danger-bg:rgba(239,68,68,.18);
    --danger-fg:#fca5a5;
    --text-secondary:#cbd5e1;
    --link:#60a5fa;
    --chip-bg:var(--dark-chip-bg, #0f172a);
    --chip-fg:#cbd5e1;
    --chip-hover:#334155;
    --badge-stale-bg:rgba(239,68,68,.18);
    --badge-stale-fg:#fca5a5;
    --badge-ok-bg:rgba(34,197,94,.18);
    --badge-ok-fg:#86efac;
    --badge-warn-bg:rgba(245,158,11,.18);
    --badge-warn-fg:#fcd34d;
    --badge-new-bg:rgba(59,130,246,.2);
    --badge-new-fg:#93c5fd;
    --sync-ok-bg:rgba(34,197,94,.16); --sync-ok-fg:#86efac; --sync-off-bg:rgba(245,158,11,.18); --sync-off-fg:#fcd34d;
    --tag-pill-bg:rgba(99,102,241,.18);
    --tag-pill-fg:#c7d2fe;
    --priority-high-bg:rgba(139,92,246,.18);
    --priority-high-fg:#c4b5fd;
    --priority-medium-bg:rgba(245,158,11,.18);
    --priority-medium-fg:#fcd34d;
    --priority-low-bg:rgba(148,163,184,.18);
    --priority-low-fg:#cbd5e1;
    --note-bg:rgba(59,130,246,.15);
    --note-fg:#bfdbfe;
    --notes-bg:rgba(148,163,184,.1);
    --chart-1:#3987e5;
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-none:#475569;
    --funnel-1:#256abf; --funnel-2:#3987e5; --funnel-3:#6da7ec; --funnel-4:#9ec5f4; --funnel-5:#cde2fb;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:var(--dark-bg, #0f172a);
  --card:#1e293b;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --accent:#94a3b8;
  --accent-strong:#cbd5e1;
  --border:#334155;
  --danger:#f87171;
  --danger-bg:rgba(239,68,68,.18);
  --danger-fg:#fca5a5;
  --text-secondary:#cbd5e1;
  --link:#60a5fa;
  --chip-bg:var(--dark-chip-bg, #0f172a);
  --chip-fg:#cbd5e1;
  --chip-hover:#334155;
  --badge-stale-bg:rgba(239,68,68,.18);
  --badge-stale-fg:#fca5a5;
  --badge-ok-bg:rgba(34,197,94,.18);
  --badge-ok-fg:#86efac;
  --badge-warn-bg:rgba(245,158,11,.18);
  --badge-warn-fg:#fcd34d;
  --badge-new-bg:rgba(59,130,246,.2);
  --badge-new-fg:#93c5fd;
  --sync-ok-bg:rgba(34,197,94,.16); --sync-ok-fg:#86efac; --sync-off-bg:rgba(245,158,11,.18); --sync-off-fg:#fcd34d;
  --tag-pill-bg:rgba(99,102,241,.18);
  --tag-pill-fg:#c7d2fe;
  --priority-high-bg:rgba(139,92,246,.18);
  --priority-high-fg:#c4b5fd;
  --priority-medium-bg:rgba(245,158,11,.18);
  --priority-medium-fg:#fcd34d;
  --priority-low-bg:rgba(148,163,184,.18);
  --priority-low-fg:#cbd5e1;
  --note-bg:rgba(59,130,246,.15);
  --note-fg:#bfdbfe;
  --notes-bg:rgba(148,163,184,.1);
  --chart-1:#3987e5;
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70; --series-none:#475569;
  --funnel-1:#256abf; --funnel-2:#3987e5; --funnel-3:#6da7ec; --funnel-4:#9ec5f4; --funnel-5:#cde2fb;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
}

/* Each page has a light and a dark logo; only one shows. Two classes, so it beats a
   page's own .logo{ display:block } that comes later. */
.logo.logo-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-light{ display:none; }
  :root:not([data-theme="light"]) .logo-dark{ display:block; }
}
:root[data-theme="dark"] .logo-light{ display:none; }
:root[data-theme="dark"] .logo-dark{ display:block; }

/* Our logo in a page's header (decided 2026-10-18, brand/README.md): the UG mark, then "Ungated" in
   Righteous, as real text so it stays sharp and themed. --h is the mark's height; everything else
   follows it. Signed-out pages add the tagline under the name ("Ungate your job search"); signed-in
   pages use .lockup.wide, the name alone at the logo files' size.
   <a class="lockup" href="welcome" aria-label="Ungated: Ungate your job search">
     <img class="mark mark-light" src="mark-light.svg?v=b1bc66b61d" alt=""><img class="mark mark-dark" src="mark-dark.svg?v=6665bc9fb4" alt="">
     <span class="words" aria-hidden="true"><span class="name">Ungated</span><span class="tag">Ungate your job search</span></span></a> */
@font-face{ font-family:"Righteous"; src:url("righteous.woff2?v=60fa7d50b8") format("woff2"); font-display:swap; }
.lockup{ --h:48px; display:inline-flex; align-items:center; gap:calc(var(--h) * .28); color:var(--text); text-decoration:none; flex:none; }
.lockup .mark{ height:var(--h); width:auto; display:block; flex:none; }
.lockup .mark-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lockup .mark-light{ display:none; }
  :root:not([data-theme="light"]) .lockup .mark-dark{ display:block; }
}
:root[data-theme="dark"] .lockup .mark-light{ display:none; }
:root[data-theme="dark"] .lockup .mark-dark{ display:block; }
.lockup .words{ display:flex; flex-direction:column; gap:calc(var(--h) * .04); }
.lockup .name{ font-family:"Righteous", system-ui, sans-serif; font-weight:400; font-size:calc(var(--h) * .59); line-height:1; }
.lockup .tag{ font-family:"Righteous", system-ui, sans-serif; font-weight:400; font-size:calc(var(--h) * .26); line-height:1.1; color:var(--text-secondary); white-space:nowrap; }
.lockup.wide .name{ font-size:calc(var(--h) * .8); }

/* The public pages' footer (welcome, features, about, chart, help, terms, privacy): an empty
   <footer class="site-foot" data-jg-footer> that shared.js fills, so its links live in one place. */
.site-foot{ text-align:center; font-size:.86rem; color:var(--muted); margin:24px 0 0; padding-top:14px; border-top:1px solid var(--border); }
.site-foot a{ color:var(--muted); }
.site-foot a:hover{ color:var(--text); }
.site-foot a[aria-current]{ color:var(--text); font-weight:600; text-decoration:none; }
.site-foot p{ margin:6px 0 0; }

/* An organization's logo (jg.orgLogo): one image per theme, switched like ours; a logo with no
   dark-theme file sits on a white plate there. Pages size .org-logo. */
.org-logos{ display:inline-flex; align-items:center; }
.org-logo{ display:block; width:auto; }
.org-logo.on-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .org-logo.on-light{ display:none; }
  :root:not([data-theme="light"]) .org-logo.on-dark{ display:block; }
}
:root[data-theme="dark"] .org-logo.on-light{ display:none; }
:root[data-theme="dark"] .org-logo.on-dark{ display:block; }
.org-logo.plated{ background:#fff; border-radius:6px; padding:3px 7px; }
.org-name{ font-weight:700; color:var(--text); }

/* "Provided by" an organization, under our logo (jg.showProvidedBy). */
.provided-by{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted); text-decoration:none; }
.provided-by:hover{ color:var(--text); }
.provided-by .org-logo{ height:24px; max-width:160px; }