/* Easy Apply — design foundation.
 *
 * Loaded FIRST, before masar.css, so these are the defaults everything else builds on.
 * Three deliberate changes over what came before:
 *
 *  1. Real typefaces. The product ran on system-ui, which reads as "unstyled" in both
 *     scripts. IBM Plex Sans Arabic carries Latin and Arabic in one family with genuinely
 *     matched weights — rare, and the reason the Arabic side stops looking like an
 *     afterthought. Plus Jakarta Sans handles display. Both SIL Open Font Licence.
 *
 *  2. One grey family. The old palette mixed a warm cream page (#F7F5EF) with a cool purple
 *     accent, which is why surfaces looked muddy. Everything is now on a cool slate ramp.
 *
 *  3. Six semantic statuses, not three. An application is new, in progress, submitted,
 *     blocked, failed, interviewing or withdrawn — colour has to carry that, and every status
 *     also ships with a label and an icon so colour is never doing the work alone.
 */

/* Fonts are SELF-HOSTED (public/fonts, 492 KB of woff2). Not a CDN link, for three reasons:
 * a Google Fonts request is render-blocking on first paint, it fails entirely in restricted
 * networks, and it discloses every visitor's IP to a third party — which matters under PDPL.
 * Same typefaces, same SIL Open Font Licence, served from our own origin. */
@import url("/easyapply-fonts.css");

:root {
  /* ---------- type ----------
   * Almarai leads: drawn for Gulf corporate identity, cleaner and more confident at UI
   * sizes than Plex. Latin display stays Plus Jakarta. Almarai has 400/700/800; CSS
   * resolves 500-600 to 700 automatically. */
  --sans: "Almarai", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Plus Jakarta Sans", "Almarai", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- surfaces: one cool ramp, no warm/cool mixing ---------- */
  --paper:      #F5F7FA;   /* page */
  --card:       #FFFFFF;   /* raised surface */
  --card-sunk:  #F8FAFC;   /* inset wells, table stripes */
  --line:       #E2E8F0;   /* default border */
  --line-soft:  #EEF2F7;   /* hairlines, dividers */

  --text:       #172033;   /* primary */
  --text-2:     #64748B;   /* secondary */
  --text-3:     #94A3B8;   /* tertiary — never for anything that matters */

  /* ---------- brand: one accent, used sparingly ---------- */
  --stk:        #7047EB;
  --stk-deep:   #4B25C4;
  --stk-mid:    #238CEB;
  --stk-soft:   #EDE7FE;
  --glow:       108,67,240;

  /* ---------- semantic status ----------
   * Colour is a reinforcement, never the only signal: every badge carries text too. */
  --st-new:      #2563EB;  --st-new-bg:      #EFF6FF;   /* discovered / new match  */
  --st-progress: #0891B2;  --st-progress-bg: #ECFEFF;   /* queued / applying       */
  --st-done:     #15803D;  --st-done-bg:     #F0FDF4;   /* submitted / offer       */
  --st-wait:     #B45309;  --st-wait-bg:     #FFFBEB;   /* action required         */
  --st-fail:     #B91C1C;  --st-fail-bg:     #FEF2F2;   /* failed / rejected       */
  --st-interview:#7C3AED;  --st-interview-bg:#F5F3FF;   /* interview / assessment  */
  --st-idle:     #64748B;  --st-idle-bg:     #F1F5F9;   /* withdrawn / expired     */

  /* legacy aliases so existing markup keeps working while it is migrated */
  --go: var(--st-done);   --go-bg: var(--st-done-bg);
  --warn: var(--st-wait); --warn-bg: var(--st-wait-bg);
  --stop: var(--st-fail); --stop-bg: var(--st-fail-bg);

  /* ---------- depth: shadows tinted with the surface hue, one light source ---------- */
  --shadow-sm: 0 1px 2px rgba(23,32,51,.06);
  --shadow:    0 1px 2px rgba(23,32,51,.05), 0 8px 24px -12px rgba(23,32,51,.18);
  --shadow-lg: 0 2px 4px rgba(23,32,51,.05), 0 18px 44px -16px rgba(23,32,51,.26);
  --ring:      0 0 0 3px rgba(var(--glow),.28);

  --radius:  14px;
  --radius-sm: 9px;

  /* z-scale, so nothing reaches for 9999 */
  --z-base: 1; --z-sticky: 20; --z-overlay: 60; --z-modal: 80; --z-toast: 100;
}

:root[data-theme="dark"], :root:not([data-theme="light"]) {
  color-scheme: light;
}

/* Dark: same ramp, inverted. Kept genuinely neutral rather than purple-tinted, so the one
   accent still reads as the accent. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#0B1120; --card:#151C2C; --card-sunk:#111827;
    --line:#25304A; --line-soft:#1B2436;
    --text:#E8EDF7; --text-2:#9FB0C9; --text-3:#6B7C96;
    --stk:#8B69F5; --stk-deep:#B9A6F7; --stk-soft:#2A1F5C; --glow:139,105,245;
    --st-new:#60A5FA;       --st-new-bg:#101E36;
    --st-progress:#22D3EE;  --st-progress-bg:#0B2A33;
    --st-done:#4ADE80;      --st-done-bg:#0D2B1A;
    --st-wait:#FBBF24;      --st-wait-bg:#2E2410;
    --st-fail:#F87171;      --st-fail-bg:#2E1618;
    --st-interview:#A78BFA; --st-interview-bg:#221A44;
    --st-idle:#94A3B8;      --st-idle-bg:#1A2334;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 22px 50px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#0B1120; --card:#151C2C; --card-sunk:#111827;
  --line:#25304A; --line-soft:#1B2436;
  --text:#E8EDF7; --text-2:#9FB0C9; --text-3:#6B7C96;
  --stk:#8B69F5; --stk-deep:#B9A6F7; --stk-soft:#2A1F5C; --glow:139,105,245;
  --st-new:#60A5FA;       --st-new-bg:#101E36;
  --st-progress:#22D3EE;  --st-progress-bg:#0B2A33;
  --st-done:#4ADE80;      --st-done-bg:#0D2B1A;
  --st-wait:#FBBF24;      --st-wait-bg:#2E2410;
  --st-fail:#F87171;      --st-fail-bg:#2E1618;
  --st-interview:#A78BFA; --st-interview-bg:#221A44;
  --st-idle:#94A3B8;      --st-idle-bg:#1A2334;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  --shadow-lg:0 2px 6px rgba(0,0,0,.55), 0 22px 50px -18px rgba(0,0,0,.9);
}

/* ---------- typography ---------- */
body { font-family: var(--sans); font-feature-settings: "cv05" 1; letter-spacing: -.005em; }

h1, h2, h3 {
  font-family: var(--display);
  letter-spacing: -.022em;          /* tighten as size grows */
  line-height: 1.12;
  text-wrap: balance;               /* no orphaned last words */
  font-weight: 700;
}
h1 { font-weight: 800; letter-spacing: -.03em; }
p  { text-wrap: pretty; }

/* Arabic needs looser leading and no negative tracking — it breaks letter joining. */
:root[lang="ar"] body, [dir="rtl"] body { letter-spacing: 0; line-height: 1.75; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; }

/* Numbers must line up in a data product. */
.stat .n, .today-pill b, .rec-pct, td, .emp-stat, .score-ring i {
  font-variant-numeric: tabular-nums;
}

/* Labels were uppercase mono everywhere, which shouted. Sentence case, quieter. */
label {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text-2);
}

/* ---------- interaction states ---------- */
a, button, .btn, .card-link, [role="button"] {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease;
}
.btn:active, [role="button"]:active { transform: translateY(1px); }

/* One visible focus ring everywhere — keyboard users are not optional. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Skip link — required for keyboard navigation, absent until now. */
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 8px; z-index: var(--z-toast);
  background: var(--card); color: var(--text); padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.skip-link:focus { inset-inline-start: 8px; }

/* The `hidden` attribute must actually hide.
 *
 * Without this, any author rule that sets `display` on an element silently defeats
 * `hidden` — which is how the sidebar ended up rendering the product name twice (the
 * Arabic wordmark is marked hidden and was still painting), and earlier how every row's
 * "Not for me" menu rendered open at once. One rule kills the whole class of bug. */
[hidden] { display: none !important; }