/* apply.mt — design system. Tokens + components straight from the candidate
   handoff (Nunito; primary #2478F2; ink #14213D). Mobile-first; the app renders
   as a centred ~430px column on wide screens, full-bleed on phones. */

:root{
  /* colour */
  --ink:#14213D; --ink-2:#3F4A5E; --muted:#5B6478; --faint:#8A94A6;
  --hairline:#C3CAD6; --border:#E5E9F0; --surface:#EEF1F6; --white:#FFFFFF;
  --primary:#2478F2; --primary-deep:#1E56D6;
  --coral:#F2545B; --coral-soft:#F2607A;
  --yellow:#F9C846; --yellow-light:#F9D84A;
  --green:#10B981; --green-deep:#0E9F6E; --online:#22C55E;
  --violet:#8B5CF6; --violet-deep:#5B2DD6;
  --danger:#DC2626; --warning:#B45309;
  /* tints */
  --t-blue:#E4EEFD; --t-green:#DDF7EC; --t-violet:#EDE9FE; --t-purple:#EDE7FD;
  --t-pink:#FDE2EC; --t-amber:#FEF3C7; --t-red:#FDE2E2; --t-orange:#FFE8D9;
  /* shape */
  --r-card:14px; --r-btn:12px; --r-tile:10px; --r-pill:99px;
  --shadow:0 4px 14px rgba(20,33,61,.05);
  --shadow-lg:0 8px 24px rgba(20,33,61,.10);
  --pad:20px;           /* screen horizontal padding */
  --shell:430px;        /* max content width on desktop */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--surface);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent);outline-offset:2px;border-radius:8px}

/* ── App shell: centred phone-width column ─────────────────────────────── */
.app{max-width:var(--shell);margin:0 auto;min-height:100dvh;background:var(--surface);position:relative;display:flex;flex-direction:column}
.app--chrome{padding-bottom:80px}          /* room for bottom nav */
.screen{flex:1;padding:14px var(--pad) 0}
.screen__title{font-size:29px;font-weight:900;letter-spacing:-1.5px;line-height:1;margin:6px 0 12px}
.section-h{font-size:14px;font-weight:900;margin:14px 0 8px}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.tnum{font-variant-numeric:tabular-nums}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:flex;flex-direction:column;gap:7px}

/* ── Header (sticky) ───────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:30;background:var(--white);border-bottom:1px solid var(--border);
     display:flex;align-items:center;justify-content:space-between;padding:9px var(--pad);}
.brand{display:flex;align-items:center;gap:9px}
.brand__mark{width:31px;height:31px;flex:none}
.brand__name{font-size:22px;font-weight:900;letter-spacing:-.6px;line-height:1}
.brand__tag{font-size:9px;font-weight:800;letter-spacing:1.9px;text-transform:uppercase;color:var(--muted)}
.hdr__actions{display:flex;align-items:center;gap:4px}
.iconbtn{position:relative;width:38px;height:38px;flex:none;display:grid;place-items:center;border:none;background:none;color:var(--ink);cursor:pointer;border-radius:99px;transition:background .15s}
.iconbtn:hover,.iconbtn:focus-visible{background:var(--surface)}
.iconbtn svg{width:22px;height:22px}
.hdr__actions .hdr-menu{display:flex}
.hdr__actions .avatar-btn{width:38px;height:38px;flex:none;display:grid;place-items:center;border:none;background:none;padding:0;cursor:pointer;position:relative;border-radius:99px}
.badge-count{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
     background:var(--coral);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;border:1.5px solid var(--white)}
.avatar{width:34px;height:34px;border-radius:99px;object-fit:cover;background:var(--surface);display:block}
.avatar--sm{width:34px;height:34px;border:none}
.presence{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:99px;background:var(--online);border:2px solid var(--white)}

/* ── Bottom navigation (fixed) ─────────────────────────────────────────── */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:var(--shell);
     height:68px;background:var(--white);border-top:1px solid var(--border);display:flex;padding-top:7px;z-index:40}
.nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-2);font-size:9px;font-weight:700}
.nav a.on{color:var(--primary);font-weight:800}
.nav svg{width:25px;height:25px}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.card--flat{box-shadow:none}
.card--brand{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;border:none}
.card--milo{background:var(--t-violet);border:none}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;border-radius:var(--r-btn);
     border:1px solid transparent;font-size:13px;font-weight:800;cursor:pointer;transition:transform .06s ease}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--primary);color:#fff}
.btn--secondary{background:var(--white);color:var(--ink);border-color:var(--border)}
.btn--ghost{background:transparent;color:var(--primary)}
.btn--sm{width:auto;height:28px;padding:0 12px;border-radius:var(--r-pill);font-size:11px}
.btn--danger{background:var(--danger);color:#fff}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ── Chips / pills ─────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 6px;border-radius:6px;font-size:9px;font-weight:700;background:var(--surface);color:var(--ink-2)}
.chip--blue{background:var(--t-blue);color:var(--primary-deep)} .chip--green{background:var(--t-green);color:var(--green-deep)}
.chip--violet{background:var(--t-violet);color:var(--violet-deep)} .chip--amber{background:var(--t-amber);color:var(--warning)}
.chip--red{background:var(--t-red);color:var(--danger)}
.pill{display:inline-flex;align-items:center;flex:none;height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:11.5px;font-weight:800;background:var(--white);border:1px solid var(--border);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.pill.on{background:var(--primary);border-color:var(--primary);color:#fff}
.pill-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:2px var(--pad)}
.pill-row::-webkit-scrollbar{display:none}

/* ── Pair badge + match ring ───────────────────────────────────────────── */
.pair-badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:var(--r-pill);background:var(--t-green);color:var(--green-deep);font-size:10px;font-weight:800}
.ring{--score:0;--size:56px;width:var(--size);height:var(--size);border-radius:99px;display:grid;place-items:center;flex:none;
      background:conic-gradient(var(--primary) calc(var(--score)*1%), var(--border) 0)}
.ring>span{width:calc(var(--size) - 10px);height:calc(var(--size) - 10px);border-radius:99px;background:var(--white);display:grid;place-items:center;font-weight:900;font-size:15px}

/* ── Fields ────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field>label{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.input{height:44px;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--white);padding:0 12px;font-size:14px;font-weight:600;color:var(--ink);width:100%}
textarea.input{height:auto;padding:12px;resize:vertical;min-height:90px}
.input:focus{border-color:var(--primary);outline:none}
.input.err{border-color:var(--danger)}
.err-text{color:var(--danger);font-size:11px;font-weight:700}
.search{display:flex;align-items:center;gap:10px;height:46px;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--white);padding:0 8px 0 14px;box-shadow:var(--shadow)}
.search input{border:none;outline:none;flex:1;font-size:13px;font-weight:600;background:none;color:var(--ink)}
.search .search__btn{width:34px;height:34px;flex:none;border:none;border-radius:9px;background:var(--t-blue);color:var(--primary);display:grid;place-items:center;cursor:pointer}

/* ── Job card ──────────────────────────────────────────────────────────── */
.job{display:flex;gap:11px;position:relative;padding:13px}
.job__logo{width:54px;height:54px;border-radius:var(--r-tile);flex:none;object-fit:cover;background:var(--surface)}
.job__title{font-size:14px;font-weight:900;line-height:1.15;padding-right:52px}
.job__meta{font-size:10px;font-weight:600;color:var(--muted)}
.job__bookmark{position:absolute;top:0;right:0;width:28px;height:28px;display:grid;place-items:center;color:var(--muted);background:none;border:none;cursor:pointer}

/* ── Toggle ────────────────────────────────────────────────────────────── */
.toggle{width:34px;height:20px;border-radius:99px;background:var(--border);position:relative;flex:none;border:none;cursor:pointer;transition:background .15s}
.toggle.on{background:var(--primary)}
.toggle>i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:99px;background:#fff;transition:left .16s}
.toggle.on>i{left:16px}

/* ── Alerts / states ───────────────────────────────────────────────────── */
.alert{border-radius:var(--r-card);padding:12px;font-size:12px;font-weight:700}
.alert--err{background:var(--t-red);color:var(--danger)}
.alert--ok{background:var(--t-green);color:var(--green-deep)}
.empty{text-align:center;color:var(--muted);padding:40px 20px}
.skel{background:linear-gradient(90deg,var(--surface),#e7ebf3,var(--surface));background-size:200% 100%;animation:sh 1.5s infinite;border-radius:8px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}.btn:active{transform:none}}

/* ── Auth / full-bleed screens (no chrome) ─────────────────────────────── */
.auth{min-height:100dvh;max-width:var(--shell);margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:24px var(--pad);gap:14px;background:var(--white)}
.divider{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:11px;font-weight:700}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Dark theme (explicit toggle: html[data-theme="dark"]) ──────────────── */
:root[data-theme="dark"]{
  --ink:#EEF2F7; --ink-2:#C4CCD8; --muted:#8B95A5; --faint:#6C7684;
  --hairline:#333a45; --border:rgba(255,255,255,.10); --surface:#0b0e13; --white:#151a22;
  --primary-deep:#7FB0FF; --green-deep:#57E0A5; --violet-deep:#C6B7FF; --warning:#FFC46B;
  --t-blue:rgba(36,120,242,.22); --t-green:rgba(16,185,129,.20); --t-violet:rgba(139,92,246,.26);
  --t-purple:rgba(139,92,246,.20); --t-pink:rgba(242,96,122,.22); --t-amber:rgba(249,200,70,.20);
  --t-red:rgba(220,38,38,.26); --t-orange:rgba(244,120,20,.22);
  --shadow:0 4px 14px rgba(0,0,0,.45); --shadow-lg:0 10px 28px rgba(0,0,0,.55);
}
:root[data-theme="dark"] .card--milo{background:rgba(139,92,246,.16)}

/* ── Header menus (theme / language / profile dropdowns) ───────────────── */
.hdr-menu{position:relative}
.hdr-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:var(--white);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;z-index:60}
.hdr-pop a,.hdr-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border-radius:10px;border:none;background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hdr-pop a:hover,.hdr-pop button:hover{background:var(--surface)}
.hdr-pop .sep{height:1px;background:var(--border);margin:4px 0}
.hdr-pop .who{padding:8px 12px 4px}