/* ============================================================================
   Zenithr Source Engine — design system  (SINGLE source of truth)
   Light, airy cobalt/cyan on soft blue. Inter throughout, JetBrains mono.
   This is the one authoritative :root. Three earlier layered themes
   (royal-blue "Source Engine", terracotta, and a split-out motion block)
   were consolidated here; component rules below inherit these tokens.
   ============================================================================ */
:root {
  --bg: #f4f8ff;
  --bg-grad: none;
  --surface: #ffffff;
  --surface-2: #f3f7fd;
  --surface-3: #e8f0fb;
  --border: #dbe6f4;
  --border-strong: #bfd1e8;
  --text: #06265b;          /* navy ink */
  --text-2: #405a7c;        /* slate */
  --text-3: #576e8c;        /* muted — was #7b90ac (3.27:1); darkened in-hue to ≥4.86:1 on every light surface (axe-verified) */
  --text-inverse: #ffffff;  /* text/icons on filled brand, source and status colours */
  --brand: #075ac8;         /* cobalt */
  --brand-ink: #003f9e;     /* deep cobalt */
  --brand-bright: #12b9e8;  /* cyan accent — decorative only (2.30:1 on white); never text */
  --brand-bright-text: #0c7b9a; /* the cyan when it must be read: 4.57:1 on --bg */
  --brand-soft: rgba(7,90,200,.08);
  --brand-soft-2: rgba(18,185,232,.16);
  --grad: linear-gradient(110deg, #0643b5 0%, #0878d1 58%, #1da7dc 100%);
  --ok: #07806f;            /* was #078a77 (4.28:1); darkened in-hue to 4.56:1 on --bg */
  --ok-soft: rgba(7,128,111,.11);
  --ok-line: rgba(7,128,111,.32);
  --warn: #a3610a;          /* was #b66d0b (3.79:1 on warning tint); darkened in-hue to 4.6:1 */
  --warn-soft: rgba(163,97,10,.12);
  --err: #cc3b4a;
  --err-soft: rgba(204,59,74,.1);
  --err-line: rgba(204,59,74,.3);

  /* Source identity — one colour per candidate source site (existing hues;
     bayt + gulftalent darkened in-hue so white pill text reaches 4.5:1). */
  --src-linkedin: #0a66c2;
  --src-linkedin-soft: #e8f3ff;
  --src-bayt: #0c884f;           /* was #0e9f5d (3.42:1 white text) */
  --src-bayt-soft: rgba(12,136,79,.1);
  --src-gulftalent: #b26211;     /* was #e07b16 (2.99:1 white text) */
  --src-naukrigulf: #52708f;
  --src-other: #6b7280;
  --src-offtarget: #3f6199;      /* "different location" flag — steel navy */
  --src-offtarget-soft: rgba(63,97,153,.12);

  /* HTTP method + status semantics for API reference surfaces — derived from
     the existing four hue families at their AA lightness steps, no new hue. */
  --method-get: var(--brand);         --method-get-soft: var(--brand-soft);
  --method-post: var(--ok);           --method-post-soft: var(--ok-soft);
  --method-patch: var(--warn);        --method-patch-soft: var(--warn-soft);
  --method-delete: var(--err);        --method-delete-soft: var(--err-soft);
  --status-2xx: var(--ok);
  --status-4xx: var(--warn);
  --status-5xx: var(--err);
  /* Radius scale — three steps + pill. Crisp per the product register:
     controls 8, cards 12, containers/modals 16; anything rounder reads soft. */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
  /* Elevation — three steps: resting card, raised card, hover/overlay. */
  --shadow-sm: 0 14px 34px -28px rgba(0,45,112,.35), 0 1px 3px rgba(0,45,112,.05);
  --shadow: 0 24px 60px -38px rgba(0,45,112,.42), 0 2px 8px rgba(0,45,112,.05);
  --shadow-lg: 0 30px 56px -30px rgba(0,70,180,.5);
  --ring: 0 0 0 4px rgba(18,185,232,.14);

  /* Type — Geist for UI (geometric, tight UI numerals, reads crisply at 12–14px
     without Inter's ubiquity); JetBrains Mono for everything the developer
     copies (dotted zero, distinct 1/l/I, full ligature set, built for 13px). */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: var(--font); /* one family, weight carries hierarchy */
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Type scale — base 14px, ratio 1.2 (minor third), rounded:
     10 · 12 · 14 · 17 · 21 · 25 · 30 · 36. Floor is 10px (micro-labels). */
  --fs-2xs: 10px;   /* uppercase micro-labels, kickers */
  --fs-xs: 12px;    /* meta, captions, badges */
  --fs-sm: 13px;    /* secondary UI text (kept off-scale: the workhorse size between xs and base) */
  --fs-base: 14px;  /* body */
  --fs-md: 17px;    /* emphasis, card titles */
  --fs-lg: 21px;    /* section headings */
  --fs-xl: 25px;    /* page headings */
  --fs-2xl: 30px;   /* stats, big numbers */
  --fs-3xl: 36px;   /* display */
  --lh-1: 1.15;     /* display, stats */
  --lh-2: 1.3;      /* headings */
  --lh-3: 1.5;      /* UI text */
  --lh-4: 1.6;      /* prose */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --measure: 70ch;  /* prose column cap; code blocks may break wider */

  /* Spacing — 4px scale. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Motion tokens (formerly a separate 4th :root layer) */
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);   /* smooth */
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);  /* snappier */
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);   /* decisive */
  --ease-gauge:     cubic-bezier(.43, .13, .23, .96); /* long draw: score arc */
  --ease-in:        cubic-bezier(.4, 0, 1, 1);     /* leaving: accelerates away */
  --dur-1: 120ms;   /* instant feedback: press, toggle */
  --dur-2: 220ms;   /* state change: hover, open */
  --dur-3: 420ms;   /* layout / reveal */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-grad);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text);
  font: var(--fs-base)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; font-weight: var(--fw-medium); }
a:hover { color: var(--brand-ink); }

/* ---- Top navigation ---- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); letter-spacing: -.01em; }
.brand .mark {
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--brand);
}
.brand .mark svg { width: 26px; height: 26px; }
.brand b { color: var(--text); font-weight: var(--fw-bold); }
.brand span { color: var(--text-3); font-weight: var(--fw-medium); }
.nav-right { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); }
.nav-right .muted { color: var(--text-3); }

/* ---- Layout ---- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 44px 24px 72px; }
.page-head { margin: 4px 0 28px; text-align: center; }
.page-head h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); margin: 0 0 8px; letter-spacing: -.025em;
  line-height: 1.12; }
.page-head h1 .accent { color: var(--brand); }
.page-head p { margin: 0 auto; color: var(--text-2); font-size: var(--fs-md); max-width: 560px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 26px;
  margin-bottom: 22px;
}
.card-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); font-weight: var(--fw-semibold); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }

/* ---- Forms ---- */
label { display: block; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 7px; font-weight: var(--fw-medium); }
input:not([type="checkbox"]), select, textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r); padding: 12px 15px; font-size: var(--fs-base);
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
  font-family: inherit;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
/* background-color (not the background shorthand) so the custom select chevron
   below survives focus. */
input:not([type="checkbox"]):focus, select:focus, textarea:focus { border-color: var(--brand); background-color: var(--surface); box-shadow: var(--ring); }
input:not([type="checkbox"]):hover, select:hover, textarea:hover { border-color: var(--border-strong); }
/* Native selects render a plain OS chevron; swap in a consistent brand one and
   give the text room so long role labels don't collide with it. */
select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238c9bbb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px;
}
/* select hover/focus chevron is defined once, in cobalt, further down. */
.field { margin-bottom: 0; }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Explainer banner shown in source mode */
.banner {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 4px;
  background: var(--brand-soft); border-radius: var(--r); padding: 14px 16px;
  color: var(--brand-ink); font-size: var(--fs-sm); line-height: 1.5;
}
.banner-ico { font-size: var(--fs-md); line-height: 1.3; }
.banner b { color: var(--brand-ink); font-weight: var(--fw-semibold); }

.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 9px 15px; font-size: var(--fs-sm); color: var(--text-2); user-select: none;
  transition: color .15s var(--ease-out-quart), border-color .15s var(--ease-out-quart), background .15s var(--ease-out-quart);
}
.toggle:has(input:checked) { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-soft); }
.toggle input[type="checkbox"] {
  width: 14px; height: 14px; flex: 0 0 auto; padding: 0; margin: 0;
  border: 0; box-shadow: none; background: transparent; accent-color: var(--brand);
}
.role-box { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.role-toggle { width: max-content; margin-bottom: 12px; }
.role-hint { margin: 0; color: var(--text-3); font-size: var(--fs-sm); max-width: 560px; }
/* Role fields stay collapsed until "Find candidate profiles" is on. */
.role-fields { display: none; margin-top: 16px; }
.role-box.on .role-fields { display: block; animation: reveal .18s ease-out; }
.role-preset { max-width: 360px; margin-bottom: 8px; }
.preset-hint { margin-bottom: 16px; }
.role-grid { grid-template-columns: 1fr 1fr 1fr; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Buttons: interactive hover button -----------------------------------
   Every .btn rests as an outlined pill carrying a small seed dot. On hover the
   resting label slides right and fades out, the dot floods the pill, and a
   second copy of the label slides in from the right with an arrow.

   Markup stays plain — `<button class="btn">Text</button>`. The three layers
   (.btn-face / .btn-reveal / .btn-orb) are built at runtime by enhanceButtons()
   in index.html, which also re-runs for anything rendered via innerHTML, so no
   call site has to know about the structure.

   Variants recolour through four custom properties rather than by overriding
   background/color directly, so the flood and the arrow stay in step:
     --btn-face   resting fill        --btn-ink        resting label
     --btn-flood  hovered fill (orb)  --btn-flood-ink  hovered label + arrow
   -------------------------------------------------------------------------- */
.btn {
  --btn-face: var(--surface);
  --btn-ink: var(--brand-ink);
  --btn-flood: var(--grad);
  --btn-flood-ink: var(--text-inverse);
  --btn-edge: rgba(7,90,200,.22);
  --btn-edge-hover: rgba(7,90,200,.4);
  --btn-shift: 48px;           /* how far the labels travel; scales with size */
  --btn-seed: 9px;             /* resting VISUAL diameter of the orb */
  /* The orb seeds from inside the left padding rather than a width percentage:
     these buttons range from "Clear" to "Use in Find Talent →", and a
     percentage puts the dot on top of the label on anything but a narrow pill. */
  --btn-seed-x: 9px;
  /* The orb is one fixed-size circle that only ever changes `transform: scale`
     — see .btn-orb. It is laid out at --btn-orb-size and scaled DOWN to the
     seed at rest, so its rendered edge always comes from a large element and
     stays crisp. --btn-orb-grow only needs to be big enough that the circle
     clears the widest pill; overshoot is free because the button clips it.
     Both scales are UNITLESS: calc() cannot divide a length by a length, so
     --btn-orb-rest is written out as --btn-seed ÷ --btn-orb-size (9/120). */
  --btn-orb-size: 120px;
  --btn-orb-rest: .075;
  --btn-orb-grow: 7;

  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--btn-face); color: var(--btn-ink);
  border: 1px solid var(--btn-edge); border-radius: var(--r-pill);
  padding: 12px 24px; font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer;
  font-family: inherit; text-align: center; text-decoration: none;
  /* `overflow: hidden` (needed to clip the orb) makes the automatic minimum
     size of a flex/grid item 0, so a button in a row could otherwise be
     squeezed until its label wrapped or slid under the seed dot. These two
     restore the content-based minimum without preventing `flex: 1` growth. */
  white-space: nowrap;
  min-width: fit-content;
  box-shadow: 0 10px 24px -18px rgba(0,45,112,.55);
  transition: transform var(--dur-1) var(--ease-out-quart),
              box-shadow var(--dur-2) var(--ease-out-quart), border-color .18s;
}

/* Layer 1 — the resting label (wraps whatever the call site put in the button). */
.btn-face {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .3s var(--ease-out-quart), opacity .3s var(--ease-out-quart);
}
/* Layer 2 — the arriving label. Above the orb, so it reads on the flooded fill. */
.btn-reveal {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--btn-flood-ink);
  transform: translateX(var(--btn-shift)); opacity: 0;
  transition: transform .3s var(--ease-out-quart), opacity .3s var(--ease-out-quart);
}
.btn-reveal-text { white-space: nowrap; }
/* Layer 3 — the seed dot that grows into the fill.
   ONLY `transform` animates. It used to tween left/top/width/height/border-radius
   *and* a scale together: five layout-triggering properties recomputing every
   frame, on a path where the dot drifted diagonally, morphed square→pill, and
   then overshot to 180% — which is what read as a janky, wobbling hover. A
   single scale on a circle is compositor-only, so it can't drop frames, and it
   settles instead of popping. */
.btn-orb {
  position: absolute; z-index: 1; pointer-events: none;
  /* Centre the circle on the seed point; the -50% keeps it there at every scale. */
  left: calc(var(--btn-seed-x) + var(--btn-seed) / 2); top: 50%;
  width: var(--btn-orb-size); height: var(--btn-orb-size); border-radius: 50%;
  background: var(--btn-flood);
  transform: translate(-50%, -50%) scale(var(--btn-orb-rest));
  transition: transform .34s var(--ease-out-quart);
}

/* Keyboard focus gets the same reveal as hover, not just a ring. */
.btn:not(:disabled):hover, .btn:not(:disabled):focus-visible {
  transform: translateY(-2px); border-color: var(--btn-edge-hover);
  box-shadow: 0 22px 36px -22px rgba(0,45,112,.75);
}
.btn:not(:disabled):active { transform: translateY(0) scale(.97); }
.btn:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }

.btn:not(:disabled):hover .btn-face,
.btn:not(:disabled):focus-visible .btn-face { transform: translateX(var(--btn-shift)); opacity: 0; }
.btn:not(:disabled):hover .btn-reveal,
.btn:not(:disabled):focus-visible .btn-reveal { transform: translateX(0); opacity: 1; }
.btn:not(:disabled):hover .btn-orb,
.btn:not(:disabled):focus-visible .btn-orb {
  transform: translate(-50%, -50%) scale(var(--btn-orb-grow));
}

.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Quiet variant: same gesture, a tint instead of the cobalt gradient. */
.btn.ghost {
  --btn-face: #f4f9ff; --btn-ink: var(--brand-ink);
  --btn-flood: #cfe3fb; --btn-flood-ink: var(--brand-ink);
  --btn-edge: rgba(7,90,200,.13); --btn-edge-hover: rgba(7,90,200,.26);
  box-shadow: none;
}
.btn.danger {
  --btn-face: transparent; --btn-ink: var(--err);
  --btn-flood: var(--err); --btn-flood-ink: var(--text-inverse);
  --btn-edge: var(--border-strong); --btn-edge-hover: var(--err);
  box-shadow: none;
}
.btn.sm {
  padding: 8px 16px; font-size: var(--fs-sm); --btn-shift: 32px;
  --btn-seed: 6px; --btn-seed-x: 5px; --btn-orb-rest: .05; --btn-orb-grow: 5;
}
/* Small pills are auto-width from their resting label, so the arrow the reveal
   adds has to be trimmed to stay clear of the 16px padding. */
.btn.sm .btn-reveal { gap: 6px; }
.btn.sm .btn-reveal svg { width: 14px; height: 14px; }
.btn.lg {
  padding: 14px 28px; font-size: var(--fs-md); --btn-shift: 56px;
  --btn-seed: 10px; --btn-seed-x: 11px; --btn-orb-rest: .0833; --btn-orb-grow: 9;
}

/* Shared by the sidebar/history live dots. */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Indeterminate progress rail ---- */
.progress { height: 4px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 16px; }
.progress > i { display: block; height: 100%; width: 35%; background: var(--grad); border-radius: 3px;
  will-change: transform; animation: indet 1.3s linear infinite; }
/* Composited: translate the fill instead of animating margin-left (layout+paint). */
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(286%); } }

/* ---- Table (dashboard keys) ---- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-base); }
th { color: var(--text-3); font-weight: var(--fw-semibold); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
tr:last-child td { border-bottom: none; }
.revoked td { opacity: .5; }
.revoked .keycode { text-decoration: line-through; }
.keycode { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-2); }

/* ---- Misc ---- */
.muted { color: var(--text-3); }
.empty { text-align: center; padding: 48px 20px; color: var(--text-3); }
.empty .ico { font-size: var(--fs-2xl); margin-bottom: 12px; opacity: .7; }
.hidden { display: none !important; }

/* Sign out link (shown in the nav only when login is enabled). */
.signout {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2);
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border-strong); background: var(--surface);
}
.signout:hover { color: var(--brand-ink); border-color: var(--brand); }

/* API keys shortcut in the nav (login-gated, like Sign out). Brand-tinted so it
   reads as the one account destination rather than another neutral control. */
.nav-apikeys {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--brand-soft-2); background: var(--brand-soft);
  color: var(--brand-ink); font: var(--fw-semibold) var(--fs-sm)/1 var(--font);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.nav-apikeys svg { flex: 0 0 15px; width: 15px; height: 15px; stroke-linecap: round; stroke-linejoin: round; }
.nav-apikeys:hover { border-color: var(--brand); background: var(--surface); }
.nav-apikeys.active { border-color: var(--brand); background: var(--brand); color: var(--text-inverse); }
.nav-apikeys:focus-visible { outline: none; box-shadow: var(--ring); }
.row { display: flex; gap: 14px; align-items: flex-end; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hint { color: var(--text-3); font-size: var(--fs-sm); margin-top: 14px; }
code { font-family: var(--mono); background: var(--surface-3); padding: 2px 7px; border-radius: 6px;
  font-size: var(--fs-sm); color: var(--brand-ink); }

/* section heading above activity lists */
.section-label { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin: 0; font-weight: var(--fw-semibold); }

/* one-time key reveal callout */
.reveal { background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: var(--r);
  padding: 18px; margin-top: 18px; }
.reveal strong { color: var(--ok); }
.reveal .k { display: flex; gap: 10px; align-items: center; margin-top: 12px;
  background: var(--surface); border: 1px solid var(--ok-line); border-radius: var(--r-sm); padding: 11px 13px; }
.reveal .k code { background: none; padding: 0; color: var(--text); word-break: break-all; flex: 1; }

/* connection status pill */
.conn { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--border); padding: 7px 13px; border-radius: var(--r-pill); }
.conn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.conn.ok { color: var(--ok); border-color: var(--ok-line); } .conn.ok .dot { background: var(--ok); }
.conn.bad { color: var(--err); border-color: var(--err-line); } .conn.bad .dot { background: var(--err); }

/* errors stat → clickable */

/* modal */
.modal-bg { position: fixed; inset: 0; background: rgba(16,32,74,.34); backdrop-filter: blur(4px);
  display: grid; place-items: center; z-index: 90; padding: 24px; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow); width: 100%; max-width: 720px; max-height: 80vh; display: flex; flex-direction: column; }
.modal.wide { max-width: min(1240px, calc(100vw - 48px)); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px;
  border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.modal-actions { display: flex; align-items: center; gap: 10px; }
.modal-head .x { cursor: pointer; color: var(--text-3); font-size: var(--fs-lg); line-height: 1; background: none; border: none;
  transition: transform var(--dur-1) var(--ease-out-quart), color .15s; }
.modal-head .x:hover { color: var(--text); }
.modal-head .x:active { transform: scale(.9); }
.modal-body { overflow: auto; padding: 6px 0; }
.err-row { padding: 13px 24px; border-bottom: 1px solid var(--border); }
.err-row:last-child { border-bottom: none; }
.err-row .u { font-family: var(--mono); font-size: var(--fs-sm); word-break: break-all; color: var(--text); }
.err-row .r { color: var(--err); font-size: var(--fs-sm); margin-top: 4px; }
.err-row.skipped .r { color: var(--muted); }
.tag { display: inline-block; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: .03em; padding: 1px 6px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; }
.tag.err { color: var(--err); background: var(--err-soft); }
.tag.skip { color: var(--muted); background: var(--border); }
.candidate-filters { display: grid; grid-template-columns: 150px minmax(220px, 1fr) 170px; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--surface); }
.candidate-filters input, .candidate-filters select { padding: 10px 12px; border-radius: var(--r-sm); }
.candidate-table { min-width: 980px; }
.candidate-head, .candidate-row {
  display: grid; grid-template-columns: minmax(300px, 1.35fr) 110px minmax(300px, 1fr) 160px;
  gap: 18px; align-items: start; padding: 18px 24px; border-bottom: 1px solid var(--border);
}
.candidate-head { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: .05em; background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
.candidate-row:last-child { border-bottom: none; }

.candidate-name { font-weight: var(--fw-bold); color: var(--text); }
.lead-type { display: inline-flex; align-items: center; margin-right: 8px; padding: 2px 7px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; }
.candidate-role { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.candidate-reason { color: var(--brand-ink); font-size: var(--fs-xs); margin-top: 5px; font-weight: var(--fw-semibold); }
.candidate-snippet { color: var(--text-3); font-size: var(--fs-xs); margin-top: 6px; max-width: 420px; }
.candidate-score { font-variant-numeric: tabular-nums; color: var(--brand-ink); }
.candidate-score b { display: block; font-weight: var(--fw-heavy); font-size: var(--fs-md); line-height: 1.1; }
.candidate-score span { display: block; margin-top: 3px; color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.candidate-skills { display: flex; gap: 7px; flex-wrap: wrap; min-width: 0; }
.candidate-skills span { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 9px; font-size: var(--fs-xs); max-width: 100%;
  overflow-wrap: anywhere; }
.candidate-source { min-width: 0; }
.candidate-source a { display: inline-flex; font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: 8px; }
.status-select {
  width: 100%; min-width: 140px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); text-transform: capitalize;
}
.cv-grid { grid-template-columns: 1fr 1fr 1fr; }
.cv-file-field { margin-top: 16px; }
.cv-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.role-actions { display: flex; gap: 12px; align-items: flex-end; margin-top: 14px; flex-wrap: wrap; }
.cv-results {
  margin-top: 18px; border: 1px solid var(--border); border-radius: var(--r);
  overflow: auto; background: var(--surface);
}

/* toast */
#toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); padding: 14px 18px; max-width: 360px;
  box-shadow: var(--shadow); opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-2) var(--ease-out-quart), transform var(--dur-2) var(--ease-out-quart); z-index: 100;
  font-size: var(--fs-base); color: var(--text); }
#toast.show { opacity: 1; transform: translateY(0); }
#toast.err { border-color: var(--err); }
#toast.ok { border-color: var(--ok); }

/* login (dashboard) */
.auth-wrap { max-width: 430px; margin: 9vh auto 0; }
.auth-card { text-align: center; padding: 38px 32px; }
.auth-card .mark { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--brand-soft);
  display: grid; place-items: center; margin: 0 auto 18px; color: var(--brand); }
.auth-card .mark svg { width: 30px; height: 30px; }
.auth-card h1 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin: 0 0 6px; letter-spacing: -.02em; }
.auth-card p { color: var(--text-2); margin: 0 0 24px; font-size: var(--fs-base); }

@media (max-width: 680px) {
  .grid-3, .role-grid, .cv-grid { grid-template-columns: 1fr; }
  .wrap { padding: 28px 16px 48px; }
  .page-head h1 { font-size: var(--fs-xl); }
  .nav { padding: 14px 18px; }
  .candidate-table { min-width: 900px; }
  .candidate-filters { grid-template-columns: 1fr; }
}

/* ---- Sourcing mode (X-ray) ---- */
.xray-grid { grid-template-columns: 1.2fr 1fr 1fr .8fr; }
.xray-actions {
  display: flex; gap: 14px 18px; align-items: center; flex-wrap: wrap;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border);
}

/* Keyword tag input: a fake input holding chips + a borderless text field. */
.chip-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 7px 10px; cursor: text; transition: border-color .15s, box-shadow .15s, background .15s;
}
.chip-input:hover { border-color: var(--border-strong); }
.chip-input:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: var(--ring); }
.chip-input input, .chip-input input:hover, .chip-input input:focus {
  flex: 1 1 140px; min-width: 140px; width: auto;
  border: none; background: transparent; box-shadow: none; padding: 5px 4px;
}
#xrayChips { display: contents; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-soft-2);
  border-radius: var(--r-pill); padding: 3px 6px 3px 11px; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.chip-x {
  background: none; border: none; cursor: pointer; color: var(--brand-ink);
  font-size: var(--fs-base); line-height: 1; padding: 0 4px; font-family: inherit;
  transition: transform var(--dur-1) var(--ease-out-quart), color .15s;
}
.chip-x:hover { color: var(--err); }
.chip-x:active { transform: scale(.85); }

/* Boolean search panel: the copyable query string built from the criteria. */
.boolean-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 12px;
}
.boolean-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.boolean-head label { margin: 0; }
.boolean-query {
  margin: 0; padding: 0; font-size: var(--fs-sm); line-height: 1.55;
  font-family: var(--mono);
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.boolean-query.empty {
  color: var(--text-3); font-family: inherit; font-size: var(--fs-sm);
}
/* Criteria changed, refresh in flight — the shown string no longer matches. */
.boolean-query.stale { opacity: .35; }

/* Results panel: sort control + candidate board. */
.xray-sort { width: auto; padding: 8px 36px 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.xray-board {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; padding: 20px;
}
.xray-card {
  min-width: 0; display: flex; flex-direction: column; gap: 16px;
  padding: 22px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-sm); font-size: var(--fs-sm);
}
.xray-card-top { display: flex; align-items: flex-start; gap: 14px; }
.xray-avatar {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
  border-radius: 50%; color: var(--warn); background: #f8f0df; font-weight: var(--fw-semibold);
}
.xray-identity { min-width: 0; flex: 1; }
.xray-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); overflow-wrap: anywhere; }
.xray-name span { color: var(--warn); font-size: var(--fs-xs); }
.xray-card-role { margin-top: 3px; color: var(--text-2); line-height: 1.45; }
.xray-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 7px; color: var(--text-3); font-size: var(--fs-xs); }
.xray-card-location { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: var(--fs-xs); }
.xray-card-location span { color: var(--brand); font-size: var(--fs-md); }
.xray-card-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.xray-card-details { min-width: 0; }
.xray-candidate-summary { max-width: 780px; color: var(--text-2); font-size: var(--fs-base); line-height: 1.6; }
/* Criteria grid: one mark + one line of evidence per weighted criterion, so a
   card reads like the row view's thumbs columns with the proof attached. */
.xray-crit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
.xray-crit { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.xray-crit .crit-mark { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; }
.xray-crit-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.xray-crit-text b {
  color: #4b525b; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .05em; text-transform: uppercase;
}
.xray-crit-text > span {
  display: block; color: #6a727c; font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xray-crit.unverified .xray-crit-text > span { color: #98a0aa; font-style: italic; }

/* Platform pills — one distinct color per source site. */
.xray-pill {
  display: inline-block; padding: 3px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: capitalize; color: var(--text-inverse);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-sizing: border-box; vertical-align: middle;
}
.xray-pill:hover { color: var(--text-inverse); filter: brightness(1.12); }
.xray-pill.linkedin { background: var(--src-linkedin); }
.xray-pill.bayt { background: var(--src-bayt); }
.xray-pill.gulftalent { background: var(--src-gulftalent); }
.xray-pill.naukrigulf { background: var(--src-naukrigulf); }
.xray-pill.other { background: var(--src-other); }

.xray-tag { display: inline-block; margin-left: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: var(--r-pill);
  vertical-align: 1px; }
.xray-tag.verified { color: var(--ok); background: var(--ok-soft); }
.xray-tag.guessed { color: var(--warn); background: var(--warn-soft); }
.xray-stale-badge { display: inline-flex; margin-left: 7px; padding: 3px 7px; border-radius: var(--r-pill); vertical-align: middle; color: var(--err); background: var(--err-soft); font: var(--fw-semibold) var(--fs-2xs)/1.2 var(--font); }
.xray-quality-warning { color: var(--warn); }

.xray-score { display: grid; place-content: center; flex: 0 0 64px; width: 64px; height: 64px; border: 2px solid #ead8ae; border-radius: 50%; text-align: center; background: #fcf7ec; }
.xray-score b { display: block; font-size: var(--fs-lg); line-height: 1; font-weight: var(--fw-heavy); color: #8d6519;
  font-variant-numeric: tabular-nums; }

.xray-scoring { border: 1px solid var(--border); border-radius: var(--r); background: rgba(255,255,255,.22); }
.xray-scoring:not([open]) { border-color: transparent; background: transparent; }
.xray-scoring > summary { display: flex; justify-content: space-between; gap: 15px; padding: 13px 14px; cursor: pointer; list-style: none; font-size: var(--fs-xs); color: var(--text-2); }
.xray-scoring:not([open]) > summary { justify-content: flex-start; padding: 0; }
.xray-scoring > summary::-webkit-details-marker { display: none; }
.xray-scoring > summary small { color: var(--text-3); text-transform: none; letter-spacing: 0; }
.xray-scoring-view, .xray-scoring-hide { font-weight: var(--fw-medium); }
.xray-scoring-hide { display: none; }
.xray-scoring[open] .xray-scoring-view { display: none; }
.xray-scoring[open] .xray-scoring-hide { display: inline; }
.xray-scoring:not([open]) > summary small { display: none; }
.xray-scoring-body { padding: 0 14px 12px; }
.xray-score-row { display: grid; grid-template-columns: 115px minmax(220px, 1fr); gap: 5px 14px; padding: 8px 0; }
.xray-score-label { color: var(--text-2); font-size: var(--fs-xs); }
.xray-score-metric { display: flex; align-items: center; gap: 9px; min-width: 0; }
.xray-score-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: #ebe8e2; overflow: hidden; }
.xray-score-track i { display: block; height: 100%; border-radius: inherit; background: #2b8fdc; }
.xray-score-track i.low { background: #df302d; }
.xray-score-metric > span { flex: 0 0 112px; color: var(--text-3); font-size: var(--fs-2xs); text-align: right; font-variant-numeric: tabular-nums; }
.xray-score-metric b { color: var(--text-2); }
.xray-score-evidence { grid-column: 2; color: var(--text-3); font-size: var(--fs-2xs); line-height: 1.45; }
.xray-match-tag { display: inline-block; margin-right: 7px; padding: 2px 7px; border: 1px solid #ead8ae; border-radius: 5px; color: #80601c; background: #fcf7ec; font-size: var(--fs-2xs); text-transform: uppercase; }
.xray-score-total { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-xs); }
.xray-score-total b { color: #b98222; font-size: var(--fs-md); }

/* Expandable summary: LLM summary, then raw snippet, then score reasoning. */
.xray-more summary { cursor: pointer; color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  user-select: none; }
.xray-more summary:hover { color: var(--brand-ink); }
.xray-more-body { margin-top: 8px; }
.xray-sum { color: var(--text-2); font-size: var(--fs-sm); }
.xray-snip { color: var(--text-3); font-size: var(--fs-xs); margin-top: 6px; }
.xray-why { color: var(--text-2); font-size: var(--fs-xs); margin-top: 6px; }
.xray-why b { color: var(--brand-ink); }

@media (max-width: 920px) {
  .xray-board { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .xray-grid { grid-template-columns: 1fr; }
  .xray-card { padding: 16px; }
  .xray-crit-grid { grid-template-columns: 1fr; }
  .xray-score-row { grid-template-columns: 1fr; }
  .xray-score-evidence { grid-column: 1; }
  .xray-score-metric > span { flex-basis: 105px; }
}

/* ---- Search-page structural layer -------------------------------------------
   Structure only; the Zenithr cobalt visual layer further down owns colour. */

.banner {
  gap: 15px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(7,90,200,.16);
  border-radius: var(--r);
  background: var(--brand-soft);
  color: var(--text-2);
  font-size: var(--fs-base);
}
.banner b { color: var(--text); }
.banner-ico {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  background: var(--grad);
  color: var(--text-inverse);
  font: italic var(--fs-lg)/1 var(--display);
}

label { color: var(--text); font-weight: var(--fw-semibold); }
input:not([type="checkbox"]), select { min-height: 48px; }
/* focus border/bg and the select chevron are defined once, in cobalt, below. */
/* ---- Assistant composer: centered logo + gradient headline + white card ---- */
.brief-chat { max-width: 780px; margin: 0 auto; padding: clamp(16px, 2.6vw, 30px) 0 6px; }
.assist-logo { width: 78px; height: 78px; margin: 0 auto 20px; }
.assist-logo svg { display: block; width: 100%; height: 100%; }
/* The blurred blue blobs rotate inside the donut mask — a living gradient. */
.assist-logo-blobs {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: assist-blobs 9s linear infinite;
}
@keyframes assist-blobs { to { transform: rotate(360deg); } }
.brief-chat-head { max-width: 640px; margin: 0 auto 28px; text-align: center; }
.brief-chat-head h2 {
  margin: 0 0 8px; font: 700 clamp(26px, 3.4vw, 32px)/1.15 var(--display);
  letter-spacing: -.03em; text-wrap: balance;
  color: var(--brand-ink);
}
.brief-chat-head p { margin: 0; color: var(--text-3); font-size: var(--fs-base); }

/* The card: free-text brief on top, source pills + mic/send below, manual row. */
.assist-card {
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .15s, box-shadow .2s;
}
.assist-card:focus-within { border-color: var(--brand); box-shadow: var(--ring), var(--shadow-sm); }
.assist-card textarea {
  min-height: 64px; padding: 18px 18px 6px; border: 0; border-radius: 0;
  background: transparent; font-size: var(--fs-md); line-height: 1.55; resize: none;
}
.assist-card textarea:hover, .assist-card textarea:focus {
  border: 0; background-color: transparent; box-shadow: none;
}
/* Live criteria checks under the brief: each label sits grey until the
   as-you-type parse finds it, then turns green (Juicebox-style). */
.assist-detected {
  display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 2px 18px 4px;
}
.assist-check {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-3); font: var(--fw-medium) var(--fs-xs)/1.7 var(--font);
  transition: color .15s;
}
.assist-check.found { color: var(--ok); font-weight: var(--fw-semibold); }
.assist-check-mark { font-size: var(--fs-2xs); }
.assist-check:not(.found) .assist-check-mark { opacity: .55; }
.assist-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding: 6px 12px 12px 14px;
}
.assist-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.assist-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-3);
  font: var(--fw-semibold) var(--fs-sm)/1 var(--font); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.assist-pill:hover { background: var(--surface-3); color: var(--text-2); }
.assist-pill input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.assist-pill:has(input:checked) { background: var(--brand-soft); color: var(--brand); }
.assist-pill:has(input:focus-visible) { box-shadow: var(--ring); }
.assist-pill-mark {
  display: grid; place-items: center; width: 16px; height: 16px;
  border: 1.5px solid currentColor; border-radius: 4.5px;
  font: var(--fw-heavy) var(--fs-2xs)/1 var(--font); letter-spacing: 0;
}
.assist-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.assist-mic {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-3);
  cursor: pointer; transition: color .15s, background .15s;
}
.assist-mic:hover { color: var(--text-2); background: var(--surface-2); }
.assist-mic svg { width: 19px; height: 19px; }
.assist-mic.listening { color: var(--text-inverse); background: var(--err); animation: mic-pulse 1.5s ease-out infinite; }
@keyframes mic-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(204,59,74,.35); }
  100% { box-shadow: 0 0 0 10px rgba(204,59,74,0); }
}
.brief-send {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: var(--brand); color: var(--text-inverse);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out-quart), filter .15s,
              background .15s, color .15s, box-shadow .2s;
}
.brief-send svg { width: 17px; height: 17px; }
.brief-send:not(:disabled):hover {
  transform: translateY(-1px) scale(1.05); filter: brightness(1.07);
  box-shadow: 0 10px 22px -10px rgba(0,68,174,.8);
}
.brief-send:not(:disabled):active { transform: scale(.94); }
/* Empty brief: the send sits quiet and grey (state is synced from JS). */
.brief-send:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
/* Parsing in flight: the arrow yields to a spinning loader icon (React swaps
   the SVG; this only turns it). */
.brief-send.is-loading { background: var(--brand); color: var(--text-inverse); cursor: wait; }
.brief-send.is-loading svg { animation: service-spin .7s linear infinite; }
.assist-foot { padding: 9px 14px; border-top: 1px solid var(--surface-2); }
.assist-manual {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0;
  border: 0; background: none; color: var(--text-2);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font); cursor: pointer; transition: color .15s;
}
.assist-manual:hover { color: var(--text); }
.assist-manual svg { width: 15px; height: 15px; }

/* Suggestion categories: three cards; the active one opens a list below. */
.assist-categories {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-top: 18px;
}
.assist-category {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 17px 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text-2); font: var(--fw-semibold) var(--fs-sm)/1 var(--font);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out-quart), border-color .15s,
              background .15s, color .15s, box-shadow .2s;
}
.assist-category svg { width: 19px; height: 19px; color: var(--text-3); transition: color .15s; }
.assist-category:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.assist-category:active { transform: translateY(0) scale(.98); }
.assist-category.active {
  border-color: rgba(7,90,200,.35); background: var(--brand-soft);
  color: var(--brand-ink); box-shadow: var(--shadow-sm);
}
.assist-category.active svg { color: var(--brand); }
.assist-suggestions {
  margin-top: 14px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
  text-align: left; animation: reveal .28s var(--ease-out-quart) both;
}
.assist-suggestions-head {
  padding: 12px 16px; border-bottom: 1px solid var(--surface-2);
  color: var(--text-2); font: var(--fw-semibold) var(--fs-sm)/1 var(--font);
}
.assist-suggestions ul { margin: 0; padding: 0; list-style: none; }
.assist-suggestions li { animation: crit-in .3s var(--ease-out-quart) both; animation-delay: calc(var(--i, 0) * 30ms); }
.assist-suggestions li + li { border-top: 1px solid var(--surface-2); }
.assist-suggestions li button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border: 0; background: none; text-align: left;
  color: var(--text-2); font: var(--fw-medium) var(--fs-sm)/1.5 var(--font); cursor: pointer;
  transition: background .1s, color .1s;
}
.assist-suggestions li button:hover { background: var(--surface-2); color: var(--text); }
.assist-suggestions li button svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--brand); }
.brief-status {
  min-height: 20px; margin: 10px auto 0; max-width: 760px;
  color: var(--text-3); font-size: var(--fs-xs);
}
.brief-criteria {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; max-width: 760px; margin: 12px auto 0;
}
.brief-criterion {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r);
  background: rgba(255,255,255,.64);
}
.criterion-check {
  display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px;
  border-radius: 50%; background: var(--surface-3); color: var(--text-3); font-weight: var(--fw-heavy);
}
.brief-criterion.identified .criterion-check { background: var(--ok-soft); color: var(--ok); }
.brief-criterion span:last-child { min-width: 0; }
.brief-criterion small, .brief-criterion b { display: block; overflow: hidden; text-overflow: ellipsis; }
.brief-criterion small { color: var(--text-3); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; }
.brief-criterion b { color: var(--text); font-size: var(--fs-sm); white-space: nowrap; }
.brief-criterion.missing b { color: var(--text-3); font-weight: var(--fw-medium); }
.criteria-editor {
  margin-top: 16px; padding: 0 18px 18px; border: 1px solid var(--border);
  border-radius: var(--r); background: rgba(255,255,255,.35);
}
.criteria-editor summary {
  padding: 15px 0; color: var(--text-2); cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.xray-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.xray-role-field, .xray-location-field, .xray-industry-field { grid-column: span 2; }
.xray-experience-field, .xray-company-field { grid-column: span 3; }
.toggle { border-radius: var(--r); }
.chip { border-radius: var(--r-sm); }

.row .btn.lg, .xray-actions .btn.lg { min-height: 48px; }

.keycode, code { color: var(--text-2); }
.empty { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .xray-grid { grid-template-columns: 1fr 1fr; }
  .xray-role-field, .xray-location-field, .xray-industry-field,
  .xray-experience-field, .xray-company-field { grid-column: auto; }
  .brief-criteria { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .nav { align-items: flex-start; }
  .nav-right { justify-content: flex-end; flex-wrap: wrap; }
  .wrap { padding: 0 15px 48px; }
  .xray-grid { grid-template-columns: 1fr; }
  .row { align-items: stretch; flex-direction: column; }
  .row .btn.lg { width: 100%; }
  .xray-actions { align-items: stretch; flex-direction: column; }
  .brief-chat { padding: 12px 0 0; }
  .brief-criteria { grid-template-columns: 1fr; }
  .assist-categories { grid-template-columns: 1fr; gap: 10px; }
  .assist-category { flex-direction: row; justify-content: center; padding: 13px 12px; }
}

/* ---- Live sourcing results panel -------------------------------------------
   Candidates stream in as the search finds them: the panel slides up once,
   each new row fades in with a stagger, and a pulsing badge marks a live run. */
.xray-results { padding: 0; overflow: hidden; margin-top: 30px; }
.xray-results.reveal { animation: panel-in var(--dur-3) var(--ease-out-quint) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(18px) scale(.995); }
  to   { opacity: 1; transform: none; }
}
.xray-results-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; padding: 22px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.xray-results-heading { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.xray-results-heading h2 {
  margin: 0; font-family: var(--display); font-weight: var(--fw-regular); font-size: var(--fs-xl);
  letter-spacing: -.01em;
}
.xray-results-meta { color: var(--text-3); font-size: var(--fs-sm); transition: color .3s ease; }
.xray-results-actions { display: flex; align-items: center; gap: 14px; }
.xray-results-body { overflow-x: auto; }
.xray-results-body .empty { padding: 40px 24px; text-align: center; color: var(--text-3); }

/* Pulsing "Searching…" badge while the run is live. */
.live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-ink); background: var(--brand-soft);
  border: 1px solid var(--brand-soft-2); border-radius: var(--r-pill, var(--r-pill));
  padding: 5px 13px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand);
  animation: live-pulse 1.3s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--brand-soft-2); }
  50%      { opacity: .45; transform: scale(.72); box-shadow: 0 0 0 5px transparent; }
}

/* The waiting board while a search runs (~1 minute). Everything on it is real
   poll data — orbit, rotating caption, query bar, running counts, elapsed. */
.searching { padding: 52px 24px 46px; text-align: center; }
.searching-orbit {
  position: relative; width: 46px; height: 46px; margin: 0 auto 22px;
}
.searching-orbit-dot {
  position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
  transform-origin: 50% 50%;
  animation: searching-orbit 1.5s var(--ease-out-quart) infinite;
}
.searching-orbit-dot:nth-child(2) { animation-delay: -.5s; background: var(--brand-bright); }
.searching-orbit-dot:nth-child(3) { animation-delay: -1s; background: var(--brand-ink); }
@keyframes searching-orbit {
  0%   { transform: rotate(0deg) translateX(17px) scale(.55); opacity: .35; }
  50%  { transform: rotate(180deg) translateX(17px) scale(1); opacity: 1; }
  100% { transform: rotate(360deg) translateX(17px) scale(.55); opacity: .35; }
}
/* Keyed on the rotating word in React, so each turn replays the entrance. */
.searching-title {
  display: block; color: var(--text); font-size: var(--fs-lg);
  font-weight: var(--fw-bold); letter-spacing: -.01em;
  animation: searching-caption-in .45s var(--ease-out-quart) both;
}
/* Keyed on the caption text in React, so each new line replays the entrance. */
.searching-caption {
  margin: 9px auto 24px; max-width: 42ch; min-height: 2.6em;
  color: var(--text-2); font-size: var(--fs-base); line-height: 1.45;
  animation: searching-caption-in .5s var(--ease-out-quart) both;
}
@keyframes searching-caption-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.searching-bar {
  width: min(360px, 100%); height: 5px; margin: 0 auto;
  border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden;
}
.searching-bar-fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transition: width var(--dur-3) var(--ease-out-quint);
}
.searching-stats {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 8px 20px; margin: 18px 0 0;
  color: var(--text-3); font-size: var(--fs-xs);
}
.searching-stats b {
  color: var(--brand-ink); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.searching-hint {
  margin: 22px auto 0; max-width: 46ch;
  color: var(--text-3); font-size: var(--fs-xs); line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .searching-orbit-dot { animation: none; opacity: 1; }
  .searching-caption, .searching-title { animation: none; }
}

/* Live progress rail: Searching → Scoring → Ranking → Done. */
.xray-stepper {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px; padding: 16px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.xray-stepper[hidden] { display: none; }
.xray-step {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  border-radius: var(--r-pill, var(--r-pill)); border: 1px solid var(--border);
  background: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-3); white-space: nowrap;
  transition: color .35s ease, border-color .35s ease, background .35s ease, box-shadow .35s ease, opacity .35s ease;
}
.xray-step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; font-size: var(--fs-xs);
}
.xray-step-line {
  flex: 0 0 26px; height: 2px; border-radius: 2px; background: var(--border);
  transition: background .35s ease;
}
.xray-step-line.filled { background: var(--brand); }
.xray-step.pending { opacity: .5; }
.xray-step.active {
  color: var(--brand-ink); border-color: var(--brand);
  background: var(--brand-soft); box-shadow: var(--ring);
}
.xray-step.done {
  color: var(--ok); border-color: var(--ok-soft); background: var(--ok-soft);
}
.xray-step.failed {
  color: var(--err); border-color: var(--err-soft); background: var(--err-soft);
}
@media (max-width: 640px) {
  .xray-stepper { padding: 12px; gap: 2px; }
  .xray-step { padding: 8px; gap: 0; }
  .xray-step-label { display: none; }          /* icons-only when cramped */
  .xray-step-line { flex-basis: 12px; }
}

/* Sourcing summary line: returned / per-source / sourced-before-ranking. */
.xray-summary {
  padding: 12px 24px; border-bottom: 1px solid var(--border);
  background: var(--surface); color: var(--text-3); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.xray-summary[hidden] { display: none; }
.xray-summary b { color: var(--text); font-weight: var(--fw-bold); }
.xray-summary-sep { margin: 0 3px; opacity: .45; }

/* Count pills next to section titles ("4 total"). */
.count-pill {
  padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid rgba(7,90,200,.14);
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .02em; white-space: nowrap;
}
.count-pill:empty { display: none; }

/* New cards: fade + rise with a stagger, plus a warm highlight that cools off. */
.xray-card.entering {
  animation: row-in var(--dur-3) var(--ease-out-quint) both,
             row-glow 1.5s ease-out both;
  animation-delay: calc(var(--stagger, 0) * 55ms);
}
@keyframes row-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes row-glow {
  0%   { background: var(--brand-soft-2); }
  60%  { background: var(--brand-soft); }
  100% { background: transparent; }
}

/* Shimmer skeleton shown until the first candidates land. */
.xray-skel {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; padding: 20px;
}
.skel-card { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r); }
.skel-card i {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 45%, var(--surface-3) 65%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
.skel-card i:nth-child(2n) { width: 82%; }
.skel-card i:nth-child(3n) { width: 64%; }
@keyframes shimmer { to { background-position: -220% 0; } }

@media (prefers-reduced-motion: reduce) {
  .xray-results.reveal, .xray-card.entering, .live-dot, .skel-card i { animation: none; }
}

/* ---- Service views and sourcing destination ----------------------------- */
/* (Search source moved into the composer's .assist-pills; the standalone
   source-picker cards were removed with it.) */
.count-field > label {
  display: block; margin-bottom: 12px; color: var(--text-2); font-size: var(--fs-xs);
  font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase;
}
.count-field { margin-top: 26px; }
.count-field > label .muted { font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.count-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--r-pill); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.count-opt {
  position: relative; min-width: 54px; margin: 0; padding: 9px 16px;
  border-radius: var(--r-pill); text-align: center;
  color: var(--text-3); font: var(--fw-semibold) var(--fs-sm)/1 var(--font);
  font-variant-numeric: tabular-nums; cursor: pointer; user-select: none;
  transition: background .15s, color .15s, box-shadow .15s;
}
.count-opt:hover { color: var(--text-2); background: var(--surface-3); }
.count-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.count-opt:has(input:checked) {
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 8px rgba(0,45,112,.28);
}
.count-opt:has(input:focus-visible) { box-shadow: var(--ring); }
.count-hint { margin: 8px 2px 0; font-size: var(--fs-xs); }
.btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.btn.is-loading { cursor: wait; }
.btn.is-loading svg { display: none; }
/* In-flight buttons keep the resting face only — the reveal would fight the
   spinner, and the flood would imply the click had landed somewhere. */
.btn.is-loading .btn-reveal, .btn.is-loading .btn-orb { display: none; }
.btn.is-loading .btn-face { transform: none !important; opacity: 1 !important; }
.btn.is-loading::before {
  content: ""; flex: 0 0 auto; align-self: center; width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor; border-radius: 50%;
  animation: service-spin .7s linear infinite;
}
@keyframes service-spin { to { transform: rotate(360deg); } }

.results-nav {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
  padding: 17px 22px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.results-nav > div { display: flex; flex-direction: column; line-height: 1.25; }
.results-nav b { color: var(--text); font-size: var(--fs-base); }
.results-kicker { color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.results-back {
  display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 50%; color: var(--brand); background: var(--surface-2);
  font: var(--fw-semibold) var(--fs-md)/1 var(--font); transition: transform .18s, border-color .18s, background .18s;
}
.results-back:hover { transform: translateX(-2px); border-color: var(--brand); background: var(--brand-soft); }
.results-back:active { transform: scale(.92); }

body.results-view .page-head,
body.results-view .wizard-card { display: none; }
body.results-view .wrap { max-width: 1180px; padding-top: 28px; }
body.results-view .xray-results { display: block; margin-top: 0; view-transition-name: candidates-page; }
#sourceWizard { view-transition-name: search-page; }
::view-transition-old(search-page) { animation: service-leave .22s ease both; }
::view-transition-new(candidates-page) { animation: service-enter .42s var(--ease-out-quint) both; }
::view-transition-old(candidates-page) { animation: service-leave .2s ease both; }
::view-transition-new(search-page) { animation: service-enter .38s var(--ease-out-quint) both; }
@keyframes service-enter { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes service-leave { to { opacity: 0; transform: translateY(-8px) scale(.99); } }

@media (max-width: 680px) {
  .results-nav { padding: 14px 16px; }
  body.results-view .wrap { padding: 16px 12px 48px; }
}

/* ---- Source Engine · Zenithr visual language --------------------------------
   Deep navy, electric cobalt and cyan light, with soft glassy surfaces. */
/* The cobalt token values that lived here are now the single :root at top. */

body {
  min-height: 100%;
  background:
    radial-gradient(850px 460px at 15% -5%, rgba(31,202,228,.16), transparent 68%),
    radial-gradient(900px 520px at 88% 2%, rgba(40,99,218,.16), transparent 70%),
    linear-gradient(180deg, #f8fbff 0%, var(--surface-2) 55%, #f7faff 100%);
  background-attachment: fixed;
  color: var(--text);
}

.nav {
  min-height: 76px;
  padding: 14px clamp(20px, 4vw, 64px);
  background: rgba(250,253,255,.82);
  border-color: rgba(13,67,137,.1);
  box-shadow: 0 12px 40px -34px rgba(0,42,104,.65);
  backdrop-filter: blur(22px) saturate(150%);
}
.brand { gap: 10px; color: var(--text); font-family: var(--font); font-size: var(--fs-lg); letter-spacing: -.025em; }
.brand .mark { width: 32px; height: 32px; color: var(--brand); }
.brand .mark svg { width: 30px; height: 30px; }
.brand-name { color: var(--text) !important; font-weight: var(--fw-medium) !important; }
.brand-name b { color: var(--brand); font-weight: var(--fw-bold); }
.conn { border-color: rgba(7,90,200,.1); background: rgba(232,240,251,.7); }
.signout { background: rgba(255,255,255,.72); }

.wrap { max-width: 1240px; padding: 0 28px 84px; }
.page-head {
  position: relative; overflow: hidden;
  margin: 0 calc(50% - 50vw) 30px;
  padding: clamp(28px, 3.6vw, 48px) 24px clamp(26px, 3.2vw, 44px);
  border: 0;
  background:
    radial-gradient(560px 230px at 50% 0%, rgba(20,191,235,.22), transparent 78%),
    linear-gradient(115deg, rgba(235,251,253,.9), rgba(221,235,255,.88));
}
.page-head::before, .page-head::after {
  content: ""; position: absolute; border-radius: var(--r-pill); pointer-events: none;
  filter: blur(1px);
}
.page-head::before {
  width: 260px; height: 260px; left: calc(50% - 130px); top: -205px;
  background: rgba(17,193,233,.42); box-shadow: 0 0 95px rgba(17,193,233,.52);
}
.page-head::after {
  width: 360px; height: 360px; right: -170px; bottom: -280px;
  background: rgba(34,91,205,.11);
}
.page-head > * { position: relative; z-index: 1; }
.eyebrow {
  margin-bottom: 20px; color: var(--brand); font: var(--fw-bold) var(--fs-xs)/1 var(--font);
  letter-spacing: .16em; text-transform: uppercase;
}
/* Hero eyebrow becomes a floating glass pill with a live cyan cue. */
.page-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px; padding: 8px 15px;
  border: 1px solid rgba(7,90,200,.16); border-radius: var(--r-pill);
  background: rgba(255,255,255,.66);
  box-shadow: 0 10px 26px -20px rgba(0,45,112,.55);
  backdrop-filter: blur(8px);
  letter-spacing: .13em;
}
.page-head .eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-bright); box-shadow: 0 0 8px rgba(18,185,232,.85);
}
.page-head h1 {
  max-width: 880px; margin: 0 auto 18px; color: var(--text);
  font-family: var(--display); font-size: clamp(32px, 3.6vw, 46px);
  font-weight: var(--fw-regular); line-height: 1.04; letter-spacing: -.05em;
}
.page-head h1 em {
  color: var(--brand); font-weight: var(--fw-bold); font-style: normal;
}
.page-head p { max-width: 700px; color: var(--text-2); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; text-wrap: balance; }

.card {
  border-color: rgba(10,69,143,.12);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.wizard-card { padding: clamp(20px, 3vw, 38px); }

/* (The dark cobalt brief panel was replaced by the light assistant composer
   defined in the base layer above — no overrides needed here.) */

.criteria-editor { border-color: var(--border); background: rgba(245,249,255,.72); }
input:not([type="checkbox"]), select, textarea, .chip-input {
  border-color: var(--border); background-color: rgba(247,250,255,.92); color: var(--text);
}
input:not([type="checkbox"]):focus, select:focus, textarea:focus, .chip-input:focus-within {
  border-color: var(--brand); background-color: #fff;
}
select:hover, select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23075ac8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.toggle { background: #f5f9ff; }
.toggle:has(input:checked) { color: var(--brand-ink); border-color: #75a9dc; background: var(--brand-soft); }
.chip { color: var(--brand-ink); border-color: rgba(7,90,200,.14); background: var(--brand-soft); }

/* Buttons are defined once in the interactive-hover-button block above; the
   old flat-fill overrides that used to sit here would have painted over the
   orb, so only the pill radius is restated. */
.btn { border-radius: var(--r-pill); }

.section-label { color: var(--text-2); font-family: var(--font); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .14em; }
.xray-card { border-color: rgba(10,69,143,.12); background: rgba(255,255,255,.9); }
.xray-results-head { background: linear-gradient(110deg, #f5f9ff, #edf5ff); }
.xray-results-heading h2 { color: var(--text); font-family: var(--font); font-weight: var(--fw-bold); }
.xray-avatar { color: var(--brand); background: linear-gradient(145deg, #e7f7fc, #e7effd); }
.xray-name span { color: var(--brand-bright-text); }
.xray-score { border-color: #b9d8ef; background: linear-gradient(145deg, #f5fbff, #e9f4ff); }
.xray-score b { color: var(--brand-ink); }
.xray-score-track { background: #dfeaf5; }
.xray-score-track i { background: linear-gradient(90deg, #0d77cc, #24b7dc); }
.xray-score-track i.low { background: var(--err); }
.xray-match-tag { border-color: #a9d4e7; color: var(--brand-ink); background: #edf9fc; }
.xray-score-total b { color: var(--brand); }
.xray-evidence-chip { border-radius: var(--r-sm); background: #eef4fb; }
.live-badge { color: var(--brand-ink); }

.login-wrap {
  background:
    radial-gradient(700px 430px at 50% 0%, rgba(19,191,235,.35), transparent 72%),
    linear-gradient(145deg, #03162f, #062b59 58%, #07447d);
}
.login-card { background: rgba(255,255,255,.95); }
.login-card h1 { color: var(--text); font-weight: var(--fw-bold); }

@media (max-width: 680px) {
  .page-head { margin-bottom: 22px; padding: 48px 20px 52px; }
  .page-head h1 { font-size: clamp(34px, 11vw, 52px); }
}

/* ============================================================================
   Motion & live-reactive layer
   ----------------------------------------------------------------------------
   Additive pass: makes the static shell feel alive and reactive without
   touching the active Source Engine · Zenithr palette (cobalt #075ac8, cyan
   #12b9e8, Inter). Every effect conveys state — entrance, feedback, reveal —
   and collapses to a crossfade or nothing under prefers-reduced-motion.
   Timings follow the product register: 120ms feedback / 220ms state / 420ms
   reveal. Only transform, opacity, filter and shadow animate (composited).
   ========================================================================== */
/* Motion tokens (--ease-*, --dur-*) now live in the single :root at top. */

/* ---- Hero: signature entrance + living aurora + wordmark sheen ------------- */
.page-head h1 { text-wrap: balance; }
.page-head .eyebrow { animation: hero-rise .7s var(--ease-out-quint) both; }
.page-head h1 { animation: hero-rise .8s var(--ease-out-quint) .09s both; }
.page-head p  { animation: hero-rise .75s var(--ease-out-quint) .2s both; }
/* Blur-in reads as a deliberate, premium reveal — not just a fade. */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* The cyan/cobalt glow blobs travel — the hero is visibly, continuously alive. */
.page-head::before { animation: glow-drift-a 13s ease-in-out infinite alternate; }
.page-head::after  { animation: glow-drift-b 17s ease-in-out infinite alternate; }
@keyframes glow-drift-a {
  0%   { transform: translate(-64px, 12px) scale(1);    opacity: .72; }
  100% { transform: translate(74px, -30px) scale(1.24); opacity: 1; }
}
@keyframes glow-drift-b {
  0%   { transform: translate(44px, 0) scale(1);        opacity: .68; }
  100% { transform: translate(-76px, 44px) scale(1.2);  opacity: 1; }
}
/* ---- Nav: gains depth once the page scrolls ------------------------------- */
.nav { transition: box-shadow var(--dur-2) var(--ease-out-quart), background var(--dur-2) var(--ease-out-quart); }
.nav.scrolled {
  background: rgba(250, 253, 255, .93);
  box-shadow: 0 16px 44px -30px rgba(0, 42, 104, .85);
}

/* ---- Mode switch: incoming panel crossfades in ---------------------------- */
.mode.mode-in { animation: mode-in var(--dur-3) var(--ease-out-quint) both; }
@keyframes mode-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Buttons: lift, press and reveal all live in the .btn block above ----- */
/* Copy-boolean button morphs to a success state before the toast fades. */
.btn.ghost.copied {
  --btn-face: var(--ok-soft); --btn-ink: var(--ok);
  --btn-flood: var(--ok); --btn-flood-ink: var(--text-inverse);
  --btn-edge: var(--ok-line); --btn-edge-hover: var(--ok);
}

/* ---- Cards + chips: perceptible lift on hover ----------------------------- */
.card, .xray-card {
  transition: transform var(--dur-2) var(--ease-out-quart),
              box-shadow var(--dur-2) var(--ease-out-quart), border-color .18s;
}
.xray-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 56px -30px rgba(0, 70, 180, .5);
  border-color: #a9c5e7;
}
.chip { transition: transform var(--dur-1) var(--ease-out-quart); }
.xray-pill { transition: transform var(--dur-1) var(--ease-out-quart), filter .15s; }
.xray-pill:hover { transform: translateY(-1px) scale(1.04); }

/* ---- Brief criteria: staggered entrance + check pop ----------------------- */
.brief-criterion { animation: crit-in .42s var(--ease-out-quint) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes crit-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.brief-criterion.identified .criterion-check { animation: check-pop .42s var(--ease-out-quint) both; }
@keyframes check-pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.14); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Keyword chips: pop in (only the newly-added chip, not the whole list) - */
.chip.is-new { animation: chip-in .16s var(--ease-out-quart) both; }
@keyframes chip-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* ---- Boolean query text refreshes softly on rebuild ----------------------- */
.boolean-query { transition: opacity var(--dur-2) var(--ease-out-quart); }

/* ---- Modal: backdrop fade + panel lift-in --------------------------------- */
.modal-bg { animation: backdrop-in var(--dur-2) var(--ease-out-quart) both; }
.modal    { animation: modal-in .34s var(--ease-out-quint) both; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---- Disclosure bodies reveal when opened --------------------------------- */
.xray-scoring[open] .xray-scoring-body,
.xray-more[open] .xray-more-body,
.criteria-editor[open] > *:not(summary) { animation: reveal .28s var(--ease-out-quart) both; }

/* ---- Live counter tick (score/summary numbers rolling up) ----------------- */
.count-tick { animation: count-tick .34s var(--ease-out-quart); }
@keyframes count-tick {
  0%   { transform: translateY(-2px); opacity: .55; }
  100% { transform: none; opacity: 1; }
}

/* ---- Status badge: settle when a job/search reaches a terminal state ------ */
@keyframes badge-settle {
  0%   { transform: scale(.9);  opacity: .35; }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1);   opacity: 1; }
}

/* ---- Scroll reveal for below-the-fold blocks ------------------------------ */
/* JS adds .reveal-init only when it runs AND motion is allowed, so content is
   never gated on a class that might not fire (headless renders, hidden tabs). */
.reveal-init { opacity: 0; transform: translateY(20px); }
.reveal-in   { animation: reveal-up var(--dur-3) var(--ease-out-quint) both; }
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Touch: :hover fires on tap and sticks — suppress hover lifts there ---- */
@media (hover: none), (pointer: coarse) {
  .brief-send:hover, .assist-category:hover, .results-back:hover,
  .btn:not(:disabled):hover, .xray-card:hover,
  .xray-pill:hover { transform: none !important; }
}

/* ---- Reduced motion: drop movement, keep opacity/colour feedback ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Keyframes resolve to their resting (no-movement) end state; transitions are
     left running so comprehension-aiding opacity/colour fades still play — the
     rule is "remove position changes", not "remove all feedback". */
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .reveal-init { opacity: 1 !important; transform: none !important; }
  /* Remove physical movement that rides on transitions (slides, lifts, presses). */
  .btn:not(:disabled):hover, .btn:not(:disabled):focus-visible,
  .xray-card:hover,
  .brief-send:hover, .assist-category:hover, .results-back:hover,
  .xray-pill:hover { transform: none !important; }

  /* Interactive hover button: the labels crossfade in place and the orb starts
     pre-grown and invisible, so the flood arrives as a fade with no travel.
     The orb is normally a scaled circle, so its scale is overridden here too —
     otherwise it would sit at seed size and the fill would never appear. */
  .btn .btn-face, .btn .btn-reveal { transform: none !important; }
  .btn .btn-orb {
    left: 0; top: 0; width: 100%; height: 100%; border-radius: var(--r-pill);
    transform: none !important; opacity: 0; transition: opacity .2s linear;
  }
  .btn:not(:disabled):hover .btn-orb,
  .btn:not(:disabled):focus-visible .btn-orb { opacity: 1; }
}

/* ============================================================================
   Sourcing composer polish — modernise the brief / criteria / actions surface.
   Same Zenithr palette (cobalt #075ac8, cyan #12b9e8); scoped to these blocks.
   ========================================================================== */

/* Collapse the status line until it is used. */
.brief-status:empty { min-height: 0; margin-top: 0; }

/* Accordions (criteria editor, history, scoring details) glide open on
   browsers that support animating <details>; others keep the reveal fade. */
@supports (interpolate-size: allow-keywords) {
  details { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0; overflow-y: clip;
    transition: block-size var(--dur-3) var(--ease-out-quint),
                content-visibility var(--dur-3) allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: reduce) {
    details::details-content { transition: none; }
  }
}

/* "Review or select criteria manually": modern disclosure, rotating chevron. */
.criteria-editor {
  border-radius: var(--r-lg); background: rgba(255,255,255,.8);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.criteria-editor:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.criteria-editor[open] { background: #fff; box-shadow: var(--shadow-sm); }
.criteria-editor > summary {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  list-style: none; border-radius: var(--r-lg);
}
.criteria-editor > summary::-webkit-details-marker { display: none; }
.criteria-editor > summary::before {
  content: ""; flex: 0 0 auto; width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23075ac8' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='4' y1='12' x2='20' y2='12'/%3E%3Cline x1='4' y1='18' x2='20' y2='18'/%3E%3Ccircle cx='9' cy='6' r='2.4' fill='%23075ac8'/%3E%3Ccircle cx='15' cy='12' r='2.4' fill='%23075ac8'/%3E%3Ccircle cx='7' cy='18' r='2.4' fill='%23075ac8'/%3E%3C/svg%3E") center/contain no-repeat;
}
.criteria-editor > summary::after {
  content: "⌄"; margin-left: auto; font-size: var(--fs-md); line-height: 1;
  color: var(--text-3); transition: transform .25s var(--ease-out-quart);
}
.criteria-editor[open] > summary::after { transform: rotate(180deg); }
.criteria-editor[open] > summary { border-bottom: 1px solid var(--border); }

/* Actions row: any full-width hint sits on its own line beneath the controls. */
.xray-actions .role-hint { flex-basis: 100%; margin: 2px 0 0; }

/* ============================================================================
   Modernisation layer — cohesive, convenient, current across every surface.
   Blue/cyan Zenithr palette only; product-register restraint. All motion here
   is covered by the prefers-reduced-motion block above.
   ========================================================================== */

/* --- Global: consistent focus rings + tidy selection ---------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--r);
}
::selection { background: rgba(18, 185, 232, .22); color: var(--text); }

/* --- Form controls: brighter hover cue ------------------------------------ */
input:not([type="checkbox"]):hover, select:hover, textarea:hover, .chip-input:hover {
  border-color: var(--brand-bright);
}

/* --- Candidate cards: the core surface, made premium ---------------------- */
.xray-card {
  border-radius: var(--r-lg); padding: 24px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 18px 44px -34px rgba(0, 45, 112, .38), 0 1px 2px rgba(0, 45, 112, .05);
}
.xray-card-top { gap: 16px; }
.xray-avatar {
  flex: 0 0 52px; width: 52px; height: 52px; font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--text-inverse); background: linear-gradient(145deg, #0a6fd0, #16b6e6);
  box-shadow: 0 8px 18px -10px rgba(7, 90, 200, .7);
}
.xray-name { font-size: var(--fs-md); }
/* span colour is --brand-bright-text (AA); the old opacity .7 broke contrast */

/* Score becomes a radial gauge: dotted track + an arc drawn by ScoreRing. */
.xray-score {
  position: relative; border: none !important; background: none !important;
  flex: 0 0 66px; width: 66px; height: 66px; padding: 0;
  --rc: var(--brand-bright);
}
.xray-score.mid { --rc: #0d77cc; }
.xray-score.low { --rc: #86b3dd; }
.xray-score-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); /* start the arc at 12 o'clock */
}
.xray-score-ring circle { fill: none; stroke-linecap: round; }
.xray-score-ring-track { stroke: var(--surface-3); stroke-width: 5; }
.xray-score-ring-arc {
  stroke: var(--rc); stroke-width: 7;
  transition: stroke-dashoffset 1.5s var(--ease-gauge);
}
.xray-score b { position: relative; z-index: 1; }
.xray-score b { color: var(--brand-ink); }

/* Badges + chips + platform pills: crisp, consistent pills. */
.xray-stale-badge { border-radius: var(--r-pill); padding: 3px 9px; font-size: var(--fs-2xs); }
.xray-pill { border-radius: var(--r-pill); padding: 3px 10px; font-weight: var(--fw-bold); }
.xray-card-actions { padding-top: 16px; }

/* --- Results panel -------------------------------------------------------- */
.xray-results { border-radius: var(--r-lg); }
.xray-results-head { padding: 22px 26px; }

/* --- Modal: softer, deeper, cleaner --------------------------------------- */
.modal { border-radius: var(--r-lg); }
.modal-bg { background: rgba(3, 22, 47, .44); backdrop-filter: blur(7px); }
.modal-head { padding: 22px 26px; }
th { letter-spacing: .06em; }
tr:hover td { background: rgba(18, 185, 232, .04); }

/* --- Toast: floating glass card ------------------------------------------- */
#toast {
  border-radius: var(--r); background: rgba(255, 255, 255, .95);
  border: 1px solid var(--border); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -24px rgba(0, 45, 112, .5);
}

.conn { border-radius: var(--r-pill); }

@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
.xray-avatar.sm {
  flex: 0 0 38px; width: 38px; height: 38px; font-size: var(--fs-sm);
  border-radius: var(--r); display: grid; place-items: center;
}

/* --- Persistent talent navigation ---------------------------------------- */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 55; width: 68px;
  display: flex; flex-direction: column; padding: 14px 8px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
}
.sidebar-brand {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 44px; height: 44px; margin: 0 auto; padding: 0;
  border: 0; background: transparent; color: var(--text-3); font: var(--fw-medium) var(--fs-md)/1 var(--font);
  cursor: pointer;
}
.sidebar-brand .mark { width: 28px; height: 28px; color: var(--brand); display: grid; place-items: center; }
.sidebar-brand .mark svg { width: 25px; height: 25px; }
.sidebar-brand b { color: var(--text); }
.sidebar-brand > span:last-child, .sidebar-label, .sidebar-link > span:not(.sidebar-count) { display: none; }
.sidebar-group { display: grid; gap: 6px; margin-top: 24px; }
#accountNav { margin-top: auto; }
.sidebar-label { padding: 0 12px 7px; color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .11em; text-transform: uppercase; }
.sidebar-link {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 44px; min-height: 44px; margin: 0 auto; padding: 10px; border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--text-2); font: var(--fw-semibold) var(--fs-base)/1.2 var(--font);
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.sidebar-link svg { flex: 0 0 20px; width: 20px; height: 20px; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-link:hover { color: var(--brand-ink); background: var(--brand-soft); }
.sidebar-link.active { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-soft-2); }
.sidebar-link:focus-visible, .sidebar-brand:focus-visible { outline: none; box-shadow: var(--ring); }
.sidebar-link::after, .sidebar-brand::after {
  content: attr(data-tooltip); position: absolute; top: 50%; left: calc(100% + 12px); z-index: 80;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
  font: var(--fw-medium) var(--fs-sm)/1 var(--font); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-4px, -50%);
  transition: opacity .14s ease, transform .14s ease;
}
.sidebar-link:hover::after, .sidebar-link:focus-visible::after,
.sidebar-brand:hover::after, .sidebar-brand:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.sidebar-count { position: absolute; top: -2px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--brand); color: var(--text-inverse); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.nav { margin-left: 68px; }
.nav > .brand { visibility: hidden; }
.wrap { transform: translateX(34px); }

/* --- Docked search history ------------------------------------------------
   Past candidate searches used to be an accordion of wide cards at the foot of
   the search page. They now slide out of the rail as one column of rows: role
   first, then the criteria that tell two same-role runs apart, then the one
   number that matters. The row open in the results view stays highlighted.
   -------------------------------------------------------------------------- */
.history-panel {
  position: fixed; inset: 0 auto 0 68px; z-index: 54; width: 300px;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
  /* visibility (not display) so the closed panel keeps its scroll position and
     drops out of the tab order on its own. */
  transform: translateX(-101%); visibility: hidden;
  transition: transform var(--dur-3) var(--ease-out-quart), visibility var(--dur-3);
}
.history-panel.is-open { transform: none; visibility: visible; }

.history-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 17px 14px 12px 16px;
}
.history-panel-head h2 { margin: 0; color: var(--text); font-size: var(--fs-md); letter-spacing: -.015em; }
.history-panel-head p {
  display: flex; align-items: center; gap: 9px; margin: 2px 0 0;
  color: var(--text-3); font-size: var(--fs-xs);
}
.history-running { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); font-weight: var(--fw-bold); }
.history-running::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: pulse 1.2s ease-in-out infinite;
}

.history-panel-tools { display: grid; gap: 8px; padding: 0 16px 12px; }
.history-new { width: 100%; justify-content: center; }
.history-filter {
  width: 100%; height: 34px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); font: var(--fs-sm)/1 var(--font);
}
.history-filter:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

.history-panel-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 24px; }
.history-panel-list ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.history-day {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 11px 6px 6px;
  background: linear-gradient(rgba(255,255,255,.97) 74%, rgba(255,255,255,0));
  color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .11em; text-transform: uppercase;
}

.history-row { position: relative; }
.history-row-open {
  display: grid; gap: 3px; width: 100%; padding: 10px 12px 11px;
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; text-align: left; cursor: pointer;
  font: var(--fs-sm)/1.4 var(--font);
  transition: background .15s, border-color .15s, padding-right .15s;
}
.history-row-open:hover { background: var(--surface-2); }
.history-row-open:focus-visible { outline: none; box-shadow: var(--ring); }
.history-row.is-active .history-row-open { background: var(--brand-soft); border-color: var(--brand-soft-2); }
/* The row tools sit over the right edge, so the text makes room for them
   rather than being covered by them. */
.history-row:hover .history-row-open, .history-row:focus-within .history-row-open,
.history-row.is-active .history-row-open { padding-right: 66px; }

.history-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.history-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.history-dot.done { background: var(--ok); }
.history-dot.failed { background: var(--err); }
.history-dot.running, .history-dot.queued { background: var(--brand); animation: pulse 1.2s ease-in-out infinite; }
.history-row-role {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: -.01em;
}
.history-row-criteria {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-left: 15px; color: var(--text-2); font-size: var(--fs-xs);
}
.history-row-stats {
  display: flex; align-items: baseline; gap: 7px; padding-left: 15px;
  color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.history-row-stats b { color: var(--brand-ink); font-weight: var(--fw-bold); }
/* Zero found is still the honest answer — it just shouldn't shout. */
.history-row-stats b.is-zero { color: var(--text-3); font-weight: var(--fw-medium); }
/* The space matters: this dot lands in the row's accessible name. */
.history-row-stats > span::before { content: "· "; margin-right: 7px; color: var(--border-strong); }
.history-row .progress { height: 3px; margin: 7px 0 1px 15px; }

.history-row-tools {
  position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 5px; opacity: 0;
  transition: opacity .15s;
}
.history-row:hover .history-row-tools, .history-row:focus-within .history-row-tools,
.history-row.is-active .history-row-tools { opacity: 1; }
.history-row-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; padding: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.history-row-icon svg { width: 15px; height: 15px; }
.history-row-icon:hover { color: var(--brand); background: var(--surface-3); border-color: var(--border); }
.history-row-icon:focus-visible { outline: none; box-shadow: var(--ring); }
.history-row-tools .history-row-icon { background: var(--surface); border-color: var(--border); }
.history-row-errors {
  padding: 3px 8px; border: 1px solid var(--err-line); border-radius: var(--r-pill);
  background: var(--err-soft); color: var(--err); cursor: pointer; white-space: nowrap;
  font: var(--fw-bold) var(--fs-2xs)/1.4 var(--font);
}
.history-row-errors:hover { background: var(--err); color: var(--text-inverse); }
.history-empty { margin: 24px 12px; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.55; }

/* Wide screens make room for the panel; narrow ones let it float over. */
body.history-open .nav, body.history-open .app-page { margin-left: 368px; }
body.history-open .wrap { width: calc(100% - 368px); margin-left: 368px; margin-right: 0; transform: none; }
.history-scrim { display: none; }

@media (prefers-reduced-motion: reduce) {
  .history-panel { transition: none; }
}

/* --- Candidate library and source pages ---------------------------------- */
.app-page { display: none; margin-left: 68px; min-height: calc(100vh - 75px); padding: 44px clamp(24px, 4vw, 64px) 72px; }
body.library-view > .wrap, body.sources-view > .wrap, body.apikeys-view > .wrap,
body.developers-view > .wrap { display: none; }
body.library-view #candidateLibraryPage, body.sources-view #candidateSourcesPage,
body.apikeys-view #apiKeysPage, body.developers-view #developersPage { display: block; }
.apikeys-wrap { max-width: 720px; margin: 0 auto; }
.apikeys-create { display: flex; gap: 12px; margin-bottom: 22px; }
.apikeys-create input {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  color: var(--text); font-size: var(--fs-base);
}
.apikeys-create input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.apikey-reveal {
  margin-bottom: 22px; padding: 16px; border: 1px solid var(--brand);
  border-radius: var(--r); background: var(--brand-soft);
}
.apikey-reveal-head { margin-bottom: 10px; color: var(--brand); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.apikey-reveal-row { display: flex; align-items: center; gap: 12px; }
.apikey-reveal-row code {
  flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap;
  padding: 10px 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border);
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--text);
}
.apikeys-list { display: flex; flex-direction: column; gap: 10px; }
.apikey-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
}
.apikey-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; }
.apikey-row-main code {
  padding: 3px 8px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand);
  font-family: var(--mono); font-size: var(--fs-sm);
}
.apikey-row-main b { color: var(--text); font-size: var(--fs-base); }
.apikey-row-meta { color: var(--text-3); font-size: var(--fs-xs); margin-left: auto; }
.apikeys-empty { padding: 28px; text-align: center; color: var(--text-3); font-size: var(--fs-base); }
.app-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto 28px; }
.app-page-head .eyebrow { display: block; margin-bottom: 5px; color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .11em; text-transform: uppercase; }
.app-page-head h1 { margin: 0; color: var(--text); font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -.035em; }
.app-page-head p { margin: 7px 0 0; color: var(--text-2); font-size: var(--fs-base); }
.library-totals { display: flex; gap: 28px; }
.library-totals div { display: flex; flex-direction: column; min-width: 60px; }
.library-totals b { color: var(--text); font-size: var(--fs-xl); line-height: 1.15; font-variant-numeric: tabular-nums; }
.library-totals span { color: var(--text-3); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; }
.library-toolbar { max-width: 1280px; margin: 0 auto 22px; padding: 10px; display: grid; grid-template-columns: minmax(260px, 1fr) 210px 210px; gap: 10px; background: rgba(255,255,255,.72); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.library-search { display: flex; align-items: center; gap: 9px; margin: 0; padding-left: 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text-3); }
.library-search input, .library-search input:hover, .library-search input:focus { border: 0; background: transparent; box-shadow: none; padding: 10px 12px 10px 0; }
.library-toolbar select { padding-top: 10px; padding-bottom: 10px; background-color: var(--surface); }
.library-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.library-card { display: flex; flex-direction: column; min-height: 250px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-out-quart), border-color .18s, box-shadow .18s; }
.library-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.library-card-main { display: flex; align-items: center; gap: 12px; }
.library-avatar { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--brand-ink); background: var(--brand-soft); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.library-identity { min-width: 0; flex: 1; }
.library-identity a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.library-identity a span { color: var(--text-3); font-size: var(--fs-xs); }
.library-identity p { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--fs-sm); }
.library-score { color: var(--brand-ink); font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.library-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 20px; color: var(--text-2); font-size: var(--fs-xs); }
.library-context { margin-top: 10px; color: var(--text-3); font-size: var(--fs-xs); }
.library-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto -20px -20px; padding: 14px 16px; border-top: 1px solid var(--border); background: rgba(246,249,255,.45); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.library-card-foot > div { display: flex; gap: 6px; }
/* Tightest buttons on the site. 11px of side padding left no room for either
   the seed dot or the arrow the hover reveal brings in, so the padding gains
   3px and the orb shrinks to match. */
.library-card-foot .btn { padding: 7px 14px; --btn-seed: 5px; --btn-seed-x: 4px; --btn-shift: 26px; }
.library-saved-status { color: var(--brand-ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.library-empty { grid-column: 1 / -1; padding: 80px 24px; text-align: center; color: var(--text-2); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: rgba(255,255,255,.62); }
.library-empty .ico { margin-bottom: 10px; color: var(--brand); font-size: var(--fs-3xl); }
.library-empty b { display: block; color: var(--text); font-size: var(--fs-md); }
.library-empty p { margin: 5px 0 18px; color: var(--text-3); }
.sources-page { max-width: none; }
.sources-page .app-page-head, .sources-grid { max-width: 1140px; }
.sources-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.source-card { padding: 22px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.source-card-head { display: flex; align-items: flex-start; gap: 13px; }
.source-mark { flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); color: var(--src-linkedin); background: var(--src-linkedin-soft); font-size: var(--fs-md); font-weight: var(--fw-heavy); }
.source-card.bayt .source-mark { color: var(--src-bayt); background: var(--src-bayt-soft); }
.source-card-head > div { min-width: 0; flex: 1; }
.source-card h2 { margin: 1px 0 2px; color: var(--text); font-size: var(--fs-lg); }
.source-card p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.source-ready { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--r-lg); color: var(--ok); background: var(--ok-soft); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.source-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.source-stats div { padding: 15px; border-radius: var(--r); background: var(--surface-2); }
.source-stats b { display: block; color: var(--text); font-size: var(--fs-xl); line-height: 1.1; }
.source-stats span { color: var(--text-3); font-size: var(--fs-xs); }
.source-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.source-card-actions .btn { padding-left: 12px; padding-right: 12px; }

@media (max-width: 1080px) {
  .nav, .app-page { margin-left: 68px; }
  .wrap { width: calc(100% - 68px); margin-left: 68px; margin-right: 0; transform: none; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Too narrow to give up 300px: the panel floats over the page instead. */
  body.history-open .nav, body.history-open .app-page { margin-left: 68px; }
  body.history-open .wrap { width: calc(100% - 68px); margin-left: 68px; }
  .history-panel { box-shadow: var(--shadow-lg); }
  .history-scrim {
    display: block; position: fixed; inset: 0; z-index: 53;
    background: rgba(6,38,91,.28); animation: scrim-in .2s ease both;
  }
}
@media (max-width: 720px) {
  .app-sidebar { inset: auto 0 0 0; width: auto; height: 66px; flex-direction: row; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -12px 28px -20px rgba(0,45,112,.45); }
  .sidebar-brand { display: none; }
  /* One row of equal slots: with the history toggle added, a 3-up grid needed
     two rows and the bar is only 66px tall. */
  .sidebar-group { width: 100%; margin: 0; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
  .sidebar-link { width: auto; min-height: 50px; margin: 0; flex-direction: column; gap: 2px; padding: 5px 3px; font-size: var(--fs-2xs); }
  .sidebar-link > span:not(.sidebar-count) { display: block; }
  .sidebar-link svg { width: 19px; height: 19px; }
  .sidebar-count { top: 1px; right: calc(50% - 23px); }
  .sidebar-link::after, .sidebar-brand::after { display: none; }
  .nav, .app-page { margin-left: 0; }
  .nav > .brand { visibility: visible; }
  .wrap { width: auto; margin-left: auto; margin-right: auto; transform: none; }
  /* The rail is a bottom bar here, so the panel covers the page above it. */
  .history-panel { inset: 0 0 66px 0; width: auto; border-right: 0; }
  .history-scrim { bottom: 66px; }
  body.history-open .nav, body.history-open .app-page { margin-left: 0; }
  body.history-open .wrap { width: auto; margin-left: auto; margin-right: auto; }
  .app-page { padding: 28px 14px 100px; }
  .app-page-head { align-items: flex-start; }
  .library-totals { gap: 14px; }
  .library-toolbar { grid-template-columns: 1fr 1fr; }
  .library-search { grid-column: 1 / -1; }
  .library-grid, .sources-grid { grid-template-columns: 1fr; }
  .source-card-actions { grid-template-columns: 1fr; }
  body { padding-bottom: 66px; }
}
@media (max-width: 480px) {
  .app-page-head { display: block; }
  .library-totals { margin-top: 18px; }
  .library-toolbar { grid-template-columns: 1fr; }
  .library-search { grid-column: auto; }
  .library-card-foot { align-items: flex-start; flex-direction: column; }
  .library-card-foot > div { width: 100%; }
  .library-card-foot .btn { flex: 1; }
}

/* --- Off-target (different location) result flag --------------------------- */
.xray-offtarget-badge {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 7px; padding: 3px 9px; border-radius: var(--r-pill); vertical-align: middle;
  color: var(--src-offtarget); background: var(--src-offtarget-soft);
  font: var(--fw-bold) var(--fs-2xs)/1.2 var(--font);
}
.xray-offtarget-badge.sm { margin-left: 0; }
.xray-card--offtarget { border-color: rgba(63, 97, 153, .5); background: rgba(63, 97, 153, .05); }
.xray-shortlist-btn.on {
  --btn-face: var(--brand-soft-2); --btn-ink: var(--brand-ink);
  --btn-flood: #bcd9f6; --btn-flood-ink: var(--brand-ink);
}

/* ============================================================================
   Responsive hardening + brand-consistency pass  (appended-last)
   ----------------------------------------------------------------------------
   Scoped fixes only; the Zenithr cobalt/navy/cyan cascade above is untouched.
     1. Kill horizontal overflow at every width.
     2. Keep the brand on one line and even out the mobile bottom-nav.
     3. Replace stray off-brand purples with the Zenithr palette.
   ========================================================================== */

/* --- 1. No horizontal overflow, ever ----------------------------------------
   The hero (.page-head) bleeds to the full viewport via `margin: 0 calc(50% -
   50vw)`, but the content column is shifted to clear the fixed sidebar, so the
   right-hand bleed lands a few px past the viewport at some widths (measured
   +112px at ≥1080, +38px at 768). `overflow-x: clip` removes the stray scroll
   without establishing a scroll container — the sticky nav and the symmetric,
   in-column hero bleed both keep working; only the invisible spillover is cut. */
html { overflow-x: clip; }
body { overflow-x: clip; }


/* --- 2a. Top bar: brand stays on one line, controls wrap gracefully --------- */
.brand, .brand-name { white-space: nowrap; }
.nav .brand { min-width: 0; }

/* --- 2b. Mobile bottom-nav: one evenly-distributed row + iPhone safe area ----
   Flatten the two label groups so every destination is a direct flex child of
   the bar and shares the width equally, instead of the groups splitting it. */
@media (max-width: 720px) {
  .app-sidebar {
    height: auto; min-height: 62px; gap: 4px;
    padding: 7px 8px max(7px, env(safe-area-inset-bottom));
  }
  .sidebar-group { display: contents; }
  .sidebar-group[hidden] { display: none; }
  .sidebar-link { flex: 1 1 0; min-width: 0; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* On the smallest phones, let the connection pill shrink to its dot so the
   brand + Sign out never get pushed into a wrap. */
@media (max-width: 380px) {
  .nav { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .nav-right { gap: 8px; }
  #connText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .conn { padding: 7px 9px; }
  /* The bottom nav already labels API keys at this width — keep just the icon. */
  .nav-apikeys { padding: 6px 9px; }
  .nav-apikeys span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* --- 3. Brand consistency: retire stray purples for the Zenithr palette ------
   The product palette is navy / cobalt / cyan; these three surfaces had drifted
   to purple. Re-tone them to on-brand hues while preserving their distinct
   signal (a cool steel-navy for the "different location" flag; Bayt's real
   green for its source mark to match its pills). */
.xray-offtarget-badge { color: var(--src-offtarget); background: var(--src-offtarget-soft); }
.xray-card--offtarget { border-left-color: rgba(63, 97, 153, .55); }
.source-card.bayt .source-mark { color: var(--src-bayt); background: var(--src-bayt-soft); }
.xray-pill.naukrigulf { background: var(--src-naukrigulf); }

/* --- Candidate results workspace -----------------------------------------
   The completed sourcing view becomes a recruiter workspace: live job brief
   at left, controls and a two-up candidate board at right. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.results-view { background: #f8fafc; }
body.results-view .wrap {
  width: calc(100% - 68px); max-width: none; margin: 0 0 0 68px;
  padding: 0 0 56px; transform: none;
}
/* This rule sits after the history-open push above, so at equal specificity it
   was winning when BOTH classes were on body — the results layout slid under
   the open history panel and buried the brief sidebar and back button. Only
   wide screens push; below 1080px the panel intentionally floats over. */
@media (min-width: 1081px) {
  body.results-view.history-open .wrap { width: calc(100% - 368px); margin-left: 368px; }
}
body.results-view .xray-results {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  /* The card's `overflow: hidden` exists to clip its rounded corners, which this
     view removes anyway — and while it stood it made the panel the scrollport,
     so nothing inside could stick to the page. Both the brief sidebar and the
     rows header depend on the page being the scroller. */
  overflow: visible;
}
body.results-view .xray-results:hover { transform: none; box-shadow: none; }
.xray-results-layout {
  display: grid; grid-template-columns: 292px minmax(0, 1fr); min-height: 720px;
}
.xray-results-main { min-width: 0; background: #f8fafc; }
.xray-brief-sidebar {
  position: relative; z-index: 2; padding: 24px 20px 40px;
  border-right: 1px solid var(--border); background: rgba(255,255,255,.82);
}
.xray-brief-card { position: sticky; top: 94px; }
.xray-brief-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.xray-brief-head h3 {
  margin: 5px 0 0; color: var(--text); font-size: var(--fs-lg); line-height: 1.25;
  letter-spacing: -.02em;
}
.xray-edit-brief {
  flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: var(--r); background: #fff; color: var(--text-2); cursor: pointer;
  font: var(--fw-semibold) var(--fs-xs)/1 var(--font); transition: color .15s, border-color .15s, background .15s;
}
.xray-edit-brief:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.xray-brief-card > p { margin: 8px 0 20px; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.5; }
.xray-brief-facts { display: grid; gap: 11px; }
.xray-brief-fact {
  display: grid; grid-template-columns: 18px 82px minmax(0, 1fr); align-items: start; gap: 7px;
  min-width: 0; color: var(--text-3); font-size: var(--fs-xs);
}
.xray-brief-fact > span { text-align: center; color: #87a0bb; }
.xray-brief-fact small { color: var(--text-3); font-size: var(--fs-xs); }
.xray-brief-fact b { min-width: 0; color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.xray-brief-weights { display: grid; gap: 9px; margin-top: 24px; }
.xray-brief-weights > .results-kicker { margin-bottom: 2px; }
.xray-brief-weight {
  display: grid; grid-template-columns: 76px minmax(48px, 1fr) 30px;
  align-items: center; gap: 8px; color: var(--text-3); font-size: var(--fs-2xs);
}
.xray-brief-weight > span { overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.xray-brief-weight > i { height: 5px; overflow: hidden; border-radius: var(--r-lg); background: #edf0f4; }
.xray-brief-weight > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0878d1, #38b6e6); }
.xray-brief-weight > small { font-size: var(--fs-2xs); text-align: right; }

.xray-results-main .xray-results-head {
  padding: 24px 28px 18px; border-bottom: 0; background: rgba(255,255,255,.9);
}
.xray-results-main .xray-results-heading { display: grid; gap: 2px; }
.xray-results-main .xray-results-heading h2 { font-size: var(--fs-2xl); letter-spacing: -.025em; }
.xray-results-main .xray-results-meta { max-width: 760px; line-height: 1.45; }
.xray-filter-bar {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 28px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.88);
}
.xray-filter-bar[hidden] { display: none; }
.xray-filter-control { margin: 0; }
.xray-filter-control select {
  width: auto; min-width: 154px; height: 38px; padding: 0 38px 0 13px;
  border: 0; border-radius: var(--r); background-color: #f1f3f5; color: var(--text);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.xray-sort-control { margin-left: auto; }
.xray-visible-count { min-width: 92px; color: var(--text-3); font-size: var(--fs-xs); text-align: right; }
.xray-results-main .xray-summary { padding: 14px 28px; background: #f8fafc; }
.xray-results-main .xray-results-body { overflow: visible; }
.xray-results-main .xray-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px 28px 32px; }
/* Inset the framed rows table to the card's content edge (like the board). The
   inset lives on the WRAPPER, not the table, so the container queries below
   measure exactly the width the columns have to fit into. */
.xray-results-main .xray-rows-wrap { margin: 6px 28px 28px; }

.xray-results-main .xray-card {
  gap: 13px; padding: 20px; border-radius: var(--r-lg); border-color: #e4e8ed;
  background: rgba(255,255,255,.96); box-shadow: 0 8px 26px -24px rgba(15,36,64,.52);
}
.xray-results-main .xray-card.entering {
  animation: row-in var(--dur-3) var(--ease-out-quint) both,
             candidate-card-glow .8s ease-out both;
  animation-delay: calc(var(--stagger, 0) * 55ms);
}
@keyframes candidate-card-glow {
  from { background: #edf5ff; }
  to { background: rgba(255,255,255,.96); }
}
/* Coming back from the detail drawer: the card or row you opened holds a ring
   that cools off, so the eye lands where it left the board. Outline is used on
   purpose — it draws outside the box and can't disturb the grid. Declared after
   .entering so a card that also carries an entrance animation still glows. */
.xray-results-main .xray-card.is-returning,
.xray-results-main .xray-row.is-returning {
  outline: 2px solid transparent; outline-offset: 3px;
  animation: card-return 900ms linear both;
}
/* Held at full while the drawer is still clearing the edge (~300ms), so the
   ring is at its brightest the moment the board is visible again. */
@keyframes card-return {
  0%, 35% { outline-color: var(--brand-bright); }
  100%    { outline-color: transparent; }
}
.xray-results-main .xray-card:hover {
  transform: translateY(-2px); border-color: #c7d7e8;
  box-shadow: 0 22px 44px -30px rgba(15,54,100,.46);
}
.xray-results-main .xray-avatar {
  flex-basis: 48px; width: 48px; height: 48px; color: #b17a20;
  background: #faf5ea; box-shadow: none; font-size: var(--fs-sm);
}
.xray-results-main .xray-name { color: #141b25; font-size: var(--fs-md); }
.xray-results-main .xray-card-role {
  margin-top: 1px; color: #7a8089; font-size: var(--fs-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xray-results-main .xray-meta-line { gap: 6px 9px; margin-top: 6px; font-size: var(--fs-2xs); }
.xray-meta-item { display: inline-flex; align-items: center; gap: 3px; color: #9299a2; }
.xray-meta-item.verified { color: #67717d; }
.xray-results-main .xray-card .xray-pill {
  padding: 3px 8px; border: 1px solid #e7e7e4; color: #656a70;
  background: #f3f3f0; font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
}
.xray-results-main .xray-score { flex-basis: 62px; width: 62px; height: 62px; --rc: #2b8fdc; }
.xray-results-main .xray-score.high { --rc: #0466c9; }
.xray-results-main .xray-score.mid { --rc: #2b8fdc; }
.xray-results-main .xray-score.low { --rc: #86b3dd; }
.xray-results-main .xray-score b { color: var(--brand-ink); font-size: var(--fs-md); }

.xray-ai-summary {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: start;
  padding: 11px 12px; border-radius: var(--r); background: linear-gradient(135deg, #f7fbff, #fbfcfe);
  border: 1px solid #edf2f7;
}
.xray-ai-mark {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-sm);
  color: #1277c4; background: #e7f3fc; font-size: var(--fs-2xs);
}
.xray-ai-summary > div > span {
  display: block; margin-bottom: 2px; color: #7d8da1; font-size: var(--fs-2xs); font-weight: var(--fw-heavy);
  letter-spacing: .09em; text-transform: uppercase;
}
.xray-ai-summary p { margin: 0; color: #59626d; font-size: var(--fs-xs); line-height: 1.55; }
.xray-skill-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.xray-skill-tag {
  padding: 4px 8px; border-radius: 6px; color: #a66f16; background: #fbf3df;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
}
.xray-results-main .xray-scoring > summary { color: #80858c; font-size: var(--fs-2xs); }
.xray-results-main .xray-scoring[open] { background: #fcfcfb; }
.xray-results-main .xray-scoring[open] .xray-scoring-body,
.xray-results-main .xray-more[open] .xray-more-body { animation: candidate-detail-in .22s ease-out both; }
.xray-results-main .xray-scoring[open] .xray-score-track i { animation: candidate-score-fill .55s var(--ease-out-quart) both; }
@keyframes candidate-detail-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes candidate-score-fill { from { width: 0; } }
.xray-results-main .xray-more summary { color: #7b8794; font-size: var(--fs-2xs); font-weight: var(--fw-medium); }
.xray-results-main .xray-card-actions { margin-top: auto; padding-top: 13px; }
.xray-card-action-group { display: flex; align-items: center; gap: 7px; }
/* Candidate cards run a neutral (non-cobalt) button palette; recolour through
   the button tokens so the reveal and the flood follow it too. */
.xray-results-main .xray-profile-btn {
  --btn-face: #f1f1ee; --btn-ink: #232a32;
  --btn-flood: #232a32; --btn-flood-ink: #fff;
  --btn-edge: transparent; --btn-edge-hover: #232a32;
}
.xray-results-main .xray-shortlist-btn {
  --btn-face: #161a1f; --btn-ink: #fff;
  --btn-flood: #3b4450; --btn-flood-ink: #fff;
  --btn-edge: #161a1f; --btn-edge-hover: #3b4450;
  box-shadow: none;
}
.xray-results-main .xray-shortlist-btn.on {
  --btn-face: #fbf2dc; --btn-ink: #7b5717;
  --btn-flood: #f0e0b8; --btn-flood-ink: #6a4a13;
  --btn-edge: #ead9af; --btn-edge-hover: #d9c48a;
}

@media (max-width: 1180px) {
  .xray-results-layout { grid-template-columns: 1fr; }
  .xray-brief-sidebar { padding: 18px 24px; border-right: 0; border-bottom: 1px solid var(--border); }
  .xray-brief-card { position: static; }
  .xray-brief-card > p, .xray-brief-weights { display: none; }
  .xray-brief-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px; margin-top: 14px; }
  .xray-brief-fact { grid-template-columns: 16px minmax(0, 1fr); gap: 1px 6px; }
  .xray-brief-fact small { grid-column: 2; }
  .xray-brief-fact b { grid-column: 2; }
}
@media (max-width: 900px) {
  .xray-results-main .xray-board { grid-template-columns: minmax(0, 1fr); }
  .xray-brief-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body.results-view .wrap { width: 100%; margin-left: 0; padding-bottom: 90px; }
  .xray-results-main .xray-results-head { padding: 20px 16px 14px; }
  .xray-results-actions { width: 100%; justify-content: flex-start; }
  .xray-filter-bar { padding: 10px 16px; overflow-x: auto; }
  .xray-filter-control select { min-width: 142px; }
  .xray-sort-control { margin-left: 0; }
  .xray-visible-count { display: none; }
  .xray-results-main .xray-summary { padding: 12px 16px; }
  .xray-results-main .xray-board { padding: 14px 12px 24px; }
  .xray-results-main .xray-rows-wrap { margin: 4px 16px 24px; }
}
@media (max-width: 520px) {
  .xray-brief-sidebar { padding: 16px; }
  .xray-brief-facts { grid-template-columns: 1fr 1fr; }
  .xray-results-main .xray-card { padding: 16px; }
  .xray-results-main .xray-card-top { gap: 10px; }
  .xray-results-main .xray-score { flex-basis: 54px; width: 54px; height: 54px; }
  .xray-results-main .xray-crit-grid { grid-template-columns: 1fr; }
  .xray-card-actions, .xray-card-action-group { align-items: stretch; flex-direction: column; }
  .xray-card-action-group, .xray-card-action-group .btn { width: 100%; }
  .xray-card-action-group .btn { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Candidate layout toggle + compact rows + detail panel
   ========================================================================== */

/* ---- Cards / Rows toggle ------------------------------------------------- */
.xray-view-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface-2);
}
.xray-view-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--text-2); cursor: pointer;
  font: var(--fw-semibold) var(--fs-xs)/1 var(--font); font-family: inherit;
  transition: background .18s var(--ease-out-quart), color .18s var(--ease-out-quart);
}
.xray-view-toggle button:hover { color: var(--text); }
.xray-view-toggle button.on {
  background: var(--surface); color: var(--brand-ink);
  box-shadow: 0 1px 3px rgba(0,45,112,.12);
}
.xray-view-toggle button:focus-visible {
  outline: 2px solid var(--brand-bright); outline-offset: 1px;
}

/* ---- Table row view ------------------------------------------------------ */
/* One framed white table: header + rows share the same grid template, so the
   columns can never drift. The criteria columns are dynamic — ResultsPanel sets
   --crit-cols to the number of weighted criteria it renders. */
.xray-rows-wrap { container-type: inline-size; }
.xray-rows {
  --row-cols:
    minmax(170px, 1.6fr)                             /* name + location   */
    46px                                             /* profile badge     */
    minmax(110px, 1.2fr)                             /* job title         */
    minmax(110px, 1.1fr)                             /* company           */
    92px                                             /* shortlist         */
    56px                                             /* match %           */
    repeat(var(--crit-cols, 0), minmax(52px, .5fr))  /* criteria marks    */
    20px;                                            /* chevron           */
  --row-column-gap: 11px;
  --row-padding-inline: 14px;
  display: flex; flex-direction: column;
  border: 1px solid #e4e8ed; border-radius: var(--r-lg); background: var(--surface);
  box-shadow: 0 8px 26px -24px rgba(15, 36, 64, .4);
  /* `clip`, not `auto`: it keeps the frame's rounded corners and the return-glow
     ring contained WITHOUT becoming a scroll container, which would capture the
     sticky header below and pin it to the table instead of the page. */
  overflow-x: clip;
}
.xray-rows-head, .xray-row {
  display: grid; grid-template-columns: var(--row-cols);
  align-items: center; column-gap: var(--row-column-gap);
  padding-inline: var(--row-padding-inline);
}
.xray-rows-head > *, .xray-row > * { min-width: 0; }
.xray-col-mid, .xray-col-crit { justify-self: center; text-align: center; }
/* The header follows you down a 20-row table, so a column of thumbs never loses
   its criterion. 76px is the sticky nav's height — any more and rows show through
   the gap between the two. */
.xray-rows-head {
  position: sticky; top: 76px; z-index: 3;
  padding-block: 10px; border-bottom: 1px solid var(--border);
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  font: var(--fw-bold) var(--fs-2xs)/1.25 var(--font); letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.xray-row {
  padding-block: 9px; background: var(--surface); cursor: pointer;
  transition: background .16s var(--ease-out-quart);
}
.xray-row + .xray-row { border-top: 1px solid #eef1f5; }
.xray-row:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.xray-row:hover { background: #f7fafd; }
.xray-row:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: -2px; }
.xray-row--offtarget::before {
  content: ""; position: absolute; inset-block: 4px; inset-inline-start: 0;
  width: 3px; border-radius: var(--r-pill); background: var(--src-offtarget);
}
/* The return-glow ring must draw INSIDE the framed table or overflow clips it. */
.xray-results-main .xray-row.is-returning { outline-offset: -3px; }

/* Identity cell: avatar + name over location. */
.xray-row-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xray-row .xray-avatar.sm { flex: 0 0 34px; width: 34px; height: 34px; font-size: var(--fs-2xs); }
.xray-row-idtext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xray-row-name, .xray-row-loc, .xray-row-title, .xray-row-company-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xray-row-name { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text); }
.xray-row-loc { font-size: var(--fs-2xs); color: var(--text-3); }
.xray-row-title { font-size: var(--fs-xs); color: var(--text-2); }

/* Profile badge: the brand-coloured square linking to the source profile. */
.xray-row-profiles { justify-self: center; display: flex; }
.xray-row-blank { color: var(--text-3); }
.xray-profile-badge {
  position: relative; z-index: 1; /* above the row-open click stretch */
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  color: #fff; background: #64748b; font: var(--fw-bold) 11px/1 var(--font);
  text-decoration: none;
  transition: transform .16s var(--ease-out-quart), box-shadow .16s var(--ease-out-quart);
}
.xray-profile-badge.linkedin { background: #0a66c2; }
.xray-profile-badge.bayt { background: #0e9f5d; }
.xray-profile-badge.gulftalent { background: #0b7285; }
.xray-profile-badge.naukrigulf { background: #52627f; }
.xray-profile-badge:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(15, 36, 64, .5); }
.xray-profile-badge:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 1px; }

.xray-row-company { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-xs); color: var(--text-2); }
.xray-company-dot {
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px;
  display: grid; place-items: center; font-style: normal;
  font: var(--fw-bold) 9px/1 var(--font); color: #5b6472;
  background: #edf1f5; border: 1px solid #e2e8ee;
}

/* Shortlist: a quiet pill that warms to the saved amber. */
.xray-row-save {
  justify-self: center; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-2);
  font: var(--fw-semibold) var(--fs-2xs)/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: color .16s var(--ease-out-quart), border-color .16s var(--ease-out-quart),
              background .16s var(--ease-out-quart);
}
.xray-row-save svg { width: 12px; height: 12px; }
.xray-row-save:hover { border-color: #d9c48a; background: #fdf8ec; color: #7b5717; }
.xray-row-save.on { border-color: #ead9af; background: #fbf2dc; color: #7b5717; }
.xray-row-save.on svg { fill: currentColor; }
.xray-row-save:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 1px; }

.xray-row-score {
  justify-self: center; font: var(--fw-bold) var(--fs-sm)/1 var(--font);
  font-variant-numeric: tabular-nums;
}
.xray-row-score.high { color: var(--ok); }
.xray-row-score.mid { color: var(--brand); }
.xray-row-score.low { color: var(--text-3); }

.xray-row-crit { justify-self: center; display: flex; }
.xray-row-chevron {
  justify-self: end; display: grid; place-items: center; width: 20px; height: 20px;
  color: var(--text-3); font-size: var(--fs-md); line-height: 1; transform: rotate(90deg);
}
.xray-row:hover .xray-row-chevron { color: var(--text-2); }

/* Criterion match marks — shared by the table cells and the card grid. */
.crit-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
}
.crit-mark svg { width: 13px; height: 13px; }
.crit-mark.match { color: #1a7f4b; background: #e4f5eb; }
.crit-mark.partial { color: #a16b0c; background: #faf0d6; }
.crit-mark.mismatch { color: #bb2d35; background: #fdeceb; }
.crit-mark.unknown { color: #8b949e; background: #f1f3f5; }

/* Column shedding is driven by the width the table ACTUALLY gets, not the
   viewport: opening the brief sidebar or the search-history drawer narrows this
   container by ~300px each while the window never moves. Least-scannable
   columns go first — company and job title both repeat in the detail panel. */
@container (max-width: 950px) {
  .xray-rows {
    --row-cols:
      minmax(170px, 1.6fr) 46px minmax(110px, 1.2fr) 92px 56px
      repeat(var(--crit-cols, 0), minmax(52px, .5fr)) 20px;
  }
  .xray-col-company, .xray-row-company { display: none; }
}
@container (max-width: 830px) {
  .xray-rows {
    --row-cols:
      minmax(170px, 1.6fr) 46px 92px 56px
      repeat(var(--crit-cols, 0), minmax(52px, .5fr)) 20px;
  }
  .xray-col-title, .xray-row-title { display: none; }
}
@container (max-width: 710px) {
  /* The marks are the point of this view, so the profile badge goes before them. */
  .xray-rows {
    --row-cols:
      minmax(150px, 1.4fr) 92px 56px
      repeat(var(--crit-cols, 0), minmax(50px, .5fr)) 20px;
  }
  .xray-col-profiles, .xray-row-profiles { display: none; }
}
@container (max-width: 620px) {
  /* Down to the essentials: who, saved, how strong, open. */
  .xray-rows { --row-cols: minmax(130px, 1fr) 92px 54px 20px; }
  .xray-col-crit, .xray-row-crit { display: none; }
}
@media (max-width: 520px) {
  /* Below the narrowest column set's min-content width, `clip` would hide the
     match score with no way to reach it — hand the axis back to the user. */
  .xray-rows { overflow-x: auto; }
  .xray-rows-head { position: static; }
}

/* ---- Candidate detail panel --------------------------------------------- */
/* The drawer owns both halves of its motion: it slides in from the right edge
   and slides back out to it. CandidateDetail keeps the panel mounted with
   `.closing` for exactly as long as the exit runs, so going back to the board
   is a reversal of the way in rather than a disappearance. */
.cdx-scrim {
  position: fixed; inset: 75px 0 0 68px; z-index: 60;
  background: rgba(3, 22, 47, .38); backdrop-filter: blur(3px);
  animation: scrim-in var(--dur-2) var(--ease-out-quart) both;
}
.cdx-scrim.closing {
  pointer-events: none;
  animation: scrim-in 200ms var(--ease-in) reverse both;
}
.cdx-panel {
  position: fixed; top: 75px; right: 0; z-index: 61;
  width: min(520px, 94vw);
  height: calc(100vh - 75px);
  height: calc(100dvh - 75px);
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -30px 0 60px -30px rgba(0, 45, 112, .4);
  display: flex; flex-direction: column;
}
.cdx-panel.open { animation: cdx-slide-in 380ms var(--ease-out-quint) both; }
.cdx-panel.closing {
  pointer-events: none;
  animation: cdx-slide-out 260ms var(--ease-in) both;
}

@keyframes cdx-slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes cdx-slide-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
.cdx-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
}
.cdx-head-id { flex: 1; min-width: 0; }
.cdx-name {
  display: block; font: var(--fw-bold) var(--fs-md)/1.3 var(--font); color: var(--text);
  text-decoration: none;
}
.cdx-name:hover { color: var(--brand); }
.cdx-role { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; }
.cdx-x {
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--fs-xl); line-height: 1; color: var(--text-3); padding: 0 4px;
}
.cdx-x:hover { color: var(--text); }
.cdx-x:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }

.cdx-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 22px 8px;
}
.cdx-scoreline {
  display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.cdx-score-parts { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); color: var(--text-2); }
.cdx-score-parts b { color: var(--text); font-variant-numeric: tabular-nums; }

.cdx-section { margin-bottom: 22px; }
.cdx-section h4 {
  margin: 0 0 10px; font: var(--fw-bold) var(--fs-xs)/1 var(--font);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.cdx-prose { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.cdx-snippet {
  padding: 10px 12px; border-left: 2px solid var(--border);
  background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.cdx-facts { margin: 0; display: grid; gap: 10px; }
.cdx-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: baseline; }
.cdx-facts dt { font-size: var(--fs-xs); color: var(--text-3); }
.cdx-facts dd {
  margin: 0; font-size: var(--fs-sm); color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.cdx-crits { display: grid; gap: 14px; }
.cdx-crit { display: grid; gap: 5px; }
.cdx-crit--inactive { opacity: .62; }
.cdx-crit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cdx-crit-name { font: var(--fw-semibold) var(--fs-sm)/1 var(--font); color: var(--text); }
.cdx-crit-status {
  padding: 2px 8px; border-radius: var(--r-pill);
  font: var(--fw-semibold) var(--fs-2xs)/1.6 var(--font); text-transform: capitalize;
  background: var(--surface-2); color: var(--text-3);
}
.cdx-crit-status--match { background: var(--ok-soft); color: var(--ok); }
.cdx-crit-status--mismatch { background: var(--err-soft); color: var(--err); }
.cdx-crit-status--partial { background: var(--brand-soft); color: var(--brand); }
.cdx-crit-track {
  height: 5px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-2);
}
.cdx-crit-track i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.cdx-crit-track i.low { background: var(--text-3); }
.cdx-crit-math {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: var(--fs-xs); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.cdx-crit-nocontrib { font-style: italic; color: var(--text-3); font-variant-numeric: normal; }
.cdx-crit-conf { color: var(--text-3); }
.cdx-crit-conf--high { color: var(--ok); }
.cdx-crit-evidence { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.cdx-crit-evidence.muted { color: var(--text-3); font-style: italic; }

.cdx-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-2);
}
.cdx-total b { font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }

.cdx-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 22px; border-top: 1px solid var(--border);
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .cdx-panel, .cdx-scrim { animation: none; }
  .xray-results-main .xray-card.is-returning,
  .xray-results-main .xray-row.is-returning { animation: none; outline-color: transparent; }
  .xray-row:hover { transform: none; }
  ::view-transition-old(*),
  ::view-transition-new(*),
  ::view-transition-group(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

@media (max-width: 720px) {
  /* The desktop rail becomes a 66px bottom navigation on small screens. */
  .cdx-scrim { inset: 75px 0 66px; }
  .cdx-panel {
    height: calc(100vh - 141px);
    height: calc(100dvh - 141px);
  }
}

/* ==========================================================================
   CodeBlock — developer code samples (tabs · copy · tokens · placeholders)
   Dark navy surface from the product's own dark family (login backdrop);
   syntax colours are lightness steps of locked hues, logged in DESIGN.md.
   ========================================================================== */
.codeblock {
  margin: 0; overflow: hidden;
  border: 1px solid rgba(3,22,47,.35); border-radius: var(--r-lg);
  background: #062b59; box-shadow: var(--shadow-sm);
}
.cb-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: #03162f;
}
.cb-tabs { display: flex; gap: 2px; }
.cb-tabs button {
  padding: 6px 12px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: rgba(255,255,255,.6); cursor: pointer;
  font: var(--fw-semibold) var(--fs-xs)/1 var(--font);
  transition: background var(--dur-2) var(--ease-out-quart), color var(--dur-2) var(--ease-out-quart);
}
.cb-tabs button:hover { color: rgba(255,255,255,.85); }
.cb-tabs button.on { background: rgba(255,255,255,.14); color: var(--text-inverse); }
.cb-tabs button:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 1px; box-shadow: none; }
.cb-copy {
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-sm);
  background: transparent; color: rgba(255,255,255,.85); cursor: pointer;
  font: var(--fw-semibold) var(--fs-xs)/1 var(--font); white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out-quart), color var(--dur-1) var(--ease-out-quart);
}
.cb-copy:hover { background: rgba(255,255,255,.12); color: var(--text-inverse); }
.cb-copy:active { transform: scale(.97); }
.cb-copy:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 1px; box-shadow: none; }
.cb-pre {
  margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-3);
  overflow-x: auto; tab-size: 2;
  font: 400 var(--fs-sm)/1.65 var(--mono);
  color: rgba(255,255,255,.92);
}
.cb-pre:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: -2px; }
.cb-line { display: block; padding: 0 var(--sp-2); border-radius: 4px; }
.cb-line.hl { background: rgba(18,185,232,.12); }
.cb-ln {
  display: inline-block; min-width: 2ch; margin-right: var(--sp-3);
  color: rgba(255,255,255,.32); text-align: right; user-select: none;
}
.tk-com { color: #86b3dd; font-style: italic; }
.tk-str { color: #e8c07d; }
.tk-kw  { color: var(--brand-bright); }
.tk-num { color: #7fe4ff; }
.tk-ph {
  padding: 0 4px; border-radius: 4px;
  color: #e8c07d; background: rgba(255,255,255,.09);
  border-bottom: 1px dashed rgba(232,192,125,.65);
}
.tk-key {
  padding: 0 4px; border-radius: 4px;
  color: #7fe4ff; background: rgba(18,185,232,.16);
}

/* First-call section on the API keys page */
.apikeys-docs { margin-top: var(--sp-8); }
.apikeys-docs-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3);
}
.apikeys-docs-head .section-label { margin: 0; }
.apikeys-docs-links { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.apikeys-docs-link { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.apikeys-docs > .hint { max-width: var(--measure); }
/* The global inline-`code` chip style must not leak into the block. */
.cb-pre code { background: none; padding: 0; border-radius: 0; color: inherit; font: inherit; }

/* ==========================================================================
   Developer guide
   ========================================================================== */
.developers-page {
  background:
    radial-gradient(circle at 82% 2%, rgba(18,185,232,.08), transparent 24rem),
    var(--bg);
}
.developer-head { align-items: center; }
.developer-head > div:first-child { max-width: 720px; }
.developer-head p { max-width: var(--measure); line-height: 1.65; }
.developer-head-actions, .developer-footer > div {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.developer-layout {
  display: grid; grid-template-columns: 210px minmax(0, 820px); gap: clamp(32px, 5vw, 72px);
  max-width: 1120px; margin: 0 auto;
}
.developer-toc { min-width: 0; }
.developer-toc nav {
  position: sticky; top: 96px; display: grid; gap: 2px;
  padding: var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(12px);
}
.developer-toc-label {
  margin-bottom: var(--sp-2); color: var(--text-3);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .1em; text-transform: uppercase;
}
.developer-toc a {
  display: block; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  text-decoration: none;
}
.developer-toc a:hover { color: var(--brand-ink); background: var(--brand-soft); }
.developer-toc a[aria-current="location"] {
  color: var(--brand-ink); background: var(--brand-soft); font-weight: var(--fw-bold);
}
.developer-toc a:focus-visible { outline: none; box-shadow: var(--ring); }
.developer-content { min-width: 0; }
.developer-content > section {
  padding: 0 0 var(--sp-10); margin-bottom: var(--sp-10);
  border-bottom: 1px solid var(--border); scroll-margin-top: 96px;
}
.developer-content h2, .developer-content h3 { text-wrap: balance; }
.developer-content h2 {
  margin: 0 0 var(--sp-3); color: var(--text);
  font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.025em;
  scroll-margin-top: 96px;
}
.developer-content h3 {
  margin: 0 0 var(--sp-2); color: var(--text);
  font-size: var(--fs-md); line-height: 1.35;
}
.developer-content p {
  max-width: var(--measure); margin: 0 0 var(--sp-4);
  color: var(--text-2); font-size: var(--fs-base); line-height: 1.7;
}
.developer-content section > .codeblock,
.developer-content section > .developer-example,
.developer-content section > .developer-table-wrap {
  margin-top: var(--sp-5);
}
.developer-content code {
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--brand-soft); color: var(--brand-ink);
  font-family: var(--mono); font-size: .9em;
  overflow-wrap: anywhere;
}
.developer-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3); margin: var(--sp-5) 0;
}
.developer-facts div {
  min-width: 0; padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.developer-facts dt {
  margin-bottom: 6px; color: var(--text-3);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.developer-facts dd {
  margin: 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.5;
}
.developer-callout {
  display: grid; gap: 5px; margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--brand-soft-2); border-left: 4px solid var(--brand);
  border-radius: var(--r); background: var(--brand-soft);
}
.developer-callout.neutral {
  border-color: var(--border); border-left-color: var(--text-3); background: var(--surface-2);
}
.developer-callout strong { color: var(--text); font-size: var(--fs-sm); }
.developer-callout span { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.developer-steps {
  display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: 0;
  list-style: none;
}
.developer-steps li {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.developer-steps li > span {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-pill); background: var(--brand); color: var(--text-inverse);
  font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.developer-steps p { margin: 0; font-size: var(--fs-sm); }
.developer-example {
  margin-right: 0; margin-left: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: #062b59; box-shadow: var(--shadow-sm);
}
.developer-example figcaption {
  padding: 10px var(--sp-4); background: #03162f;
  color: rgba(255,255,255,.72); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.developer-example pre {
  margin: 0; padding: var(--sp-4); overflow-x: auto;
  color: rgba(255,255,255,.92); font: 400 var(--fs-sm)/1.65 var(--mono);
}
.developer-example pre:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: -2px; }
.developer-example code { padding: 0; background: none; color: inherit; font: inherit; }
.developer-table-wrap {
  max-width: 100%; overflow-x: auto; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.developer-table-wrap:focus-visible { outline: none; box-shadow: var(--ring); }
.developer-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.developer-table th, .developer-table td {
  padding: 13px var(--sp-4); border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.developer-table th {
  background: var(--surface-2); color: var(--text-3);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase;
}
.developer-table td { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.5; }
.developer-table tr:last-child td { border-bottom: 0; }
.developer-table td code { white-space: nowrap; }
.developer-table.compact { min-width: 620px; }
.method {
  display: inline-flex; min-width: 58px; justify-content: center;
  padding: 4px 7px; border-radius: var(--r-sm);
  font: var(--fw-bold) var(--fs-2xs)/1 var(--mono);
}
.method.get { color: var(--brand-ink); background: var(--brand-soft); }
.method.post { color: var(--ok); background: var(--ok-soft); }
.method.patch { color: #77520a; background: #fff1c7; }
.method.delete { color: var(--danger); background: var(--danger-soft); }
.developer-operation-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-5);
}
.developer-operation-grid article {
  min-width: 0; padding: var(--sp-5); border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
}
.developer-operation-grid ul {
  display: grid; gap: 8px; margin: 0; padding-left: var(--sp-5);
  color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55;
}
.developer-footer {
  padding: var(--sp-6); border: 1px solid var(--brand-soft-2);
  border-radius: var(--r-lg); background: linear-gradient(135deg, var(--brand-soft), var(--surface));
}
.developer-footer h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.developer-footer p { margin-bottom: var(--sp-5); }

@media (max-width: 900px) {
  .developer-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .developer-toc nav {
    position: static; display: flex; gap: var(--sp-2); overflow-x: auto;
    padding: var(--sp-3); scrollbar-width: thin;
  }
  .developer-toc-label { display: none; }
  .developer-toc a { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 720px) {
  .developer-head { display: block; }
  .developer-head-actions { margin-top: var(--sp-5); }
  .developer-facts, .developer-operation-grid { grid-template-columns: 1fr; }
  .developer-content > section { padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); }
}
@media (max-width: 480px) {
  .developer-head-actions .btn, .developer-footer .btn { width: 100%; }
  .developer-steps li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--sp-3); }
  .developer-steps li > span { width: 32px; height: 32px; }
  .cb-head { align-items: flex-start; }
  .cb-tabs { overflow-x: auto; max-width: calc(100% - 64px); }
}

/* ==========================================================================
   Phase 4 motion — six approved seams, existing vocabulary only.
   All keyframes collapse under the global prefers-reduced-motion block.
   ========================================================================== */

/* 1. CodeBlock tab switch: the keyed <pre> remounts per language and plays a
   160ms rise-fade, so the swap reads as a state change instead of a jump. */
.cb-pre { animation: cb-swap 160ms var(--ease-out-quart) both; }
@keyframes cb-swap {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}

/* 2. Copy confirmation: label crossfade-pops (feedback, 120ms). */
.cb-copy-label { display: inline-block; animation: copy-pop var(--dur-1) var(--ease-out-quart) both; }
@keyframes copy-pop {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* The ghost copy buttons that flip to "✓ Copied" get the same pop. */
.btn.ghost.copied { animation: copy-pop var(--dur-1) var(--ease-out-quart); }

/* 3. API-key reveal-once: entrance + a warm highlight that cools (rare,
   delight-budget moment — the only ceremony in the flow). */
.apikey-reveal {
  animation: reveal-rise 300ms var(--ease-out-quint) both,
             apikey-glow 1.4s ease-out both;
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes apikey-glow {
  from { background-color: var(--brand-soft-2); }
  to   { background-color: var(--brand-soft); }
}

/* 4. Modal exit: 160ms fade/settle — exits faster than the 340ms entrance.
   `both` holds the final frame so the unmount at 160ms is invisible. */
.modal-bg.closing { animation: backdrop-out 160ms var(--ease-out-quart) both; }
.modal.closing    { animation: modal-out 160ms var(--ease-out-quart) both; }
@keyframes backdrop-out { to { opacity: 0; } }
@keyframes modal-out    { to { opacity: 0; transform: translateY(6px) scale(.985); } }

/* 5. Sources loading skeletons: shaped like the cards they become. */
.source-card.skel-card { min-height: 236px; border-radius: var(--r-lg); }
.source-card.skel-card i:first-child { width: 46%; height: var(--sp-5); }

/* 6. Live-run numeric progress inside the badge. */
.live-progress { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); color: var(--brand-ink); }

/* ==========================================================================
   Phase 5 — accessibility
   ========================================================================== */

/* Skip link: visually hidden until keyboard-focused. */
.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 200;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  background: var(--brand); color: var(--text-inverse); font-weight: var(--fw-semibold);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; color: var(--text-inverse); }

/* Visible label on the API-key create form. */
.apikeys-create { align-items: flex-end; }
.apikeys-create-field { flex: 1 1 auto; min-width: 0; }
.apikeys-create-field label { margin-bottom: 6px; }
.apikeys-create-field input { width: 100%; }

/* Error boundary recovery view. */
.app-error { max-width: 560px; margin: 18vh auto 0; padding: 0 var(--sp-6); text-align: center; }
.app-error h1 { font-size: var(--fs-xl); margin: 0 0 var(--sp-3); }
.app-error p { color: var(--text-2); margin: 0 0 var(--sp-3); }
.app-error-detail code { word-break: break-word; }
.app-error-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-5); }

/* Clickable stats are real buttons now; keep the stat look. */

/* Touch targets: on coarse pointers every small control reaches 44px. */
@media (pointer: coarse) {
  .btn.sm { min-height: 44px; }
  .modal-head .x, .chip-x, .cdx-x, .xray-row-save {
    min-width: 44px; min-height: 44px;
  }
  .assist-mic, .brief-send { width: 44px; height: 44px; }
  .cb-tabs button, .cb-copy { min-height: 40px; }
}

/* ConfirmModal body + actions (destructive confirms now use the real Modal). */
.confirm-body { padding: var(--sp-4) var(--sp-6); color: var(--text-2); font-size: var(--fs-base); }
.confirm-body p { margin: 0; max-width: var(--measure); }
.confirm-actions {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border);
}

/* ---- Accessibility: compact-row open action + dialog scroll-lock --------- */
/* The compact row's open action is a real <button> styled as the identity cell,
   with a stretched hit-area so a pointer click anywhere still opens the detail
   panel while keyboard users Tab straight to it — no clickable <div>, and the
   shortlist <button> stays a sibling above the stretch (never nested). */
.xray-row { position: relative; }
.xray-row-open {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  margin: 0; padding: 0; font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.xray-row-open::after { content: ""; position: absolute; inset: 0; }
.xray-row-open:focus-visible {
  outline: 2px solid var(--brand-bright); outline-offset: -2px;
}
.xray-row-save { position: relative; z-index: 1; }

/* Body scroll lock while the candidate detail dialog is open (see useDialog);
   the panel already contains its own overscroll (.cdx-body). */
body.cdx-scroll-lock { overflow: hidden; }
.cdx-panel { overscroll-behavior: contain; }