/* ═══════════════════════════════════════════════════════════
   MISSION: TRANSMISSION — THE DESIGN SYSTEM  (mt.css) · v1

   ONE stylesheet for every screen. Lyf keeps its CSS inline per
   page; we don't, because eleven screens sharing a look is exactly
   the drift the one-source-of-truth rule exists to stop. Change a
   token here, every screen moves together.

   ─────────────────────────────────────────────────────────────
   DIRECTION — "CAST & FLUID"

   Grounded in the object itself, not in software fashion. A
   transmission is a cast aluminum case full of steel, running red
   fluid, bolted to a cold engine in a hot yard. The palette is
   that and nothing else:

     FLOOR / CASE / RAIL   graphite and machined aluminum — the body
     ATF                   #D6452A — transmission fluid. SELL side,
                           heat, outbound, anything leaving.
     BRASS                 #E0A63C — bushing brass. BUY side, money,
                           churn, anything earned.
     COOLANT               #59A5DE — cooler-line blue. Information,
                           prospects, links. Never money.
     GO                    #4FB286 — confirmed, in hand, on the rack.

   Dark, because this is a dense internal instrument read at a desk
   at midnight and on a phone under a canopy — and because Lyf is
   warm parchment and these two must never be mistaken for each other.

   ─────────────────────────────────────────────────────────────
   TYPE

   Archivo 700/800/900 for display — a grotesque with squared
   terminals that reads like a stamped case marking.
   JetBrains Mono for everything else, because everything else in
   this app IS a code: 4L60E, 35000-60E00, JF011E, (909) 429-4604.
   Proportional type makes part numbers harder to read aloud over a
   phone, and reading part numbers aloud over a phone is the job.

   ─────────────────────────────────────────────────────────────
   THE TWO SIGNATURE DEVICES

   .plate — THE SPEC PLATE. A unit's header renders as the riveted
   ID tag stamped on the real case. Four rivets, bevel, emboss. It
   is the one visual risk in the whole system and it earns its place
   because field identification is what this ledger is FOR — the
   plate is literally where that information lives on the object.

   .gauge — THE CHURN GAUGE. Five segments, filled to churn. Small,
   repeated everywhere, and it answers caP'n's founding question in
   one glance: does this thing keep crossing the dock?
   ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --floor:#0E1116; --case:#161A21; --case2:#1E242D; --case3:#252C37;
  --rail:#2A323E; --rail2:#3A4453;
  --txt:#E7ECF3; --dim:#97A1B0; --dimmer:#6A7484;
  --atf:#D6452A;  --atfd:#D6452A18;  --atfm:#D6452A38;
  --brass:#E0A63C;--brassd:#E0A63C18;--brassm:#E0A63C38;
  --cool:#59A5DE; --coold:#59A5DE18; --coolm:#59A5DE38;
  --go:#4FB286;   --god:#4FB28618;   --gom:#4FB28638;
  --fd:'Archivo',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
  --r:12px;
}

html,body{
  min-height:100%;background:var(--floor);color:var(--txt);
  font-family:var(--fm);font-size:13.5px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ── shell ───────────────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:11px;padding:12px 15px;
  border-bottom:1px solid var(--rail);background:var(--case);
  position:sticky;top:0;z-index:50;
}
.back{
  font-size:10.5px;color:var(--cool);cursor:pointer;padding:6px 11px;
  border:1px solid var(--coolm);border-radius:6px;background:var(--coold);
  text-decoration:none;white-space:nowrap;font-family:var(--fm);
}
.back:hover{background:var(--cool);color:var(--floor)}
.ttl{font-family:var(--fd);font-weight:800;font-size:16px;letter-spacing:-.01em;flex:1}
.tnote{font-size:9.5px;color:var(--dimmer);letter-spacing:.06em;text-transform:uppercase}

.main{padding:13px 15px 120px;display:flex;flex-direction:column;gap:11px;max-width:900px;margin:0 auto}

/* ── panels ──────────────────────────────────────────────── */
.panel{background:var(--case);border:1px solid var(--rail);border-radius:var(--r);overflow:hidden}
.ph{padding:11px 14px;border-bottom:1px solid var(--rail);display:flex;align-items:center;gap:9px;background:var(--case2)}
.ph-ico{font-size:14px;line-height:1}
.ph-t{font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.02em;flex:1}
.pb{padding:13px 14px}
.pb.tight{padding:0}

.sub{font-size:11px;color:var(--dim);line-height:1.65}
.sub b{color:var(--txt);font-weight:500}
.tiny{font-size:9.5px;color:var(--dimmer);letter-spacing:.05em;text-transform:uppercase;font-family:var(--fd);font-weight:700}

/* ── badges & chips ──────────────────────────────────────── */
.b{font-size:9px;padding:2.5px 8px;border-radius:20px;font-family:var(--fd);font-weight:700;border:1px solid;letter-spacing:.03em;white-space:nowrap;display:inline-block}
.b-atf{color:var(--atf);border-color:var(--atfm);background:var(--atfd)}
.b-br{color:var(--brass);border-color:var(--brassm);background:var(--brassd)}
.b-cl{color:var(--cool);border-color:var(--coolm);background:var(--coold)}
.b-go{color:var(--go);border-color:var(--gom);background:var(--god)}
.b-n{color:var(--dim);border-color:var(--rail2);background:var(--case2)}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-size:10px;padding:6px 11px;border-radius:20px;border:1px solid var(--rail2);
  background:var(--case2);color:var(--dim);cursor:pointer;
  font-family:var(--fd);font-weight:700;transition:all .12s;user-select:none;white-space:nowrap;
}
.chip:hover{border-color:var(--cool);color:var(--cool)}
.chip.on{background:var(--cool);border-color:var(--cool);color:var(--floor)}
.chip.on-br{background:var(--brass);border-color:var(--brass);color:var(--floor)}
.chip.on-atf{background:var(--atf);border-color:var(--atf);color:#fff}

/* ── inputs ──────────────────────────────────────────────── */
.fl{font-size:9.5px;font-family:var(--fd);font-weight:700;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;display:block}
.fi{
  background:var(--floor);border:1px solid var(--rail2);border-radius:8px;
  padding:9px 11px;color:var(--txt);font-family:var(--fm);font-size:12px;
  outline:none;width:100%;
}
.fi:focus{border-color:var(--cool)}
.fi::placeholder{color:var(--dimmer)}
select.fi{cursor:pointer}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>.f{flex:1;min-width:120px}

.btn{
  border:none;border-radius:9px;padding:11px 16px;font-family:var(--fd);
  font-weight:800;font-size:12px;cursor:pointer;letter-spacing:.02em;transition:opacity .12s;
}
.btn:hover{opacity:.86}
.btn:active{transform:scale(.99)}
.btn-go{background:var(--go);color:var(--floor)}
.btn-br{background:var(--brass);color:var(--floor)}
.btn-atf{background:var(--atf);color:#fff}
.btn-cl{background:var(--cool);color:var(--floor)}
.btn-q{background:var(--case2);color:var(--dim);border:1px solid var(--rail2)}
.btn-sm{padding:7px 12px;font-size:11px;border-radius:7px}
.btn-full{width:100%}

/* ── THE SPEC PLATE — the signature ──────────────────────── */
.plate{
  position:relative;background:linear-gradient(160deg,#2C333E,#1B212A 55%,#232A34);
  border:1px solid var(--rail2);border-radius:7px;padding:13px 17px 12px;
  box-shadow:inset 0 1px 0 #FFFFFF12, inset 0 -1px 0 #00000040, 0 2px 6px #00000040;
}
.plate::before,.plate::after{
  content:'';position:absolute;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6C7684,#333B47);
  box-shadow:0 1px 1px #00000060;
}
.plate::before{top:6px;left:7px;box-shadow:0 1px 1px #00000060, 0 0 0 0 transparent}
.plate::after{top:6px;right:7px}
.plate .rv-b{position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6C7684,#333B47);box-shadow:0 1px 1px #00000060}
.plate .rv-b.l{left:7px}.plate .rv-b.r{right:7px}
.plate-n{
  font-family:var(--fd);font-weight:900;font-size:21px;letter-spacing:.01em;
  color:#F2F5FA;text-shadow:0 1px 0 #00000070;line-height:1.15;
}
.plate-s{
  font-size:10px;color:#9AA5B4;margin-top:3px;letter-spacing:.05em;
}
.plate-aka{font-size:9.5px;color:#77808E;margin-top:4px;line-height:1.5}

/* ── THE CHURN GAUGE — the signature number ──────────────── */
.gauge{display:inline-flex;gap:2px;align-items:center;vertical-align:middle}
.gauge i{width:4px;height:11px;border-radius:1px;background:var(--rail2);display:block}
.gauge i.f{background:var(--brass)}
.gauge.hot i.f{background:var(--atf)}
.gauge-l{font-size:9px;color:var(--dimmer);margin-left:5px;letter-spacing:.06em;font-family:var(--fd);font-weight:700}

/* ── list rows ───────────────────────────────────────────── */
.rows{display:flex;flex-direction:column}
.r{padding:11px 14px;border-bottom:1px solid var(--rail);display:flex;gap:11px;align-items:center;cursor:pointer;transition:background .1s}
.r:last-child{border-bottom:none}
.r:hover{background:var(--case2)}
.r.open{background:var(--case2)}
.r-i{flex:1;min-width:0}
.r-n{font-family:var(--fd);font-weight:800;font-size:13.5px;letter-spacing:-.005em}
.r-m{font-size:10px;color:var(--dim);margin-top:2px;line-height:1.5}
.r-m b{color:var(--txt);font-weight:500}
.r-r{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}

.detail{padding:0 14px 15px;border-bottom:1px solid var(--rail);background:var(--case2);display:flex;flex-direction:column;gap:11px}
.dsec{}
.dsec h4{font-family:var(--fd);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.dsec h4::after{content:'';flex:1;height:1px;background:var(--rail)}
.dl{list-style:none;display:flex;flex-direction:column;gap:4px}
.dl li{font-size:11px;line-height:1.6;color:var(--txt);padding-left:14px;position:relative}
.dl li::before{content:'';position:absolute;left:3px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--rail2)}
.dl.warn li::before{background:var(--atf)}
.dl.info li::before{background:var(--cool)}
.dl.money li::before{background:var(--brass)}

.kv{display:flex;flex-wrap:wrap;gap:7px}
.kv div{background:var(--floor);border:1px solid var(--rail);border-radius:7px;padding:6px 10px;font-size:10px;color:var(--dim);flex:1;min-width:88px}
.kv div b{display:block;color:var(--txt);font-family:var(--fd);font-weight:700;font-size:12px;margin-top:1px}

.empty{padding:26px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px}
.empty .ei{font-size:30px;opacity:.3}
.empty .et{font-family:var(--fd);font-weight:700;font-size:12.5px;color:var(--dim)}
.empty .es{font-size:11px;color:var(--dimmer);max-width:320px;line-height:1.6}

/* ── price rows ──────────────────────────────────────────── */
.pr{display:flex;align-items:center;gap:9px;padding:8px 10px;background:var(--floor);border:1px solid var(--rail);border-radius:8px;margin-bottom:6px}
.pr:last-child{margin-bottom:0}
.pr-s{width:34px;flex-shrink:0;font-family:var(--fd);font-weight:800;font-size:9px;letter-spacing:.06em;text-align:center;padding:3px 0;border-radius:4px}
.pr-s.buy{color:var(--brass);background:var(--brassd);border:1px solid var(--brassm)}
.pr-s.sell{color:var(--atf);background:var(--atfd);border:1px solid var(--atfm)}
.pr-a{font-family:var(--fd);font-weight:800;font-size:15px;flex-shrink:0;min-width:60px}
.pr-a.buy{color:var(--brass)}.pr-a.sell{color:var(--atf)}
.pr-w{flex:1;min-width:0;font-size:10.5px;color:var(--dim);line-height:1.45}
.pr-w b{color:var(--txt);font-weight:500;display:block}
.pr-x{flex-shrink:0;width:24px;height:24px;border-radius:50%;border:1px solid var(--rail2);background:var(--case2);color:var(--dimmer);font-size:11px;line-height:22px;text-align:center;cursor:pointer}
.pr-x:hover{border-color:var(--atf);color:var(--atf)}

.spread{display:flex;align-items:baseline;gap:8px;padding:9px 11px;background:var(--floor);border:1px dashed var(--rail2);border-radius:8px;margin-bottom:9px;flex-wrap:wrap}
.spread .sv{font-family:var(--fd);font-weight:900;font-size:17px;color:var(--go)}
.spread .sl{font-size:9.5px;color:var(--dimmer);letter-spacing:.06em;text-transform:uppercase;font-family:var(--fd);font-weight:700}

/* ── toast ───────────────────────────────────────────────── */
.toast{
  position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-90px);
  background:var(--case2);border:1px solid var(--rail2);border-radius:30px;
  padding:9px 17px;z-index:1000;transition:transform .34s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt);
  box-shadow:0 8px 28px #00000060;white-space:nowrap;max-width:92vw;
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:520px){
  .main{padding:11px 11px 130px}
  .plate-n{font-size:18px}
  .row>.f{min-width:100%}
  .kv div{min-width:calc(50% - 4px)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

:focus-visible{outline:2px solid var(--cool);outline-offset:2px}