/* ================================================================
   ACQCOR UI — the one design system. Canon = Flow's liquid-glass +
   amber identity. Every page loads this BEFORE its own styles; page
   styles handle layout only and consume these tokens for all color,
   type, radius, and motion. Change the brand here, it changes
   everywhere.
   Pages: flow · pool · surplus · pipeline · desk · map · intake
   ================================================================ */

:root{
  /* Surfaces */
  --base:#080810; --base-2:#0c0c14;
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.07); --glass-3:rgba(255,255,255,.10);
  --bd:1px solid rgba(255,255,255,.10);
  --spec:inset 0 1px 0 rgba(255,255,255,.10);
  /* Liquid-glass chrome (floating bars, sheets) */
  --lg-chrome:rgba(8,8,14,.72); --lg-sheet:rgba(10,10,18,.84); --lg-float:rgba(14,14,22,.80);
  --lg-blur-m:blur(20px) saturate(180%); --lg-blur-l:blur(40px) saturate(200%);
  --lg-spec:inset 0 1px 0 rgba(255,255,255,.13);
  /* Brand */
  --amber:#f59e0b; --amber-2:#fbbf24; --amber-glow:rgba(245,158,11,.22); --amber-glass:rgba(245,158,11,.12);
  /* Text */
  --t1:rgba(255,255,255,.95); --t2:rgba(255,255,255,.56); --t3:rgba(255,255,255,.34);
  /* Play colors */
  --probate:#a78bfa; --wholesale:#fbbf24; --redemption:#38bdf8; --surplus:#34d399;
  --short:#fb7185; --tax:#fb923c; --hoa:#f472b6; --neutral:#64748b;
  /* Semantic */
  --red:#f87171; --red-glow:rgba(248,113,113,.18); --warn:#fbbf24; --ok:#34d399;
  /* Shape + motion */
  --r-s:9px; --r-m:13px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Type */
  --font:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

/* ---- base ---- */
.acq *{box-sizing:border-box;}
body.acq{
  margin:0;min-height:100vh;color:var(--t1);font-family:var(--font);font-size:14px;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(245,158,11,.09), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(52,211,153,.07), transparent 55%),
    radial-gradient(700px 500px at 50% 120%, rgba(245,158,11,.04), transparent 50%),
    var(--base);
}
.acq ::-webkit-scrollbar{width:9px;height:9px;}
.acq ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:8px;}
.acq button{font-family:inherit;cursor:pointer;color:inherit;}
.acq .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* ---- shared top bar ---- */
.acq-topbar{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:max(10px,env(safe-area-inset-top)) clamp(14px,3vw,28px) 10px;
  -webkit-backdrop-filter:var(--lg-blur-m);backdrop-filter:var(--lg-blur-m);
  background:linear-gradient(180deg,rgba(8,8,16,.92),rgba(8,8,16,.66));
  border-bottom:var(--bd);box-shadow:var(--lg-spec);
}
.acq-brand{display:flex;align-items:baseline;gap:9px;min-width:0;text-decoration:none;color:inherit;}
.acq-brand b{font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--t1);}
.acq-brand b span{color:var(--amber);}
.acq-brand .page{color:var(--amber);font-weight:800;letter-spacing:.22em;font-size:14px;text-transform:uppercase;}
.tagpill{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-2);background:var(--amber-glass);border:1px solid rgba(245,158,11,.3);
  padding:2px 7px;border-radius:var(--r-pill);}

.acq-tabs{display:flex;gap:4px;margin-left:6px;}
.acq-tab{padding:6px 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);
  border-radius:var(--r-s);text-decoration:none;border:1px solid transparent;transition:.14s var(--ease);}
.acq-tab:hover{color:var(--t1);background:var(--glass-2);}
.acq-tab.active{color:var(--amber-2);background:var(--amber-glass);border-color:rgba(245,158,11,.3);}

.acq-topbar .right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.acq-user{font-size:12px;color:var(--t2);}
.acq-role{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber-2);background:var(--amber-glass);border:1px solid rgba(245,158,11,.3);
  padding:2px 7px;border-radius:4px;margin-left:6px;}

/* ---- shared bottom nav (mobile) ---- */
.acq-bottomnav{display:none;}
@media (max-width:820px){
  .acq-tabs{display:none;}
  .acq-bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    justify-content:space-around;align-items:stretch;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    -webkit-backdrop-filter:var(--lg-blur-l);backdrop-filter:var(--lg-blur-l);
    background:var(--lg-chrome);border-top:var(--bd);box-shadow:var(--lg-spec);
  }
  .acq-bnav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:6px 2px;min-height:48px;border-radius:var(--r-s);
    text-decoration:none;color:var(--t3);font-size:9px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;transition:.14s var(--ease);
  }
  .acq-bnav-item .ic{font-size:18px;line-height:1;filter:grayscale(1) opacity(.45);transition:.14s var(--ease);}
  .acq-bnav-item.active .ic{filter:none;}
  .acq-bnav-item.active{color:var(--amber-2);background:var(--amber-glass);}
}

/* ---- buttons ---- */
.acq .btn{
  background:var(--amber);color:#000;border:0;padding:11px 18px;border-radius:var(--r-s);
  font-weight:700;font-size:13px;transition:.14s var(--ease);
}
.acq .btn:hover{background:var(--amber-2);}
.acq .btn:disabled{opacity:.5;cursor:not-allowed;}
.acq .btn.ghost,.acq .btn-ghost{
  background:var(--glass);color:var(--t2);border:var(--bd);
}
.acq .btn.ghost:hover,.acq .btn-ghost:hover{background:var(--glass-2);color:var(--t1);}

/* ---- inputs ---- */
.acq input[type=search],.acq input[type=text],.acq input[type=number],.acq select{
  background:var(--glass);border:var(--bd);color:var(--t1);font-family:var(--font);
  font-size:12px;padding:8px 10px;border-radius:var(--r-s);outline:none;transition:.14s var(--ease);
}
.acq input:focus,.acq select:focus{border-color:rgba(245,158,11,.4);background:var(--glass-2);}
.acq input::placeholder{color:var(--t3);}

/* ---- cards + pills ---- */
.acq-card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 40%),var(--glass);
  border:var(--bd);border-radius:var(--r-m);
  box-shadow:var(--spec),0 8px 24px rgba(0,0,0,.35);
}
.acq-pill{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;}
.acq-pill.ok{background:rgba(52,211,153,.12);color:var(--ok);border:1px solid rgba(52,211,153,.3);}
.acq-pill.warn{background:rgba(251,191,36,.10);color:var(--warn);border:1px solid rgba(251,191,36,.3);}
.acq-pill.danger{background:var(--red-glow);color:var(--red);border:1px solid rgba(248,113,113,.35);}
.acq-pill.info{background:rgba(56,189,248,.10);color:var(--redemption);border:1px solid rgba(56,189,248,.3);}

/* ---- toast ---- */
.acq .toast{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  background:var(--lg-float);-webkit-backdrop-filter:var(--lg-blur-m);backdrop-filter:var(--lg-blur-m);
  color:var(--t1);padding:10px 18px;border-radius:var(--r-s);font-size:13px;border:var(--bd);
  opacity:0;transition:opacity .2s;z-index:10000;pointer-events:none;
}
.acq .toast.show{opacity:1;}
.acq .toast.err{border-color:rgba(248,113,113,.5);background:rgba(60,14,14,.85);}
.acq .toast.ok{border-color:rgba(52,211,153,.5);background:rgba(10,40,28,.85);}
@media (max-width:820px){ .acq .toast{bottom:calc(72px + env(safe-area-inset-bottom));} }

/* ================================================================
   Phase 2.1 — Trainer theme + shared components (namespaced)
   ----------------------------------------------------------------
   The 10 trainer pages (capital/commercial/exam-mastery/flip/
   preforeclosure/probate/redemption/shortsale/surplus-trainer +
   curriculum) share a byte-identical 15-token theme (~200 CSS lines
   each, 60–95% shared). It is namespaced under
   [data-theme="trainer"] so it NEVER collides with the liquid-glass
   :root tokens above (--bg, --gold, --panel mean different values in
   the two families) and so the 9 existing adopters are unaffected.
   ADOPTION: <html data-theme="trainer">, then delete the page's own
   :root block, body base, .card / .tag / .calcbtn copies.
   ================================================================ */

/* ---- font loading snippets (copy-paste into <head>; NOT auto-loaded) ----
   Trainers (Archivo + JetBrains Mono) — 14 pages, canonical weights:
     @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
   App shell (Manrope + JetBrains Mono) — 13 pages, canonical weights:
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
*/

/* ---- trainer tokens: byte-identical values from the 10 trainer pages ---- */
[data-theme="trainer"]{
  --bg:#0a0c10;--panel:#11151c;--panel2:#161b24;--line:#222a36;--line2:#2e3a4a;
  --txt:#e6edf3;--mut:#8b97a7;--dim:#5c6878;
  --gold:#d4af37;--gold-d:#a8842a;--grn:#22c98a;--red:#e5484d;--amb:#e8a13c;--blue:#4a90d9;
  --shadow:0 4px 16px rgba(0,0,0,.4);
}
[data-theme="trainer"] body{
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(212,175,55,.06),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,rgba(74,144,217,.05),transparent 55%),
    var(--bg);
  color:var(--txt);font-family:'Archivo',sans-serif;line-height:1.5;
  min-height:100vh;padding-bottom:env(safe-area-inset-bottom);
}

/* ---- shared trainer components ---- */
[data-theme="trainer"] .card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:22px;margin-bottom:16px;box-shadow:var(--shadow);
}
[data-theme="trainer"] .card h2{
  font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:4px;
  display:flex;align-items:center;gap:9px;
}
[data-theme="trainer"] .card h2 .dot{
  width:8px;height:8px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px var(--gold);
}
[data-theme="trainer"] .card .lead{color:var(--mut);font-size:14px;margin-bottom:18px}

/* gold gradient primary (academy family, retokened to trainer --gold) */
[data-theme="trainer"] .btn-gold{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:14px;border:0;border-radius:13px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#0a0c10;
  transition:.15s;
}
[data-theme="trainer"] .btn-gold:active{transform:scale(.99)}
/* amber solid (intake/pool2 byte-identical form) */
[data-theme="trainer"] .btn-amber{
  background:#f59e0b;color:#000;border:0;padding:12px 18px;border-radius:8px;
  font-weight:600;cursor:pointer;font-size:14px;
}

/* tags / badges: base + pos/neu/obj/end variants (6 trainer files).
   Some pages scope these under .choice — the unscoped form below wins
   ties only inside [data-theme="trainer"]. */
[data-theme="trainer"] .tag{
  flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:9px;
  padding:3px 7px;border-radius:5px;letter-spacing:.05em;
}
[data-theme="trainer"] .tag.pos{background:rgba(34,201,138,.15);color:var(--grn)}
[data-theme="trainer"] .tag.neu{background:rgba(74,144,217,.15);color:var(--blue)}
[data-theme="trainer"] .tag.obj{background:rgba(232,161,60,.15);color:var(--amb)}
[data-theme="trainer"] .tag.end{background:rgba(229,72,77,.15);color:var(--red)}
[data-theme="trainer"] .badge{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.05em;
  padding:3px 7px;border-radius:5px;background:var(--panel2);
  border:1px solid var(--line2);color:var(--mut);
}

/* ── TAP STATES — press feedback on touch ─────────────────────────
   Port of index.html's coinbase-polish :active scale(.97). Buttons
   squish on press; full-width rows brighten instead (scaling a row
   looks broken). :hover is useless on touch — :active is what the
   thumb feels. */
@media (hover:hover){
  button:not(:disabled):hover,
  [role="button"]:not(:disabled):hover,
  .btn:not(:disabled):hover,
  [class*="btn-"]:not(:disabled):hover{filter:brightness(1.08);}
}
button:not(:disabled):active,
[role="button"]:not(:disabled):active,
.btn:not(:disabled):active,
[class*="btn-"]:not(:disabled):active,
[class*="-btn"]:not(:disabled):active,
.nav-tile:active,
.tier:active{
  transform:scale(.97);
  transition-duration:80ms;
}
.row:active,
.queue-item:active,
.qi:active,
.lead-item:active,
.deal-row:active{filter:brightness(1.18);}

/* ── QUEUE SKELETON — shimmer loading rows for queue pages ───────────────
   Port of index.html's Coinbase-style shimmer (.skel). queue-skeleton.js
   paints .queue-skel rows into the queue list during the first fetch so
   the operator never stares at a blank list. */
@keyframes acq-shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
.skel{
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size:200% 100%;
  animation:acq-shimmer 1.4s ease-in-out infinite;
  border-radius:6px;
  color:transparent;
  user-select:none;
  pointer-events:none;
}
.skel-line{height:10px;margin:4px 0;}
.queue-item.queue-skel{
  pointer-events:none;
  user-select:none;
  cursor:default;
}
.queue-item.queue-skel:hover{background:transparent;}