/* ==========================================================================
   app.css — single shared design system for Rian Lead Finder
   Used by every page. Page-specific tweaks are scoped with a body class
   (body.dash = finder dashboard, body.saved = saved-leads list) so the two
   layouts can share one stylesheet without stepping on each other.
   ========================================================================== */

/*
 * ONE SET OF NAMES, TWO SETS OF VALUES. Every accent below exists in both themes under
 * the same name, so a shared component says `var(--good)` and is correct on either
 * background. The badges, pills and chips further down used to carry dark hexes inline,
 * which is why they stayed dark when a page went light: a rule that names a colour can
 * only ever be right in one theme.
 *
 * Each accent carries three: the text, the wash behind it, and its edge. A badge needs
 * all three, and deriving one from the others by eye is how contrast quietly fails.
 */
:root{
  --brand:#7c6bff; --brand-2:#9d7bff; --brand-dark:#5b45d6;
  --bg:#0b0d14; --card:#161a28; --card2:#1b2032; --line:#2a2f44;
  --ink:#eceefb; --muted:#9aa0bd; --ok:#34d399;
  --soft:#0f1118;                 /* an inset surface: a quote, a transcript */

  --good:#7ee0a8;   --good-bg:#15291f; --good-line:#2f6b4a;
  --info:#9fc6ff;   --info-bg:#1d2540; --info-line:#2a3566;
  --warn:#f0c674;   --warn-bg:#3a2f12; --warn-line:#4a3f1a;
  --bad:#f0a0a0;    --bad-bg:#33191c;  --bad-line:#5a2a2a;
  --idea:#c9bcff;   --idea-bg:#221c44; --idea-line:#3a2a5a;
  --teal:#67e8c3;   --teal-bg:#10303a; --teal-line:#1d5a4a;
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--ink);font-size:14px;line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(900px 520px at 82% -12%, rgba(124,107,255,.16), transparent 60%),
             radial-gradient(720px 500px at -8% -5%, rgba(70,120,255,.09), transparent 55%),
             var(--bg);
  background-attachment:fixed;
}
body.saved{font-size:15px}

.wrap{max-width:920px;margin:0 auto;padding:26px 18px 90px}
.wrap.wide{max-width:1100px}

/* centered auth/login layout */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.authcard{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:34px 30px;width:100%;max-width:380px;box-shadow:0 14px 40px -22px rgba(16,24,60,.45)}
.authcard .logo{font-size:30px;text-align:center}
.authcard h1{font-size:19px;text-align:center;margin:10px 0 4px}
.authcard .sub{color:var(--muted);font-size:13px;text-align:center;margin-bottom:22px}
.authcard .err{background:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:14px}

/* ── header ───────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;flex-wrap:wrap}
h1,.top h1{font-size:22px;margin:0;font-weight:700;letter-spacing:-.3px}
h1 .p,.top h1 .p{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.meter{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--muted)}
.meter b{color:var(--ink)}
a{color:var(--idea);text-decoration:none} a:hover{text-decoration:underline}

/* ── cards & forms ────────────────────────────────────────────────────── */
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 14px 34px -18px rgba(0,0,0,.7)}
.card h2{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:0 0 14px;font-weight:600}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;font-weight:500}
input,textarea,select{width:100%;background:rgba(8,10,18,.65);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:11px 13px;font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s,background .15s}
select{cursor:pointer}
input:hover,textarea:hover,select:hover{border-color:var(--brand-2)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(124,107,255,.18);background:rgba(8,10,18,.92)}
textarea{min-height:58px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}.row>div{flex:1;min-width:150px}

/* compact inputs in the saved-leads filter bar */
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.bar select,.bar input{width:auto;padding:9px 12px;font-size:13px}

/* ── buttons ──────────────────────────────────────────────────────────── */
button{background:linear-gradient(180deg,var(--brand),var(--brand-dark));color:#fff;border:none;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s,box-shadow .15s,filter .15s;box-shadow:0 8px 20px -10px rgba(124,107,255,.75)}
button:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(124,107,255,.85)}
button:active{transform:translateY(0)}
button:disabled{opacity:.5;cursor:not-allowed;filter:none;transform:none;box-shadow:none}
.ghost{background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--ink);font-weight:500;padding:8px 14px;font-size:12.5px;border-radius:9px;box-shadow:none}
.ghost:hover{background:rgba(124,107,255,.13);border-color:var(--brand);filter:none;transform:none;box-shadow:none}
.iconbtn{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:4px 10px;font-size:14px;cursor:pointer;line-height:1;box-shadow:none;transition:background .15s,border-color .15s}
.iconbtn:hover{background:rgba(124,107,255,.14);border-color:var(--brand);filter:none;transform:none;box-shadow:none} .iconbtn:disabled{opacity:.5}
.iconbtn.rec{background:var(--bad-bg);border-color:var(--bad-line);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,70,100,.5)}50%{box-shadow:0 0 0 5px rgba(200,70,100,0)}}

.hidden{display:none}
.spin{color:var(--muted);font-size:13px;margin-left:8px}
.srcbadge{display:inline-block;background:var(--soft);border:1px solid var(--brand);color:var(--idea);border-radius:8px;padding:4px 10px;font-size:12px}
.srcchip{padding:6px 12px;font-size:12.5px}
.srcchip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.srcchip.on:hover{background:var(--brand);filter:brightness(1.05)}

/* ── lead cards ───────────────────────────────────────────────────────── */
.lead{border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.015);transition:border-color .15s,transform .15s,box-shadow .15s;animation:rise .28s ease both}
.lead:hover{border-color:var(--brand);box-shadow:0 12px 30px -20px rgba(16,24,60,.45)}
body.dash .lead{padding:14px 16px;margin-top:11px}
body.dash .lead:hover{transform:translateY(-1px)}
body.saved .lead{margin-bottom:11px;overflow:hidden}
body.saved .lead.acted{border-left:3px solid var(--brand)}
.lead.rejected{opacity:.62} .lead.rejected:hover{opacity:1}
.lead .co,.co{font-weight:600;font-size:15px;letter-spacing:-.2px}
.lead .meta,.meta{color:var(--muted);font-size:12px;margin-top:3px}
.lead .meta a{color:var(--idea)}
.lead .act{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.lead .badges{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 2px}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;white-space:nowrap}
.badge.score{background:var(--teal-bg);color:var(--teal)} .badge.warn{background:var(--warn-bg);color:var(--warn)}

/* saved-leads collapsible row */
.head{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer}
.head:hover{background:rgba(124,107,255,.05)}
.grow{flex:1;min-width:0}
.pill{font-size:11px;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pill.src,.src{background:var(--idea-bg);color:var(--idea)} .pill.score,.score{background:var(--teal-bg);color:var(--teal)}
.pill.rej{background:var(--warn-bg);color:var(--warn)}
.pill.cost,.badge.cost{background:var(--soft);color:var(--info)}
.costline{font-size:12px;color:var(--muted);margin-top:6px}
.costline b{color:var(--info)}
.gen{display:flex;gap:5px} .dot{font-size:11px;padding:3px 7px;border-radius:6px;background:var(--soft);color:var(--muted)}
.dot.on{background:var(--good-bg);color:var(--good)}
.acts{display:inline-flex;gap:3px} .actchip{font-size:12px;padding:2px 7px;border-radius:6px;background:var(--good-bg);color:var(--good);border:1px solid var(--good-line)}
.empty{text-align:center;color:var(--muted);padding:50px 0}

/* ── generated content boxes ──────────────────────────────────────────── */
.box{position:relative;margin-top:10px;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:11px 64px 11px 13px;font-size:13px;white-space:pre-wrap}
.copy{position:absolute;top:8px;right:8px;background:var(--brand);border:none;color:#fff;border-radius:6px;padding:4px 9px;font-size:11px;cursor:pointer;box-shadow:none}
.assetcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px}
.assetcard .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);font-size:13px}
.assetcard iframe{width:100%;height:340px;border:0;background:#fff;display:block}
.note{color:var(--muted);font-size:13px;margin-top:10px}

/* ── deep-research sources ────────────────────────────────────────────── */
.sources{margin-top:10px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.sources summary{cursor:pointer;padding:9px 12px;font-size:12.5px;color:var(--muted);user-select:none}
.sources summary:hover{color:var(--ink)}
.srcbody{padding:2px 12px 12px;font-size:12.5px}
.srch{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;margin:11px 0 5px}
.srcp{color:var(--ink);white-space:pre-wrap;line-height:1.5}
.srcrev{color:var(--ink);border-left:2px solid var(--line);padding:3px 0 3px 10px;margin:6px 0;line-height:1.5}

/* ── slide-over detail panel ──────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(5,6,12,.55);backdrop-filter:blur(2px);z-index:40}
.overlay:not(.hidden){animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.panel{position:fixed;top:0;right:0;height:100vh;width:min(580px,96vw);background:linear-gradient(180deg,var(--card2),var(--card));
  border-left:1px solid var(--line);z-index:50;display:flex;flex-direction:column;box-shadow:-24px 0 60px -24px rgba(0,0,0,.8)}
.panel:not(.hidden){animation:slideIn .24s cubic-bezier(.2,.7,.3,1)}
@keyframes slideIn{from{transform:translateX(36px);opacity:.3}to{transform:translateX(0);opacity:1}}
.panel.hidden,.overlay.hidden{display:none}
.phead{display:flex;align-items:flex-start;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.phead .x{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:2px 6px}
.phead .x:hover{color:var(--ink)}
.ptabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ptab{background:none;border:none;color:var(--muted);padding:11px 10px;font-size:13px;cursor:pointer;border-bottom:2px solid transparent}
.ptab.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600}
.pbody{flex:1;overflow:auto;padding:16px 18px}
.ptabc{display:none} .ptabc.on{display:block}
.genwrap{text-align:center;padding:30px 10px;color:var(--muted)}
.genwrap button{margin-top:10px}
.dsec{margin-bottom:14px}
.dsec h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.dsec p{margin:0;white-space:pre-wrap;line-height:1.6;font-size:14px;color:var(--ink)}
.dsec.hot{border-left:2px solid var(--brand);background:var(--idea-bg);padding:9px 12px}
.dsec.hot h4{color:var(--idea)}

/* ── outreach status bar ──────────────────────────────────────────────── */
.statusbar{padding:12px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.strow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.strow:last-child{margin-bottom:0}
.chip{background:var(--soft);border:1px solid var(--line);color:var(--muted);border-radius:20px;padding:5px 12px;font-size:12px;cursor:pointer}
.chip.on{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:none;border:none;border-right:1px solid var(--line);color:var(--muted);padding:5px 11px;font-size:12px;cursor:pointer;box-shadow:none;border-radius:0}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--brand);color:#fff}
.seglabel{font-size:12px;color:var(--muted)}
.stsaved{font-size:12px;color:var(--good);opacity:0;transition:opacity .2s;margin-left:auto}
.stsaved.show{opacity:1}
#stNotes{width:100%;background:var(--soft);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 9px;font-size:13px;resize:vertical;font-family:inherit}
.stagebadge{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--soft);color:var(--muted)}
.stagebadge.contacted{background:var(--info-bg);color:var(--info)} .stagebadge.replied{background:var(--good-bg);color:var(--good)}
.stagebadge.meeting{background:var(--idea-bg);color:var(--idea)} .stagebadge.won{background:var(--good-bg);color:var(--good)} .stagebadge.lost{background:var(--bad-bg);color:var(--bad)}

/* ══ light theme ═══════════════════════════════════════════════════════════
 *
 * SCOPED TO body.lite, NOT :root. The finder, the CTO screens and the job boards
 * were built dark and carry their own dark hexes inline; flipping the root
 * variables would leave those pages half-converted, which is worse than either
 * theme done properly. The six screens built this week opt in.
 *
 * SEMANTIC NAMES, NOT COLOUR NAMES. `--good` rather than `--green`, because the
 * next theme change should be one file and not a search for every place somebody
 * wrote a green that meant "this worked". Each accent carries three tokens: the
 * text, the wash behind it, and its edge, because a badge needs all three and
 * guessing one from the others is how contrast quietly fails.
 *
 * Every pair below was checked against its own background in the browser, not
 * picked by eye. The quietest text on this page is 5.9:1 against AA's 4.5.
 */
body.lite{
  --bg:#f6f7fb; --card:#ffffff; --card2:#ffffff; --line:#e4e7f0;
  --ink:#14161f; --muted:#5b6076;
  --brand:#5b45d6; --brand-2:#7c6bff; --brand-dark:#4a37b8;
  --soft:#f1f3f9;                 /* an inset surface: a quote, a transcript */

  --good:#0f7a52;   --good-bg:#e6f7f0; --good-line:#b5e5d2;
  --info:#2451c7;   --info-bg:#e9effc; --info-line:#c4d5f8;
  --warn:#8a5a00;   --warn-bg:#fdf4e3; --warn-line:#f0dcb2;
  --bad:#b42318;    --bad-bg:#fdecea;  --bad-line:#f6cecb;
  --idea:#5b35c9;   --idea-bg:#f0ebff; --idea-line:#dcd2fb;
  --teal:#0e7490;   --teal-bg:#e4f6fa; --teal-line:#b4e4ef;
  --ok:var(--good);               /* older name, still read by admin_finder */

  background:
    radial-gradient(900px 520px at 82% -12%, rgba(124,107,255,.10), transparent 60%),
    radial-gradient(720px 500px at -8% -5%, rgba(20,140,255,.07), transparent 55%),
    var(--bg);
  color:var(--ink);
}
body.lite a{color:var(--brand)}
body.lite .card{
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,24,60,.04), 0 10px 28px -20px rgba(16,24,60,.28);
}
body.lite input,body.lite textarea,body.lite select{
  background:#fff; border-color:var(--line); color:var(--ink);
}
body.lite input::placeholder,body.lite textarea::placeholder{color:#9096ab}
body.lite input:hover,body.lite textarea:hover,body.lite select:hover{border-color:#cdd3e4}
body.lite input:focus,body.lite textarea:focus,body.lite select:focus{
  background:#fff; border-color:var(--brand); box-shadow:0 0 0 3px rgba(91,69,214,.14);
}
body.lite button{box-shadow:0 6px 16px -8px rgba(91,69,214,.6)}
body.lite .ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
body.lite .ghost:hover{background:var(--idea-bg);border-color:var(--brand)}
body.lite .meter{background:#fff;border:1px solid var(--line)}
body.lite .lead{background:var(--card);
  box-shadow:0 1px 2px rgba(16,24,60,.04), 0 10px 28px -20px rgba(16,24,60,.28)}
body.lite .lead:hover{border-color:var(--brand)}
body.lite .iconbtn{background:#fff}
body.lite .iconbtn:hover{background:var(--idea-bg)}
body.lite .box,body.lite .sources,body.lite #stNotes,body.lite .statusbar{background:var(--soft)}
body.lite .chip{background:#fff}

/* ══ motion ════════════════════════════════════════════════════════════════
 *
 * Motion here is for orientation, not decoration: it says where a thing came
 * from and that something is happening. Everything is short, because an
 * interface you use forty times a day should never make you wait for a flourish.
 *
 * ALL OF IT STOPS when the machine asks it to. prefers-reduced-motion is not a
 * nice-to-have on a screen somebody stares at all day.
 */
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes shimmer{100%{background-position:200% 0}}

.rise{animation:rise .34s cubic-bezier(.22,.7,.3,1) both}
.fade{animation:fade .3s ease both}
/* A list should arrive as a list, not as one block. The delay is capped so a
   hundred rows do not turn into a three-second wait to read the tenth. */
.stagger>*{animation:rise .32s cubic-bezier(.22,.7,.3,1) both}
.stagger>*:nth-child(1){animation-delay:.02s}
.stagger>*:nth-child(2){animation-delay:.05s}
.stagger>*:nth-child(3){animation-delay:.08s}
.stagger>*:nth-child(4){animation-delay:.11s}
.stagger>*:nth-child(5){animation-delay:.14s}
.stagger>*:nth-child(6){animation-delay:.17s}
.stagger>*:nth-child(7){animation-delay:.2s}
.stagger>*:nth-child(n+8){animation-delay:.22s}

/* Something is loading and we do not know how long. A shimmer says "working"
   without claiming a percentage. */
.skel{border-radius:10px;background:linear-gradient(90deg,var(--soft) 25%,#e9ecf5 37%,var(--soft) 63%);
      background-size:200% 100%;animation:shimmer 1.3s linear infinite}

/* Anything you can press should answer instantly, before the network does. */
.lift{transition:transform .14s cubic-bezier(.22,.7,.3,1),box-shadow .14s,border-color .14s}
.lift:hover{transform:translateY(-2px)}
.lift:active{transform:translateY(0)}

/* A bar chart drawn all at once is a picture. One that grows out of its own baseline
   says which direction the number runs before anybody reads the axis. transform-box
   is what makes transform-origin mean the shape rather than the whole canvas. */
@keyframes growUp{from{transform:scaleY(0)}to{transform:none}}
@keyframes growRight{from{transform:scaleX(0)}to{transform:none}}
body.lite svg rect{transform-box:fill-box;transform-origin:bottom;
  animation:growUp .46s cubic-bezier(.22,.7,.3,1) both}
body.lite svg rect:nth-of-type(2n){animation-delay:.04s}
body.lite svg rect:nth-of-type(3n){animation-delay:.07s}
body.lite svg text,body.lite svg path,body.lite svg circle{animation:fade .5s .18s ease both}

/* The funnel reads left to right, so it arrives that way. The inline width stays the
   width; only the scale is animated, so nothing has to be measured in script. */
body.lite .fn .tr i,body.lite .who .track i{transform-origin:left center;
  animation:growRight .52s cubic-bezier(.22,.7,.3,1) both}

@media (prefers-reduced-motion: reduce){
  .rise,.fade,.stagger>*{animation:none !important}
  .skel{animation:none}
  .lift{transition:none}
  body.lite svg rect,body.lite svg text,body.lite svg path,body.lite svg circle,
  body.lite .fn .tr i,body.lite .who .track i{animation:none !important}
  *{scroll-behavior:auto !important}
}