/* LeadHunter v3 — dispatch-board identity.
   Slate ink, warm paper text, amber signal. Barlow Condensed carries the
   voice; Plex Mono carries the data. */
:root{
  --ink:#10151d; --panel:#161d28; --panel2:#1c2533; --line:#263140;
  --text:#e9e5db; --muted:#8a93a3; --signal:#eda63d; --signal-dim:#a9772c;
  --ok:#53b97e; --bad:#e0655a; --r:10px;
  --disp:"Barlow Condensed",sans-serif; --body:"Barlow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--text);font:15px/1.55 var(--body)}
a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* layout */
.shell{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.rail{border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:2px}
.wordmark{font:600 26px/1 var(--disp);letter-spacing:.04em;color:var(--text);margin:2px 8px 18px}
.wordmark b{color:var(--signal);font-weight:600}
.rail a.nav{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:8px;color:var(--muted);font:500 15px var(--body)}
.rail a.nav:hover{background:var(--panel);color:var(--text);text-decoration:none}
.rail a.nav.on{background:var(--panel2);color:var(--text)}
.rail .spacer{flex:1}
.badge{font:600 12px var(--mono);background:var(--panel2);color:var(--muted);border-radius:20px;padding:1px 8px;min-width:14px;text-align:center}
.badge.hot{background:var(--signal);color:#181206}
main{padding:26px 32px 60px;max-width:1160px}
.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
h1{font:600 34px/1.05 var(--disp);letter-spacing:.02em;margin:0}
.eyebrow{font:600 12px var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
h2{font:600 21px var(--disp);letter-spacing:.03em;margin:26px 0 10px}

/* cards, tables, chips */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.grid{display:grid;gap:14px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font:600 11px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:hover td{background:var(--panel2)}
.mono{font-family:var(--mono);font-size:13px}
.muted{color:var(--muted)}
.chip{display:inline-block;font:600 12px var(--mono);border:1px solid var(--line);border-radius:6px;padding:2px 8px;color:var(--muted)}
.chip.stage-drafted,.chip.stage-approved{border-color:var(--signal-dim);color:var(--signal)}
.chip.stage-sent{color:var(--text)}
.chip.stage-replied,.chip.stage-converted{border-color:var(--ok);color:var(--ok)}
.chip.stage-skipped,.chip.stage-blocked,.chip.stage-unsubscribed,.chip.stage-bounced{color:var(--bad);border-color:#5a3230}
.score{font:600 17px var(--mono);color:var(--muted)}
.score.hot{color:var(--signal)}
.score.warm{color:var(--text)}

/* buttons + forms */
.btn{display:inline-block;font:600 14px var(--body);border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:8px;padding:8px 14px;cursor:pointer}
.btn:hover{border-color:var(--signal-dim);text-decoration:none}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#181206}
.btn.primary:hover{filter:brightness(1.07)}
.btn.quiet{background:transparent;color:var(--muted)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:13px}
input,select,textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:8px;color:var(--text);font:14px var(--body);padding:9px 11px}
textarea{font-family:var(--body);line-height:1.5;resize:vertical}
label{display:block;font:600 12px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.help{font-size:12.5px;color:var(--muted);margin-top:4px}
.flash{background:var(--panel2);border:1px solid var(--signal-dim);border-radius:8px;padding:10px 14px;margin-bottom:16px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.inline{display:inline}

/* dashboard tiles */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:block;color:var(--text)}
.tile:hover{border-color:var(--signal-dim);text-decoration:none}
.tile .n{font:600 44px/1 var(--disp);color:var(--signal)}
.tile .n.zero{color:var(--muted)}
.tile .t{font:600 13px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* funnel bar — structure that encodes the pipeline */
.funnel{display:flex;gap:3px;align-items:center;font:600 11px var(--mono);flex-wrap:wrap}
.funnel .seg{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:3px 7px;color:var(--muted);white-space:nowrap}
.funnel .seg.live{border-color:var(--signal-dim);color:var(--signal)}
.funnel .arrow{color:var(--line)}

/* review ticket — the signature element */
.ticket{display:grid;grid-template-columns:190px 1fr;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.ticket .stub{border-right:1px dashed var(--line);padding:14px;background:linear-gradient(180deg,var(--panel),var(--panel2))}
.ticket .stub .co{font:600 19px/1.15 var(--disp)}
.ticket .stub .where{font:12.5px var(--body);color:var(--muted);margin:2px 0 10px}
.ticket .stamp{display:inline-block;font:700 15px var(--mono);border:2px solid var(--signal);color:var(--signal);border-radius:6px;padding:2px 8px;transform:rotate(-2deg);margin-bottom:10px}
.ticket .ev{font:12.5px/1.5 var(--body);color:var(--muted)}
.ticket .ev b{color:var(--text);font-weight:600}
.ticket .ev .pain{color:var(--signal)}
.ticket .work{padding:14px 16px}
.ticket .work input,.ticket .work textarea{margin-bottom:8px}
.ticket .why{font:12.5px var(--body);color:var(--muted);border-left:2px solid var(--signal-dim);padding-left:10px;margin:0 0 10px}

/* activity wire */
.wire{background:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;font:12.5px/1.7 var(--mono);max-height:520px;overflow:auto}
.wire .ts{color:var(--signal-dim)}
.wire .lv-ok{color:var(--ok)}
.wire .lv-warn{color:var(--signal)}
.wire .lv-error{color:var(--bad)}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* login */
.gate{min-height:100vh;display:grid;place-items:center}
.gate .card{width:min(400px,92vw);padding:30px}
.gate .wordmark{margin:0 0 4px;font-size:34px}
.gate .sub{color:var(--muted);margin:0 0 20px;font-size:13.5px}

kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--muted)}

@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}
  .rail .spacer{display:none}
  main{padding:18px 16px 60px}
  .grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}
  .ticket{grid-template-columns:1fr}
  .ticket .stub{border-right:0;border-bottom:1px dashed var(--line)}
}