/* Shikaar — شکار, the hunt.
 *
 * The palette is the sky between 4am and sunrise, because that is literally when
 * the scan runs: an indigo ground with first light on the horizon as the accent.
 * Warm-on-cool, in a category that defaults to cool-on-cool.
 *
 * Two rules hold the whole system together:
 *   1. Ember is reserved for the brand and for anything you can click. Nothing
 *      else uses it, so a status chip never competes with a button.
 *   2. Every neutral is pulled toward indigo. On a cold ground a true grey reads
 *      as unpainted — it is the difference people feel and cannot name.
 */

/* Self-hosted: no request to a font CDN on page load, and nobody outside this
   project learns who visits. 68 KB for both families, latin + latin-ext. */
@font-face {
  font-family:"Instrument Serif"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/fonts/instrument-serif-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193;
}
@font-face {
  font-family:"Instrument Serif"; font-style:normal; font-weight:400;
  font-display:swap; src:url("/fonts/instrument-serif-400-latinext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Instrument Sans"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("/fonts/instrument-sans-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193;
}
@font-face {
  font-family:"Instrument Sans"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("/fonts/instrument-sans-var-latinext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --bg:#0A0F1C; --panel:#131A2B; --raised:#1A2338; --line:#242E47;
  --ink:#E8E9F0; --dim:#8A93AC;
  --accent:#F0913C; --accent-hover:#F7A659; --on-accent:#0A0F1C;
  --match:#4FC08D; --cross:#7C8CF8; --bad:#F2545B;
  --serif:"Instrument Serif","Iowan Old Style",Charter,Georgia,serif;
  --sans:"Instrument Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Cascadia Mono",Consolas,monospace;
  --r:4px;   /* squared, not pill — an instrument, not a marketing site */
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#F7F8FB; --panel:#FFFFFF; --raised:#F0F2F7; --line:#E2E6EF;
    --ink:#141A27; --dim:#5D6780;
    --accent:#A25608; --accent-hover:#8F4B06; --on-accent:#FFFFFF;
    --match:#0E7A54; --cross:#4C5CD4; --bad:#C3313A;
  }
}

* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.hide { display:none !important; }
.grow { flex:1; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { text-decoration:underline; }

/* ── chrome ─────────────────────────────────────────────── */
header {
  display:flex; align-items:center; gap:14px; padding:12px 20px;
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5;
  background:var(--bg);
}
.brand { display:flex; align-items:center; gap:9px; }
.brand svg { display:block; flex:none; }
.brand .word { font-family:var(--serif); font-size:20px; letter-spacing:-.015em; line-height:1; }
/* "AI" reads as a suffix, not as half the name */
.brand .ai {
  font-family:var(--mono); font-size:.42em; letter-spacing:.1em;
  color:var(--accent); vertical-align:.85em; margin-left:.3em;
}
.meter { font-size:12px; color:var(--dim); font-family:var(--mono);
  font-variant-numeric:tabular-nums; }
.pane { max-width:1100px; margin:0 auto; padding:20px; }

/* ── cards / forms ──────────────────────────────────────── */
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:26px; max-width:460px; width:100%;
}
.card.wide { max-width:none; }
h1 { margin:0 0 6px; font-family:var(--serif); font-size:34px; font-weight:400;
  letter-spacing:-.02em; line-height:1.1; }
h1 .ai { font-family:var(--mono); font-size:.32em; letter-spacing:.1em;
  color:var(--accent); vertical-align:.95em; margin-left:.3em; }
h2 { margin:0 0 6px; font-size:18px; letter-spacing:-.01em; }
.lede { color:var(--dim); margin:0 0 18px; }
.fine { color:var(--dim); font-size:12px; }
.fine.err { color:var(--bad); }
.msg { font-size:13px; margin:10px 0 0; min-height:18px; }
.msg.err { color:var(--bad); }
.msg.ok { color:var(--match); }

input[type=email], input[type=search], input[type=text], textarea {
  width:100%; padding:9px 11px; border-radius:var(--r); border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font:inherit;
}
input:focus, textarea:focus { border-color:var(--accent); outline:none; }
textarea { min-height:64px; resize:vertical; }
/* Persona lists usually run 4-6 entries. Sized to show them without scrolling,
   since a field you have to scroll to read is one you won't check. */
#pf-fields textarea { min-height:132px; }
input[type=file] { width:100%; margin-bottom:12px; color:var(--dim); }

button { font:inherit; font-family:var(--sans); cursor:pointer; border-radius:var(--r); }
button.primary {
  width:100%; margin-top:10px; padding:10px; border:0;
  background:var(--accent); color:var(--on-accent); font-weight:600;
}
button.primary:hover { background:var(--accent-hover); }
button.primary:disabled { opacity:.5; cursor:default; }
button.ghost {
  padding:7px 12px; background:none; border:1px solid var(--line); color:var(--ink);
}
button.ghost:hover { border-color:var(--dim); }
button.link { background:none; border:0; color:var(--dim); padding:4px; text-decoration:underline; }
button.link:hover { color:var(--ink); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px; }

.steps { margin-top:16px; }
.steps div { color:var(--dim); font-size:13px; padding:3px 0; }
.steps div::before { content:"○ "; }
.steps div.on::before { content:"◐ "; color:var(--accent); }
.steps div.done::before { content:"● "; color:var(--match); }

/* ── tabs + list ────────────────────────────────────────── */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.tab {
  background:none; border:0; border-bottom:2px solid transparent; color:var(--dim);
  padding:8px 12px; border-radius:0;
}
.tab.on { color:var(--ink); border-bottom-color:var(--accent); }
.tabn { font-size:11px; opacity:.7; font-family:var(--mono); }
.controls { display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.controls input[type=search] { max-width:320px; }
.chk { color:var(--dim); font-size:13px; display:flex; align-items:center; gap:5px; }
.chk input { accent-color:var(--accent); }

/* A 2px left edge carries match strength, so a strong result is visible while
   scrolling without stopping to read a number. Only rows actually scored get
   one — a similarity guess has not earned the claim. */
.job {
  border:1px solid var(--line); border-left:2px solid transparent;
  border-radius:var(--r); padding:9px 12px; margin-bottom:6px; background:var(--panel);
}
.job.m-strong { border-left-color:var(--match); }
.job.m-mid    { border-left-color:color-mix(in srgb, var(--match) 40%, transparent); }

/* Rank, title, employer and location on one line. Four stacked lines per row
   meant six rows filled a screen; this fits eleven, which is the difference
   between scanning a shortlist and paging through one. */
.job .line { display:flex; align-items:baseline; gap:9px; min-width:0; }
.job .rank {
  flex:none; width:3.1em; text-align:right; font-family:var(--mono);
  font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--dim);
}
.job .rank.hot   { color:var(--match); font-weight:600; }
.job .rank.guess { opacity:.75; }
.job .rank.none  { opacity:.35; }
.job .t {
  font-size:14.5px; font-weight:600; letter-spacing:-.005em; color:var(--ink);
  text-decoration:none; flex:0 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.job .t:hover { color:var(--accent); text-decoration:underline; }
.job .co { color:var(--ink); opacity:.72; font-size:12.5px; flex:none; }
.job .co::before { content:"· "; opacity:.5; }
/* Location yields first: it is the least load-bearing thing on the line and
   some postings list five cities. */
.job .loc {
  color:var(--dim); font-size:12.5px; flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.job .loc::before { content:"· "; opacity:.5; }

.job .acts { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap;
  padding-left:calc(3.1em + 9px); }
.job .acts button { padding:3px 9px; font-size:12px; background:none;
  border:1px solid var(--line); color:var(--dim); }
.job .acts button:hover { color:var(--ink); border-color:var(--dim); }
/* Exactly one filled button per row. Everything else is an outline, so there is
   never a question about what the row is for. */
.job .acts button.go {
  background:var(--accent); border-color:var(--accent);
  color:var(--on-accent); font-weight:600;
}
.job .acts button.go:hover { background:var(--accent-hover); border-color:var(--accent-hover); }

/* Narrow screens cannot hold one line; let it stack rather than truncate to
   nothing, and drop the action indent that would waste the width. */
@media (max-width:700px) {
  .job .line { flex-wrap:wrap; }
  .job .t { white-space:normal; flex-basis:100%; order:2; }
  .job .rank { order:1; text-align:left; width:auto; }
  .job .co, .job .loc { order:3; }
  .job .acts { padding-left:0; }
}

.chip {
  display:inline-block; padding:1px 8px; border-radius:3px; font-size:11px;
  font-family:var(--mono); border:1px solid var(--line); color:var(--dim);
  margin-right:4px;
}
.chip.score { color:var(--ink); font-variant-numeric:tabular-nums; }
.chip.hot { border-color:color-mix(in srgb, var(--match) 45%, transparent); color:var(--match); }
/* Cross-border is the most interesting thing on a row, not a hazard — it had
   been borrowing the warning colour. */
.chip.xb { border-color:color-mix(in srgb, var(--cross) 45%, transparent); color:var(--cross); }
.chip.stage { border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent); }

/* ── modal ──────────────────────────────────────────────── */
#modal { position:fixed; inset:0; background:rgba(4,7,14,.72); z-index:20;
  display:flex; align-items:center; justify-content:center; padding:20px; }
.sheet {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  max-width:760px; width:100%; max-height:86vh; overflow:auto; padding:24px;
  position:relative;
}
.sheet h2 { font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:-.015em; }
.sheet .x { position:absolute; top:10px; right:14px; background:none; border:0;
  color:var(--dim); font-size:24px; line-height:1; }
.sheet .x:hover { color:var(--ink); }
.jd { white-space:pre-wrap; font-size:13.5px; line-height:1.65; }
.sheet h4 { margin:18px 0 6px; font-family:var(--mono); font-size:10.5px;
  text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
.stagegrid { display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; }
.stagegrid select { background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-radius:3px; padding:4px 6px; font:inherit; font-size:12.5px; }

#toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--raised); border:1px solid var(--line); border-radius:var(--r);
  padding:9px 16px; font-size:13px; z-index:30;
}
.spinner {
  width:22px; height:22px; border:2px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration:2.4s; }
  * { transition:none !important; }
}

/* Guest notice. Deliberately quiet — a guest session works fine, it just does not
   survive a cleared browser. No urgency theatre; the offer carries the accent. */
.banner {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  max-width:1100px; margin:14px auto 0; padding:10px 14px;
  border:1px solid var(--line); background:var(--raised);
  border-radius:var(--r); font-size:13px;
}
.banner input { max-width:210px; }
.banner .msg { margin:0; }
.banner button { border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  color:var(--accent); }
/* Onboarding and profile are single cards — centre them rather than letting
   them hug the left edge of a 1100px pane. */
#onboard, #profile { display:flex; justify-content:center; }

/* ── apply pack ─────────────────────────────────────────── */
.facts { display:grid; gap:4px; }
.fact { display:flex; gap:10px; align-items:baseline; padding:5px 0;
  border-bottom:1px solid var(--line); }
.fact .k { color:var(--dim); font-size:12.5px; min-width:180px; }
.fact .v { flex:1; font-size:13.5px; word-break:break-word; }

button.copy { padding:2px 9px; font-size:11px; background:none; font-family:var(--mono);
  border:1px solid var(--line); color:var(--dim); border-radius:3px; }
button.copy:hover { color:var(--accent); border-color:var(--accent); }

.pack { margin-top:16px; }
.qa { margin-bottom:14px; }
.qa .q { color:var(--dim); font-size:12.5px; display:flex; gap:8px;
  align-items:center; margin-bottom:4px; }
.qa .a { white-space:pre-wrap; font-size:13.5px; line-height:1.6;
  border-left:2px solid var(--line); padding-left:11px; }

/* Two columns so twelve fields don't become an endless scroll. */
.factgrid { display:grid; grid-template-columns:180px 1fr; gap:7px 12px;
  align-items:center; margin-top:10px; }
.factgrid label { text-align:right; }
@media (max-width:620px) {
  .factgrid { grid-template-columns:1fr; }
  .factgrid label { text-align:left; }
  .fact { flex-wrap:wrap; }
  .fact .k { min-width:0; }
}

/* ── public landing ─────────────────────────────────────── */
.land { max-width:720px; margin:0 auto; padding:64px 24px 96px; }
.land h1 { margin-top:14px; }
.land .lede { font-size:16px; max-width:58ch; }
.land .lede b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

.searchbar { display:flex; gap:8px; margin-top:24px; }
.searchbar input { flex:1; padding:12px 14px; font-size:15px; }
.searchbar button { width:auto; margin:0; padding:0 22px; white-space:nowrap; }

#land-results { margin-top:22px; display:grid; gap:2px; }
.hit { padding:11px 0; border-bottom:1px solid var(--line); }
.hit-t { font-size:15px; font-weight:600; letter-spacing:-.005em; }
.hit-t a { color:var(--ink); text-decoration:none; }
.hit-t a:hover { color:var(--accent); text-decoration:underline; }
.hit-m { color:var(--dim); font-size:12.5px; margin-top:2px; }
.hit-m .chip { margin-left:6px; }

/* The upgrade moment. Quiet border, warm ground — an invitation, not a wall. */
.cta {
  margin-top:26px; padding:18px 20px; border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}
.cta p { margin:0 0 14px; font-size:14.5px; }
.cta p b { color:var(--accent); font-variant-numeric:tabular-nums; }

.signin-strip {
  margin-top:56px; padding-top:28px; border-top:1px solid var(--line);
}
.signin-strip h2 { font-size:14px; color:var(--dim); font-weight:500; margin-bottom:12px; }
.signin-strip #si-form, .signin-strip #si-confirm { max-width:380px; }

/* ── browse-while-onboarding ────────────────────────────── */
.onboard-browse {
  max-width:720px; width:100%; margin-top:40px; padding-top:28px;
  border-top:1px solid var(--line);
}
.onboard-browse h2 { font-family:var(--serif); font-size:20px; font-weight:400;
  letter-spacing:-.01em; margin-bottom:4px; }
/* the onboarding pane centres a narrow card; the search wants the full column */
#onboard { flex-direction:column; align-items:center; }

/* The brand is a button now, so strip the button chrome back off it. */
button.brand { background:none; border:0; padding:0; cursor:pointer; }
button.brand:hover .word { color:var(--accent); }

.nearlbl { margin:16px 0 4px; padding-top:12px; border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; }

/* Google is the path most people will take, so it leads — but it stays visually
   quieter than the ember primary, which belongs to our own actions. */
button.google {
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  padding:10px; margin-bottom:4px; font-weight:500;
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
}
button.google:hover { border-color:var(--dim); }
button.google svg { flex:none; }
.or { display:flex; align-items:center; gap:10px; color:var(--dim);
  font-size:11.5px; margin:14px 0 10px; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }

/* ── your data ──────────────────────────────────────────── */
.yourdata { margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.yourdata h4 { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin:0 0 6px; }
#dx-confirm { margin-top:16px; padding:16px; border-radius:var(--r);
  border:1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  background:color-mix(in srgb, var(--bad) 7%, transparent); }
#dx-confirm input { max-width:200px; margin-top:6px; }
button.danger { border-color:color-mix(in srgb, var(--bad) 50%, transparent);
  color:var(--bad); }
button.danger:hover { border-color:var(--bad); }
button.danger-solid { padding:7px 14px; border:0; background:var(--bad);
  color:#fff; font-weight:600; }

/* ── legal pages + footer ───────────────────────────────── */
footer.legal { max-width:1100px; margin:42px auto 0; padding:16px 20px 30px;
  border-top:1px solid var(--line); color:var(--dim); font-size:12px;
  display:flex; gap:8px; flex-wrap:wrap; }
.doc { max-width:44rem; margin:0 auto; padding:52px 24px 90px; }
.doc .back { display:inline-block; font-family:var(--serif); font-size:19px;
  color:var(--ink); text-decoration:none; margin-bottom:34px; }
.doc .back:hover { color:var(--accent); }
.doc .back .ai { font-family:var(--mono); font-size:.42em; letter-spacing:.1em;
  color:var(--accent); vertical-align:.85em; margin-left:.3em; }
.doc h1 { font-size:32px; margin-bottom:2px; }
.doc h2 { font-family:var(--serif); font-size:20px; font-weight:400;
  letter-spacing:-.01em; margin:34px 0 8px; }
.doc .updated { color:var(--dim); font-size:12px; font-family:var(--mono); }
.doc .lead { font-size:16px; color:var(--dim); margin:22px 0 0; }
.doc p, .doc li { line-height:1.7; }
.doc ul { padding-left:20px; }
.doc li { margin-bottom:8px; }
.doc table { border-collapse:collapse; width:100%; margin-top:12px; font-size:13.5px; }
.doc th { text-align:left; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  font-weight:400; padding:8px 12px 8px 0; border-bottom:1px solid var(--line); }
.doc td { padding:9px 12px 9px 0; border-bottom:1px solid var(--line);
  vertical-align:top; }
.doc td:first-child { width:44%; }
.doc .foot { margin-top:44px; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--dim); }