/* ═══════════════════════════════════════════════════════════════════
   dev-charts.css — the dev modal's chart view, on every page that has a dev modal.

   SELF-CONTAINED ON PURPOSE. wh-profile.css only exists on wallet-hunter, and this view
   now opens on /live, /sim, /paper, /tweets, /scout and the subs page too — so the card
   styling has to travel with the feature rather than be borrowed from a page that may
   not be loaded.

   Every colour carries a literal fallback: var(--pn, #0b0b0e). The cockpit defines these
   tokens on :root, most of the other pages do too, and the ones that do not still get a
   card that looks right instead of a transparent one.

   Scoped under .dcx-grid throughout, so on wallet-hunter — where wh-profile.css IS
   loaded and owns .wp-card for its own grids — the two cannot fight.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the toggle and the fullscreen button ────────────────────────── */
.dcx-tog{display:inline-flex;margin-right:6px;border:1px solid var(--b2, rgba(255,255,255,.14));
  border-radius:var(--r1, 4px);overflow:hidden;vertical-align:middle}
.dcx-tog button{background:var(--pn2, #15151a);color:var(--tx3, #6b7280);border:0;
  padding:3px 9px;font:10px var(--f-mono, ui-monospace, Menlo, monospace);cursor:pointer;
  letter-spacing:.04em}
.dcx-tog button:hover{background:var(--hv, #1c1c22);color:var(--tx1, #e9ecf1)}
.dcx-tog button.on{background:var(--cy1, rgba(56,189,248,.15));color:var(--cy, #38bdf8)}
.dm-modal-link-btn.dcx-fs{font-size:13px;line-height:1}

/* ── fullscreen ──────────────────────────────────────────────────── */
/* !important because the modal's inline left/top/width/height are written by its own drag
   and resize handlers; without it a fullscreened modal springs back to wherever it was
   last dragged the moment anything re-reads them. */
.dev-modal.dcx-full{
  left:0!important;top:0!important;width:100vw!important;height:100vh!important;
  max-width:none!important;max-height:none!important;border-radius:0!important;
  resize:none!important;z-index:10050!important}
.dev-modal.dcx-full .resize-handle{display:none}
.dev-modal.dcx-full .dev-modal-body{max-height:none;height:calc(100vh - 46px);overflow:auto}

/* ── the grid ────────────────────────────────────────────────────── */
.dcx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;padding:12px}
/* WINDOWED: one card per row, three in view. The chart height comes from JS (--dcx-ch)
   because the modal is resizable and three have to fit whatever size it has been dragged
   to — a fixed height would only be right at one of them. */
.dcx-grid.one{grid-template-columns:1fr}
.dcx-grid.one .wp-chart{height:var(--dcx-ch, 150px)}
.dcx-grid.one .wp-sym{font-size:13px}
/* WINDOWED CHROME IS THE BUDGET. A card gets a third of the body — about 205px on a
   default modal — and everything that is not the chart comes straight out of the chart.
   Stacked label-over-value in a 4-wide footer plus its own timestamp row cost 118px of
   that, which left 87px of candles: not a big card, a squashed one. Laid out on one line
   each instead, the chrome is ~64px and the chart gets ~140. Same numbers, same order,
   read across rather than down. */
.dcx-grid.one .wp-card{padding:5px 8px 6px}
.dcx-grid.one .wp-top{margin-bottom:0}
.dcx-grid.one .wp-when{margin:0 0 3px;font-size:9px;line-height:1.25}
.dcx-grid.one .wp-foot{display:flex;flex-wrap:nowrap;gap:14px;margin-top:5px;
  align-items:baseline;overflow:hidden}
.dcx-grid.one .wp-foot>div{display:flex;align-items:baseline;gap:4px;min-width:0}
.dcx-grid.one .wp-foot .k{font-size:8px;flex:none}
.dcx-grid.one .wp-foot .v{font-size:11px}
.dcx-note{padding:26px;text-align:center;grid-column:1/-1;
  color:var(--tx3, #6b7280);font:11px var(--f-mono, ui-monospace, Menlo, monospace)}

/* ── one card ────────────────────────────────────────────────────── */
.dcx-grid .wp-card{background:var(--pn, #0b0b0e);
  border:1px solid var(--b2, rgba(255,255,255,.14));border-radius:var(--r-card, 7px);
  padding:7px 8px 8px;cursor:pointer;overflow:hidden;
  font:11px var(--f-sans, Inter, system-ui, sans-serif);color:var(--tx1, #e9ecf1)}
.dcx-grid .wp-card:hover{border-color:var(--b3, rgba(255,255,255,.28))}
.dcx-grid .wp-top{display:flex;align-items:center;gap:5px;margin-bottom:2px}
.dcx-grid .wp-sym{font:700 12px var(--f-mono, ui-monospace, Menlo, monospace);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--tx, #fff);letter-spacing:-.2px}
.dcx-grid .wp-tag{font:700 8px var(--f-mono, ui-monospace, Menlo, monospace);padding:0 4px;
  border-radius:2px;letter-spacing:.05em;flex:none}
.dcx-grid .wp-tag.rug{background:var(--rd1, rgba(246,70,93,.13));color:var(--rd, #f6465d)}
.dcx-grid .wp-tag.mig{background:var(--cy1, rgba(56,189,248,.15));color:var(--cy, #38bdf8)}
.dcx-grid .wp-tag.dev{background:var(--am1, rgba(240,180,41,.12));color:var(--am, #f0b429)}
.dcx-grid .wp-xs{margin-left:auto;display:flex;gap:4px;flex:none}
.dcx-grid .wp-x{font:10px var(--f-mono, ui-monospace, Menlo, monospace);
  color:var(--tx2, #9aa2af);white-space:nowrap}
.dcx-grid .wp-x b{color:var(--tx3, #6b7280);font-weight:700;margin-right:2px;font-size:8px}
.dcx-grid .wp-x.hi{color:var(--gn, #0ecb81)}
.dcx-grid .wp-x.lo{color:var(--rd, #f6465d)}
.dcx-grid .wp-when{display:flex;gap:6px;align-items:baseline;margin-bottom:4px;
  font:9.5px var(--f-mono, ui-monospace, Menlo, monospace);color:var(--tx3, #6b7280)}
.dcx-grid .wp-when .abs{opacity:.8}
.dcx-grid .wp-chart{position:relative;height:132px;border-radius:var(--r1, 4px);
  background:var(--rec, #070709);overflow:hidden}
.dcx-grid .wp-chart canvas{width:100%;height:100%;display:block}
.dcx-grid .wp-chart .msg{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--tx3, #6b7280);
  font:10px var(--f-mono, ui-monospace, Menlo, monospace)}
.dcx-grid .wp-fit{position:absolute;right:calc(var(--dcx-ax, 0px) + 5px);top:5px;z-index:2;
  background:var(--pn2, #15151a);border:1px solid var(--b2, rgba(255,255,255,.14));
  border-radius:var(--r1, 4px);color:var(--cy, #38bdf8);
  font:9px var(--f-mono, ui-monospace, Menlo, monospace);padding:1px 6px;cursor:pointer}
.dcx-grid .wp-fit:hover{border-color:var(--cy, #38bdf8)}
.dcx-grid .wp-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 6px;margin-top:6px}
.dcx-grid .wp-foot .k{font-size:8px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx3, #6b7280)}
.dcx-grid .wp-foot .v{font:10.5px var(--f-mono, ui-monospace, Menlo, monospace);
  color:var(--tx1, #e9ecf1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcx-grid .wp-foot .v.cy{color:var(--cy, #38bdf8)}
.dcx-grid .wp-foot .v.am{color:var(--am, #f0b429)}
.dcx-grid .wp-foot .v.gn{color:var(--gn, #0ecb81)}
.dcx-grid .wp-foot .v.rd{color:var(--rd, #f6465d)}

/* -- the toolbar -------------------------------------------------- */
/* Sticky and spanning every column: it belongs to the grid, not to one card, and it has to
   stay put while 120 launches scroll under it. */
.dcx-bar{grid-column:1/-1;position:sticky;top:0;z-index:3;display:flex;align-items:center;
  gap:8px;flex-wrap:wrap;padding:7px 8px;margin:-12px -12px 0;
  background:var(--pn2, #15151a);border-bottom:1px solid var(--b2, rgba(255,255,255,.14))}
.dcx-sort{display:inline-flex;border:1px solid var(--b2, rgba(255,255,255,.14));
  border-radius:var(--r1, 4px);overflow:hidden}
.dcx-sort button{background:transparent;color:var(--tx3, #6b7280);border:0;padding:4px 10px;
  font:700 10.5px var(--f-mono, ui-monospace, Menlo, monospace);cursor:pointer;
  letter-spacing:.04em}
.dcx-sort button:hover{background:var(--hv, #1c1c22);color:var(--tx1, #e9ecf1)}
.dcx-sort button.on{background:var(--cy1, rgba(56,189,248,.15));color:var(--cy, #38bdf8)}
.dcx-flip{background:var(--pn, #0b0b0e);color:var(--cy, #38bdf8);
  border:1px solid var(--b2, rgba(255,255,255,.14));border-radius:var(--r1, 4px);
  width:26px;height:24px;cursor:pointer;line-height:1;padding:0;
  font:700 13px var(--f-mono, ui-monospace, Menlo, monospace)}
.dcx-flip:hover{border-color:var(--cy, #38bdf8)}
.dcx-q{flex:1;min-width:130px;background:var(--pn, #0b0b0e);color:var(--tx1, #e9ecf1);
  border:1px solid var(--b2, rgba(255,255,255,.14));border-radius:var(--r1, 4px);
  padding:4px 8px;font:11px var(--f-mono, ui-monospace, Menlo, monospace);outline:none}
.dcx-q:focus{border-color:var(--cy, #38bdf8)}
.dcx-q::placeholder{color:var(--tx3, #6b7280)}
.dcx-count{font:10.5px var(--f-mono, ui-monospace, Menlo, monospace);
  color:var(--tx3, #6b7280);white-space:nowrap}

/* -- bigger, more pronounced numbers on the card ------------------ */
/* The X and the ath are the two things you scan a dev's history FOR. They carried the same
   weight as the labels around them, which turned scanning into reading. */
.dcx-grid .wp-x{font:700 13px var(--f-mono, ui-monospace, Menlo, monospace)}
.dcx-grid .wp-x b{font-size:9px;font-weight:700;opacity:.75;margin-right:3px}
.dcx-grid .wp-x.hi{color:var(--gn, #0ecb81)}
.dcx-grid .wp-x.lo{color:var(--rd, #f6465d)}
.dcx-grid .wp-sym{font-size:13.5px}
.dcx-grid .wp-foot .v{font-size:12.5px;font-weight:700}
.dcx-grid .wp-foot .k{font-size:8.5px}
.dcx-grid.one .wp-sym{font-size:15px}
.dcx-grid.one .wp-x{font-size:15px}
.dcx-grid.one .wp-foot .v{font-size:13.5px}

/* -- the wide card lays itself out like a wide card ---------------- */
/* Three-in-view is a height budget, and bigger type plus a toolbar spent it. Rather than
   shrink the numbers back down -- the whole point was to make them readable -- the card
   stops stacking rows it can afford to put side by side. At 1050px wide there is no reason
   the symbol and the timestamp occupy two separate lines, or for a four-cell footer to set
   every label above its value. Chrome ~107px -> ~55px, and the chart takes the difference. */
.dcx-grid.one .wp-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"top when" "chart chart" "foot foot";
  align-items:center;column-gap:12px;row-gap:3px;padding:4px 8px 5px}
.dcx-grid.one .wp-top{grid-area:top;margin-bottom:0;line-height:1.15}
.dcx-grid.one .wp-when{grid-area:when;margin-bottom:0;justify-content:flex-end;
  line-height:1.15;font-size:10.5px}
.dcx-grid.one .wp-chart{grid-area:chart}
.dcx-grid.one .wp-foot{grid-area:foot;margin-top:0;display:flex;gap:18px;
  align-items:baseline;flex-wrap:nowrap;overflow:hidden}
.dcx-grid.one .wp-foot>div{display:flex;gap:6px;align-items:baseline;white-space:nowrap}
.dcx-grid.one .wp-foot .k{font-size:9px}
.dcx-grid.one .wp-tag{font-size:9px;padding:1px 5px}

/* the toolbar is permanent furniture in the viewport -- keep it lean */
.dcx-bar{padding:5px 8px}
.dcx-sort button{padding:3px 9px}
.dcx-flip{height:22px}
.dcx-q{padding:3px 8px}

/* -- neutralise wh-profile.css ------------------------------------- */
/* wallet-hunter loads wh-profile.css, whose .wp-top/.wp-when/.wp-foot are UNSCOPED and
   carry their own padding for the cards on that page. Our .dcx-grid .wp-* selectors
   outrank them, but only for properties we actually declare -- so their padding was
   silently adding 16px to every footer and 11px to every title row here, and nowhere else.
   Declaring it explicitly makes the card identical on every page that hosts a dev modal,
   which is the entire premise of this file being self-contained. */
.dcx-grid .wp-top{padding:0}
.dcx-grid .wp-when{padding:0}
.dcx-grid .wp-foot{padding:0}
.dcx-grid.one .wp-foot{align-items:center}

/* The chart is a surface you drag, and it has to look like one -- the card itself is a
   pointer because clicking it opens the token, so the chart has to say otherwise. */
.dcx-grid .wp-chart{cursor:grab}
.dcx-grid .wp-chart.dcx-dragging{cursor:grabbing}
.dcx-grid .wp-chart.dcx-dragging canvas{user-select:none}

/* A CLICKED CHART GETS HALF AGAIN ITS HEIGHT. The card you are moving around in is the one
   that needs the room, and nothing else about it changes -- same grid, same columns, same
   place in the list -- so it grows without the page rearranging itself underneath you.
   Windowed cards take their height from --dcx-ch, fullscreen ones from the flat 132px,
   so both bases get their own multiple of the same 1.2. */
.dcx-grid .wp-card.dcx-focus .wp-chart{height:calc(132px * 1.5)}
.dcx-grid.one .wp-card.dcx-focus .wp-chart{height:calc(var(--dcx-ch, 150px) * 1.5)}
.dcx-grid .wp-card.dcx-focus{border-color:var(--cy, #38bdf8)}

/* Axiom, on the card header. Dim until you go near it -- it is an escape hatch, not
   something to read past forty times while scrolling. */
.dcx-grid .wp-ax{flex:none;margin-left:6px;text-decoration:none;font-size:12px;
  line-height:1;opacity:.45;transition:opacity .12s;cursor:pointer}
.dcx-grid .wp-ax:hover{opacity:1}

/* ── dev-wallets ──────────────────────────────────────────────────
   The same shape as the rows table, in the same slot the chart grid uses, so flipping
   between the three views moves nothing but the content. */
.dm-layout > .dcx-wal{flex:1;min-width:0;display:flex;flex-direction:column;
  overflow:hidden;background:var(--pn, #0b0b0e)}
.dw-bar{display:flex;align-items:center;gap:10px;flex:none}
.dw-t{font:700 10px var(--f-mono, ui-monospace, Menlo, monospace);letter-spacing:.08em;
  text-transform:uppercase;color:#e9ecf1}
.dw-count{font:10px var(--f-mono, ui-monospace, Menlo, monospace);color:#6b7280}
.dw-note{margin-left:auto;font:9.5px var(--f-mono, ui-monospace, Menlo, monospace);
  color:#4b5563;white-space:nowrap}
.dw-q{background:#111114;border:1px solid rgba(255,255,255,.14);color:#e9ecf1;
  border-radius:4px;padding:3px 8px;width:170px;
  font:10.5px var(--f-mono, ui-monospace, Menlo, monospace)}
.dw-q:focus{outline:none;border-color:#38bdf8}
.dw-row{display:grid;
  grid-template-columns:118px 54px 52px 66px 64px 64px 78px 78px 62px 74px 66px;
  gap:0 8px;padding:4px 10px;align-items:center;
  font:10.5px var(--f-mono, ui-monospace, Menlo, monospace);color:#e9ecf1}
.dw-rows{overflow:auto;flex:1;min-height:0}
.dw-rows .dw-row:nth-child(odd){background:rgba(255,255,255,.022)}
.dw-rows .dw-row{cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05)}
.dw-rows .dw-row:hover{background:rgba(56,189,248,.10)}
.dw-c{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dw-c.l{text-align:left}
.dw-head{position:sticky;top:0;z-index:1;flex:none;
  background:#0d0d10;border-bottom:1px solid rgba(255,255,255,.14);
  font:700 9px var(--f-mono, ui-monospace, Menlo, monospace);letter-spacing:.05em;
  text-transform:uppercase;color:#6b7280;padding-top:6px;padding-bottom:6px}
.dw-head .dw-c{cursor:pointer;user-select:none}
.dw-head .dw-c:hover{color:#e9ecf1}
.dw-head .dw-c.on{color:#38bdf8}
.dw-a{color:#38bdf8}

/* ── dev-wallets: the toolbar is grid furniture, not wallets furniture ──
   .dcx-bar was written for .dcx-grid, which has 12px of padding: the bar bleeds out of it
   with margin:-12px -12px 0 and pins itself with position:sticky;top:0;z-index:3 so it
   survives 120 launches scrolling underneath.

   .dcx-wal has NO padding, and it does not scroll -- .dw-rows does. So on this view the
   negative top margin lifted the bar 12px above the flex flow while sticky snapped it back
   down to 0, leaving it 12px taller than the space it occupies; z-index:3 then painted it
   straight over the column header and the first wallet row. The -12px sides made it 24px
   wider than the pane on top of that, so its contents no longer lined up with anything.

   Here it is just a band at the top of a column. Same padding, same border, no bleed. */
.dcx-wal > .dw-bar{position:static;margin:0;grid-column:auto}

/* .dw-head is a flex sibling of the scroller, not a row inside it, so it never scrolls out
   of view -- sticky bought nothing and only gave it a second way to climb to y=0. */
.dcx-wal > .dw-head{position:static}

/* ── dev-wallets: the filter strip ────────────────────────────────────
   Dev Hunter puts these in a 250px sidebar. There is no sidebar here -- the dev modal
   already spent that column -- so the same min/max pairs wrap across one strip under the
   toolbar. Nine metrics at 52px a box fit two rows at any width the modal opens at, and
   the strip is out of the flow entirely when nothing is set, so the default view loses
   no height to a control nobody is using. */
.dw-filters{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;flex:none;
  padding:6px 8px;background:#0d0d10;
  border-bottom:1px solid rgba(255,255,255,.10)}
.dw-filters.off{display:none}
.dw-fg{display:inline-flex;align-items:center;gap:3px}
.dw-fg>b{font:700 9px var(--f-mono, ui-monospace, Menlo, monospace);color:#6b7280;
  text-transform:uppercase;letter-spacing:.04em;margin-right:2px;white-space:nowrap}
.dw-fi{width:52px;background:#111114;border:1px solid rgba(255,255,255,.14);color:#e9ecf1;
  border-radius:3px;padding:2px 5px;
  font:10px var(--f-mono, ui-monospace, Menlo, monospace)}
.dw-fi:focus{outline:none;border-color:#38bdf8}
/* the spinners are 12px of hit area that changes the table under the cursor */
.dw-fi::-webkit-outer-spin-button,
.dw-fi::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dw-fi[type=number]{-moz-appearance:textfield}
.dw-freset{margin-left:auto;background:transparent;color:#6b7280;
  border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:2px 9px;cursor:pointer;
  font:700 9.5px var(--f-mono, ui-monospace, Menlo, monospace);letter-spacing:.04em}
.dw-freset:hover{color:#e9ecf1;border-color:rgba(255,255,255,.3)}

/* A FILTERED TABLE MUST NOT BE A QUIET ONE. The bounds persist across devs, so the row
   count you are looking at can be the product of something you set twenty minutes ago on
   a different dev -- the button carries the number of live bounds, in the accent, and the
   strip opens itself whenever there is one. */
.dw-ftog{background:transparent;color:#6b7280;border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r1, 4px);padding:3px 9px;cursor:pointer;
  font:700 10px var(--f-mono, ui-monospace, Menlo, monospace);letter-spacing:.04em}
.dw-ftog:hover{color:#e9ecf1}
.dw-ftog.on{color:#e9ecf1;border-color:rgba(255,255,255,.3)}
.dw-ftog.act{color:#38bdf8;border-color:rgba(56,189,248,.45);
  background:rgba(56,189,248,.12)}

/* ── dev-wallets: presets ─────────────────────────────────────────────
   First group in the strip, and the only one that is not a number, so it gets a rule
   after it rather than a heavier weight -- the eye should land on the bounds, not on
   the machinery for saving them. */
.dw-pg{padding-right:12px;margin-right:2px;border-right:1px solid rgba(255,255,255,.12)}
.dw-psel{background:#111114;border:1px solid rgba(255,255,255,.14);color:#e9ecf1;
  border-radius:3px;padding:2px 4px;max-width:150px;
  font:10px var(--f-mono, ui-monospace, Menlo, monospace)}
.dw-psel:focus{outline:none;border-color:#38bdf8}
.dw-pb{background:transparent;color:#6b7280;border:1px solid rgba(255,255,255,.14);
  border-radius:3px;padding:2px 7px;cursor:pointer;
  font:700 9.5px var(--f-mono, ui-monospace, Menlo, monospace);letter-spacing:.04em}
.dw-pb:hover{color:#e9ecf1;border-color:rgba(255,255,255,.3)}
.dw-pb.del:hover{color:#f6465d;border-color:rgba(246,70,93,.45)}

/* ── dev-wallets: a strip you assembled ───────────────────────────────
   Each filter is now a removable unit, so it needs to read as one: the label, the box and
   the ✕ sit in a bordered pill, and the picker that adds the next one sits at the end of
   the row you are building rather than in a separate control somewhere else. */
.dw-filters .dw-fg:not(.dw-pg):not(.dw-addg){
  border:1px solid rgba(255,255,255,.10);border-radius:4px;padding:1px 3px 1px 6px;
  background:rgba(255,255,255,.025)}
.dw-fx{background:transparent;border:0;color:#4b5563;cursor:pointer;padding:0 2px;
  font:11px var(--f-mono, ui-monospace, Menlo, monospace);line-height:1}
.dw-fx:hover{color:#f6465d}
.dw-fadd{background:#111114;border:1px dashed rgba(255,255,255,.22);color:#9aa2af;
  border-radius:4px;padding:2px 6px;cursor:pointer;
  font:10px var(--f-mono, ui-monospace, Menlo, monospace)}
.dw-fadd:hover:not(:disabled){border-color:#38bdf8;color:#e9ecf1}
.dw-fadd:disabled{opacity:.4;cursor:default}
.dw-fadd:focus{outline:none;border-color:#38bdf8}