/* UUB88 Lead Desk — instrument layer.
   Loaded after app.css. Everything here is either depth, telemetry, or a
   mobile hardening rule. No decoration that does not encode something. */

:root{
  --glow-neon:0 0 0 1px rgba(177,75,255,.35), 0 0 22px -6px rgba(177,75,255,.55);
  --glow-cyan:0 0 0 1px rgba(79,216,255,.30), 0 0 20px -6px rgba(79,216,255,.5);
  --specular:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 42%);
  --topbar-h:52px;
}

/* ---------- mobile hardening ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-tap-highlight-color:rgba(177,75,255,.18);
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(177,75,255,.14), transparent 70%),
    radial-gradient(700px 400px at 105% 8%, rgba(79,216,255,.07), transparent 65%),
    var(--void);
  background-attachment:fixed;
}
/* iOS zooms any input under 16px on focus */
input,textarea{font-size:16px}
input[type=datetime-local]{font-size:16px}

/* ---------- one sticky shell: top bar + chips move together ---------- */
.topbar{
  position:sticky;top:0;
  background:linear-gradient(180deg,rgba(11,7,16,.96),rgba(11,7,16,.86));
  border-bottom:1px solid rgba(177,75,255,.14);
}
.topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(177,75,255,.6),rgba(79,216,255,.45),transparent);
  opacity:.75;
}
.chipbar{
  top:calc(var(--topbar-h) + env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(11,7,16,.97),rgba(11,7,16,.92));
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--edge-soft);
}
.brand .label{
  background:linear-gradient(90deg,var(--ink),var(--mute));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- chips as console tabs ---------- */
.chip{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-color:var(--edge-soft);
  transition:border-color .16s ease,color .16s ease;
}
.chip[aria-current="true"]{
  box-shadow:var(--glow-neon);
  background:linear-gradient(180deg,#C062FF,#7A2FBF);
}
.chip .n{
  min-width:18px;padding:1px 5px;border-radius:5px;
  background:rgba(255,255,255,.05);text-align:center;
}
.chip[aria-current="true"] .n{background:rgba(0,0,0,.22)}

/* ---------- telemetry strip ---------- */
.telemetry{
  display:flex;align-items:flex-end;gap:16px;
  padding:12px 14px 2px;
  max-width:880px;margin:0 auto;
}
.spark{flex:1;min-width:0;height:26px;opacity:.95}
.spark .b{fill:rgba(177,75,255,.42)}
.spark .b.live{fill:var(--cyan)}
.spark .b.nil{fill:rgba(255,255,255,.07)}
.tstat{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;text-align:right}
.tstat .k{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.tstat .v{font-size:15px;font-weight:600;line-height:1.1}
.tstat.is-warm .v{color:var(--warm)}
.tstat.is-hot .v{color:var(--hot);text-shadow:0 0 14px rgba(255,77,109,.45)}

/* ---------- search ---------- */
.searchbar input{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:border-color .16s ease,box-shadow .16s ease;
}
.searchbar input:focus{outline:none;border-color:rgba(79,216,255,.55);box-shadow:var(--glow-cyan)}

/* ---------- lead cards: notched instrument tiles ---------- */
.lead{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border-color:var(--edge-soft);
  clip-path:polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  animation:tilein .34s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 26ms);
}
.lead::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--specular);
}
@keyframes tilein{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* segmented reactor rail — ticks read as instrumentation, not a progress bar */
.rail{
  background:repeating-linear-gradient(180deg,var(--edge-soft) 0 6px, transparent 6px 11px);
}
.rail i{
  background:repeating-linear-gradient(180deg,currentColor 0 6px, transparent 6px 11px);
  color:var(--cyan);
  filter:drop-shadow(0 0 4px currentColor);
}
.tier-ok   .rail i{color:var(--cyan)}
.tier-warm .rail i{color:var(--warm)}
.tier-hot  .rail i{color:var(--hot)}
.tier-done .rail i{color:var(--go)}
.tier-cold .rail i{color:var(--faint);box-shadow:none}

/* a live status LED for anything overdue */
.tier-hot .wait .t::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--hot);margin-right:7px;vertical-align:middle;
  animation:blip 1.9s ease-in-out infinite;
}
@keyframes blip{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,77,109,.55)}
  70%{opacity:.75;box-shadow:0 0 0 6px rgba(255,77,109,0)}
}

.lead-name{font-weight:670;letter-spacing:-.015em}
.ref{opacity:.85}

/* stage picker: a lit readout, and a proper touch target */
.stagepick{
  min-height:32px;padding:0 26px 0 10px;
  background-color:rgba(255,255,255,.03);
  border-color:var(--edge);
  font-size:12px;font-weight:600;letter-spacing:.03em;
}
.stagerow .stagepick{min-height:var(--tap);font-size:14px;padding:0 34px 0 14px}
.stagepick.s-new{box-shadow:inset 0 0 14px -8px var(--cyan)}
.stagepick.s-converted,.stagepick.s-deposited{box-shadow:inset 0 0 14px -8px var(--go)}
.stagepick.s-no_answer,.stagepick.s-follow_up{box-shadow:inset 0 0 14px -8px var(--warm)}

/* action buttons */
.act{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  transition:border-color .15s ease,box-shadow .15s ease,transform .08s ease;
}
.act:active{transform:translateY(1px)}
.act.call:hover{box-shadow:var(--glow-cyan)}
.act.wa:hover{box-shadow:0 0 0 1px rgba(61,220,138,.3),0 0 18px -6px rgba(61,220,138,.55)}
.lead-acts{border-top-color:rgba(255,255,255,.05)}

/* ---------- detail ---------- */
.card{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  position:relative;
}
.card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.idhead{clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%)}
.idhead h1{
  background:linear-gradient(100deg,#FFFFFF,#D9C7FF 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.card h2,.stagerow .lbl,.fu-row .lbl{position:relative;padding-left:12px}
.card h2::before,.stagerow .lbl::before,.fu-row .lbl::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--neon);
  box-shadow:0 0 8px var(--neon);
}
.bigwait{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.bigwait.is-hot{box-shadow:inset 0 0 26px -14px var(--hot)}
.phoneline{background:linear-gradient(180deg,rgba(79,216,255,.06),rgba(79,216,255,.015));border-color:rgba(79,216,255,.2)}
.phoneline a{text-shadow:0 0 18px rgba(79,216,255,.45)}
.btn{box-shadow:0 6px 18px -10px rgba(177,75,255,.9)}
.btn:active{transform:translateY(1px)}

/* timeline as a lit trace */
.tl::before{background:linear-gradient(180deg,var(--neon),rgba(177,75,255,.15))}
.tl li::before{box-shadow:0 0 0 3px var(--panel),0 0 12px -1px var(--neon)}
.tl li.is-contact::before{box-shadow:0 0 0 3px var(--panel),0 0 12px -1px var(--cyan)}

.dock{
  background:linear-gradient(180deg,rgba(11,7,16,.86),rgba(11,7,16,.97));
  border-top-color:rgba(177,75,255,.18);
}
.dock::before{
  content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(177,75,255,.55),rgba(79,216,255,.4),transparent);
}
.toast{box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px rgba(177,75,255,.22)}

/* login */
.login{
  background:
    radial-gradient(720px 420px at 50% 18%, rgba(177,75,255,.20), transparent 68%),
    radial-gradient(520px 320px at 50% 100%, rgba(79,216,255,.10), transparent 70%),
    var(--void);
}
.login .mark{filter:drop-shadow(0 0 34px rgba(177,75,255,.5))}
.login .field{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  box-shadow:0 22px 60px -30px rgba(177,75,255,.7);
}
.login input:focus{outline:none;border-color:rgba(79,216,255,.55);box-shadow:var(--glow-cyan)}

/* ---------- narrow phones ---------- */
@media(max-width:359px){
  .telemetry{gap:10px}
  .tstat .v{font-size:13.5px}
  .lead-body{padding-right:11px}
  .act{padding:0 10px;font-size:13px}
  .brand .label{display:none}
}
@media(max-width:400px){
  .lead-acts .act{flex:1;min-width:0}
}

/* ---------- landscape phones: don't let sticky chrome eat the screen ---------- */
@media(max-height:460px) and (orientation:landscape){
  .topbar,.chipbar{position:static}
  .dock{position:static;background:none;border-top:1px solid var(--edge-soft)}
}

@media(prefers-reduced-motion:reduce){
  .lead{animation:none}
  .tier-hot .wait .t::before{animation:none}
}

/* the lift belongs to the primary action only */
.btn.ghost{box-shadow:none}
.btn.ghost:focus-visible{box-shadow:var(--glow-cyan)}

/* ---------- live counters ---------- */
.wait{gap:8px;align-items:baseline}
.wait .lbl{
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);flex:0 0 auto;
}
.wait .t{
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.wait .t.static{color:var(--mute)}
.tier-hot .wait .lbl{color:var(--hot);opacity:.8}
.tier-warm .wait .lbl{color:var(--warm);opacity:.8}
.tier-done .wait .lbl{color:var(--go);opacity:.8}

/* the LED belongs to the label, not the number — the number must not shift */
.tier-hot .wait .t::before{content:none}
.tier-hot .wait .lbl::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--hot);margin-right:7px;vertical-align:middle;
  animation:blip 1.9s ease-in-out infinite;
}
.bigwait .k{flex:0 0 auto}
.bigwait time.v{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.tier-hot .wait .lbl::before{animation:none}}

/* terminal states have no clock — don't dress prose as telemetry */
.wait .t.static{font-family:var(--font);font-size:12.5px;color:var(--mute);letter-spacing:0}

/* ---------- three lanes: the only navigation that matters ---------- */
.lanes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:12px 14px 4px;max-width:880px;margin:0 auto;
}
.lane{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:11px 12px;border-radius:12px;text-decoration:none;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge-soft);min-height:60px;justify-content:center;
}
.lane .n{font-family:var(--mono);font-size:21px;font-weight:600;line-height:1;color:var(--ink)}
.lane .l{font-size:11px;letter-spacing:.06em;color:var(--mute);line-height:1.2}
.lane[aria-current="true"]{
  border-color:transparent;
  background:linear-gradient(180deg,#C062FF,#7A2FBF);
  box-shadow:var(--glow-neon);
}
.lane[aria-current="true"] .n,.lane[aria-current="true"] .l{color:#fff}
.lane.urgent:not([aria-current="true"]) .n{color:var(--hot);text-shadow:0 0 14px rgba(255,77,109,.4)}
.lane.urgent:not([aria-current="true"]){border-color:rgba(255,77,109,.3)}

.subnav{
  display:flex;gap:14px;padding:2px 14px 0;max-width:880px;margin:0 auto;
  font-size:12px;
}
.subnav a{color:var(--faint);text-decoration:none;padding:6px 0}
.subnav a span{font-family:var(--mono)}
.subnav a.on{color:var(--cyan)}
.chipbar{display:none}

/* ---------- contacted or not: the one thing that must never be ambiguous ---------- */
.cstat{
  display:flex;align-items:center;gap:7px;margin-top:9px;
  font-size:13px;font-weight:600;letter-spacing:.01em;
}
.cstat.no{color:var(--hot)}
.cstat.yes{color:var(--go)}
.cstat .dotmark{
  width:9px;height:9px;border-radius:50%;background:transparent;
  border:2px solid var(--hot);flex:0 0 auto;
}
.cstat .tickmark{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  background:rgba(61,220,138,.15);border:1px solid rgba(61,220,138,.45);
  display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;
}
.is-fresh{border-left-color:transparent}
.is-fresh .lead-body{background:linear-gradient(90deg,rgba(255,77,109,.045),transparent 45%)}

/* ---------- one-tap decisions ---------- */
.lead-decide{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.4fr 1fr;gap:8px;margin-top:9px;
}
.decide{
  min-height:46px;border-radius:10px;cursor:pointer;
  font-size:14.5px;font-weight:650;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--edge);background:var(--panel-2);color:var(--ink);
  transition:transform .08s ease,box-shadow .15s ease;
}
.decide:active{transform:translateY(1px)}
.decide[disabled]{opacity:.5;pointer-events:none}
.decide.yes{
  background:linear-gradient(180deg,#3DDC8A,#1FA463);border-color:transparent;color:#04150C;
  box-shadow:0 6px 18px -10px rgba(61,220,138,.95);
}
.decide.yes .tickmark{width:auto;height:auto;background:none;border:0;font-size:15px}
.decide.won{
  background:linear-gradient(180deg,#C062FF,#7A2FBF);border-color:transparent;color:#fff;
  box-shadow:0 6px 18px -10px rgba(177,75,255,.95);
}
.decide.no{color:var(--mute)}
.decide.no:hover{color:var(--ink);border-color:var(--warm)}

.lead.leaving{
  opacity:0;transform:translateX(28px) scale(.98);
  transition:opacity .24s ease,transform .24s ease;
}
@media(prefers-reduced-motion:reduce){.lead.leaving{transition:none}}

.lead-acts{margin-top:10px;padding-top:10px}
.lead-acts .act{flex:1}

.toast .undo{
  margin-left:4px;background:none;border:0;cursor:pointer;
  color:var(--cyan);font:inherit;font-weight:600;text-decoration:underline;
  padding:4px 2px;min-height:32px;
}

@media(max-width:359px){
  .lane{padding:9px 9px;min-height:54px}
  .lane .n{font-size:18px}
  .lane .l{font-size:10px}
  .decide{font-size:13.5px}
}

/* ---------- one measure for every band, phone to desktop ---------- */
:root{--maxw:900px}
.bar-inner{
  display:flex;align-items:center;gap:12px;
  width:100%;max-width:var(--maxw);margin:0 auto;
}
.lanes,.subnav,.telemetry,.searchbar,.list,.empty{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.searchbar{width:100%}

/* the sparkline is a glance, not a chart — it should not stretch */
.spark{max-width:300px}
.telemetry{justify-content:flex-end}
.telemetry .spark{margin-right:auto}

/* ---------- desktop: two columns beats one narrow ribbon ---------- */
@media(min-width:1120px){
  :root{--maxw:1180px}
  .list{
    display:grid;grid-template-columns:1fr 1fr;
    align-items:start;gap:12px;
  }
  .lanes{grid-template-columns:repeat(3,minmax(0,220px));justify-content:start}
  .lane{min-height:66px}
  .lane .n{font-size:24px}
  .searchbar input{max-width:520px}
}
@media(min-width:1560px){
  :root{--maxw:1560px}
  .list{grid-template-columns:repeat(3,1fr)}
}