/* Launch. Two columns: the work on the left, the consequence pinned on the
   right. No numbered step cards, because three identical boxes is what made the
   first pass read as a template. */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 46px;
  padding: 30px 0 100px;
  align-items: start;
}

.work { min-width: 0; }
.head { margin-bottom: 34px; }
.head p { margin-top: 6px; font-size: 14px; }

.rule.tall { margin-top: 34px; }
.rule .rate { font-size: 11px; color: var(--txt-4); flex: 0 0 auto; order: 3; }

/* ------------------------------------------------------------- the coin */

.idrow { display: flex; gap: 10px; align-items: stretch; }

.drop {
  flex: 0 0 82px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--bg-2);
  display: grid; place-items: center; cursor: pointer; overflow: hidden;
  color: var(--txt-5);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.drop:hover { border-color: var(--line-3); background: var(--bg-3); color: var(--txt-3); }
.drop img { width: 100%; height: 100%; object-fit: cover; }

.fields { flex: 1; display: grid; gap: 8px; }
.fields input {
  width: 100%; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--txt);
  font: 400 14px Geist, sans-serif; letter-spacing: -.012em;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.fields input:focus { outline: none; border-color: #33333c; background: var(--bg-3); }
.fields input::placeholder { color: var(--txt-5); }
#sym { text-transform: uppercase; font-family: 'Geist Mono', monospace; font-size: 13px; letter-spacing: .04em; }

.pairrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.pairnote { font-size: 11.5px; }

.seg-pick { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 2px; }
.sp {
  padding: 5px 13px; border: 0; border-radius: var(--r-xs); background: none; cursor: pointer;
  font: 500 11px 'Geist Mono', monospace; letter-spacing: .06em; color: var(--txt-5);
  transition: color var(--t-fast), background var(--t-fast);
}
.sp:hover { color: var(--txt-3); }
.sp.on { background: var(--bg-4); color: var(--txt); }

/* --------------------------------------------------------------- the bar */

.alloc { margin-bottom: 14px; }

.alloc-bar {
  position: relative; height: 58px; border-radius: var(--r-sm);
  background: #08080a; border: 1px solid var(--line-2);
  display: flex; overflow: hidden; user-select: none; touch-action: none;
}

.seg {
  position: relative; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 12px; overflow: hidden; white-space: nowrap;
  transition: width .42s var(--ease), filter .2s var(--ease);
}
.alloc-bar.dragging .seg { transition: filter .2s var(--ease); }

.seg-name { font: 500 9.5px 'Geist Mono', monospace; letter-spacing: .12em;
            text-transform: uppercase; color: var(--txt-5); }
.seg-pct  { font: 600 16px 'Geist Mono', monospace; font-variant-numeric: tabular-nums;
            letter-spacing: -.03em; color: var(--txt-hero); margin-top: 3px; }
.seg.tight { padding: 0 8px; }
.seg.tight .seg-name { display: none; }
.seg.tight .seg-pct { font-size: 12px; }
.seg.vtight .seg-pct { display: none; }

/* hue means value, not category. green is the dev's own money, so dragging it
   away visibly shrinks it and the trade-off needs no caption. */
.seg-creator { background: linear-gradient(170deg, #8ff0b3, #63d488); }
.seg-creator .seg-name { color: rgba(5, 46, 22, .6); }
.seg-creator .seg-pct  { color: var(--accent-deep); }

.seg-job { background: #16161a; }
.seg-job + .seg-job { background: #1c1c21; }
.seg-job + .seg-job + .seg-job { background: #222228; }
.seg-job + .seg-job + .seg-job + .seg-job { background: #28282f; }
.seg-pumped { background: #101014; }
.seg-pumped .seg-pct { color: var(--txt-4); font-weight: 500; font-size: 13px; }

.seg.hot { filter: brightness(1.16); }

.handle {
  position: absolute; top: 0; height: 100%; width: 18px;
  margin-left: -9px; z-index: 5; cursor: col-resize;
  display: grid; place-items: center; transition: left .42s var(--ease);
}
.alloc-bar.dragging .handle { transition: none; }
.handle::before {
  content: ''; width: 1px; height: 100%; background: #08080a;
  transition: background var(--t-fast);
}
.handle::after {
  content: ''; position: absolute; width: 3px; height: 18px; border-radius: 2px;
  background: rgba(255, 255, 255, .3); opacity: 0; transform: scale(.8);
  transition: opacity var(--t-fast), transform .22s var(--ease-2), background var(--t-fast);
}
.handle:hover::after, .handle.on::after { opacity: 1; transform: scale(1); }
.handle.on::after { background: var(--accent); }

.alloc-scale {
  display: flex; justify-content: space-between; margin-top: 6px; padding: 0 1px;
  font: 400 9.5px 'Geist Mono', monospace; color: #34343c; letter-spacing: .06em;
}

/* ---------------------------------------------------------- legend rows */

.legend { display: grid; gap: 4px; margin-bottom: 14px; }

.lg {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2); overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.lg:hover { border-color: var(--line-2); }
.lg.open { border-color: var(--line-3); background: var(--bg-2); }

.lg-top {
  display: grid; grid-template-columns: 8px 1fr auto auto auto;
  align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer;
}
.lg.fixed .lg-top { cursor: default; }
.lg-sw { width: 8px; height: 8px; border-radius: 2px; }
.lg-main { min-width: 0; }
.lg-name { font-size: 13px; font-weight: 550; color: var(--txt); display: flex; align-items: center; gap: 7px; }
.lg-sub  { font-size: 11.5px; color: var(--txt-5); margin-top: 2px; }
.lg-bps  { font: 600 14px 'Geist Mono', monospace; font-variant-numeric: tabular-nums;
           color: var(--txt-hero); letter-spacing: -.03em; }

.lg-chev {
  width: 20px; height: 20px; display: grid; place-items: center; color: var(--txt-5);
  transition: transform .3s var(--ease), color var(--t-fast);
}
.lg.open .lg-chev { transform: rotate(90deg); color: var(--txt-3); }
.lg.fixed .lg-chev, .lg.fixed .lg-x { visibility: hidden; }

.lg-x {
  width: 20px; height: 20px; border-radius: var(--r-xs); border: 0;
  background: none; color: #3a3a42; cursor: pointer; display: grid; place-items: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.lg-x:hover { color: var(--err); background: rgba(248, 113, 113, .08); }
.lg-x[disabled] { visibility: hidden; }

/* per-job settings. this is the "customise" surface: the rate is pump.fun's,
   but how each job behaves is ours. */
.lg-body { display: none; padding: 0 12px 12px 31px; }
.lg.open .lg-body { display: block; animation: panein .34s var(--ease); }

.opt { display: flex; align-items: center; gap: 12px; padding: 7px 0; flex-wrap: wrap; }
.opt + .opt { border-top: 1px solid var(--line); }
.opt-l { font-size: 12px; color: var(--txt-4); flex: 1 1 auto; min-width: 130px; }
.opt-note { font-size: 11px; color: var(--txt-5); flex-basis: 100%; margin-top: -3px; }

/* ------------------------------------------------------------------ chips */

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: var(--r-sm);
  background: transparent; border: 1px dashed var(--line-3); color: var(--txt-4);
  font: 500 12px Geist, sans-serif; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform .18s var(--ease);
}
.chip:hover { background: var(--bg-2); color: var(--txt); border-color: var(--txt-5); border-style: solid; transform: translateY(-1px); }
.chip .plus { color: var(--txt-5); font-size: 13px; line-height: 1; }
.chip:hover .plus { color: var(--accent); }
.chip[disabled] { opacity: .3; pointer-events: none; }

/* ------------------------------------------------------------- volume in */

.volrow { display: flex; align-items: center; gap: 10px; }
.volwrap {
  display: inline-flex; align-items: center; background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 11px 6px 10px;
  transition: border-color var(--t-fast);
}
.volwrap:focus-within { border-color: var(--line-3); }
.volwrap .cur { color: var(--txt-5); font-size: 13px; margin-right: 3px; }
#vol { width: 86px; background: none; border: 0; color: var(--txt-hero);
       font-size: 13.5px; font-weight: 600; padding: 0; }
#vol:focus { outline: none; }
.volrow .dim { font-size: 12.5px; }

/* =========================================================== the rail === */

.rail { position: sticky; top: calc(var(--bar-h) + 24px); }
.rail-in {
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 18px 18px 18px;
}
.rail .rule { margin-bottom: 12px; }
.rail .rule.tall { margin-top: 24px; }

.minibar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-bottom: 14px; background: #08080a; }
.minibar i { display: block; height: 100%; transition: width .42s var(--ease); }

.cqs { display: grid; gap: 0; }
.cq { display: grid; grid-template-columns: 8px 1fr auto; align-items: baseline;
      gap: 10px; padding: 8px 0; }
.cq + .cq { border-top: 1px solid var(--line); }
.cq-sw { width: 6px; height: 6px; border-radius: 2px; align-self: center; }
.cq-name { font-size: 12.5px; color: var(--txt-3); }
.cq-val  { font: 600 14px 'Geist Mono', monospace; font-variant-numeric: tabular-nums;
           color: var(--txt-hero); letter-spacing: -.03em; }
.cq.zero .cq-val { color: var(--txt-5); font-weight: 400; }

.fp { font-size: 10.8px; line-height: 1.5; margin-top: 10px; color: var(--txt-5); }

.costs { display: grid; gap: 7px; font-size: 12.5px; }
.costs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.costs b { color: var(--txt-2); font-weight: 550; }
.costs .tot { border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: 2px; }
.costs .tot span { color: var(--txt-3); }
.costs .tot b { color: var(--txt-hero); font-weight: 600; }

.ixs { list-style: none; counter-reset: ix; margin: 0 0 14px; padding: 0; display: grid; gap: 5px; }
.ixs li { counter-increment: ix; position: relative; padding-left: 19px; }
.ixs li::before {
  content: counter(ix); position: absolute; left: 0; top: 3px;
  font: 500 9.5px 'Geist Mono', monospace; color: #34343c;
}
.ixs code { font: 400 11.4px 'Geist Mono', monospace; color: var(--txt-3); }

.shl { display: grid; gap: 4px; margin-bottom: 16px; }
.sh { display: grid; grid-template-columns: 58px 1fr; gap: 9px; align-items: baseline;
      font: 400 10.8px 'Geist Mono', monospace; }
.sh-bps { color: var(--txt-2); font-weight: 500; text-align: right; }
.sh-addr { color: var(--txt-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.big { width: 100%; padding: 12px; font-size: 13.5px; }

.perm {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--txt-5);
}
.perm .lock { flex: 0 0 auto; margin-top: 1px; color: var(--warn); opacity: .8; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1040px) {
  .grid { grid-template-columns: 1fr; gap: 30px; }
  .rail { position: static; }
}

@media (max-width: 640px) {
  .grid { padding: 20px 0 70px; }
  h1 { font-size: 23px; }
  .head { margin-bottom: 26px; }
  .nav { display: none; }
  .alloc-bar { height: 52px; }
  .idrow { flex-wrap: wrap; }
  .drop { flex: 0 0 64px; height: 64px; }
  .fields { flex: 1 1 200px; }
  .lg-top { grid-template-columns: 8px 1fr auto auto auto; gap: 8px; padding: 10px; }
  .lg-body { padding-left: 10px; }
  .rail-in { padding: 15px; }
}

/* ----------------------------------------------------------- the dev buy */

.devbuy { margin-bottom: 4px; }
.devrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.volwrap.sol { padding: 6px 10px 6px 12px; }
.volwrap.sol input { width: 68px; background: none; border: 0; padding: 0;
                     color: var(--txt-hero); font-size: 13.5px; font-weight: 600; }
.volwrap.sol input:focus { outline: none; }
.volwrap.sol .unit { font: 500 11px 'Geist Mono', monospace; color: var(--txt-5);
                     letter-spacing: .06em; margin-left: 7px; }

.devnote { font-size: 11.8px; line-height: 1.5; margin-top: 9px; max-width: 62ch; }
.devnote.warn { color: var(--warn); }

#devPct { font-size: 11px; color: var(--txt-4); }
#devPct.hot { color: var(--accent); }
#devPct.over { color: var(--warn); }