/* Copyright (c) 2026 Pavel Bardukov. All rights reserved. See LICENSE. */
/* The fit editor: head bar, then three columns - item browser, the ring, the statistics.
   Each column scrolls on its own; the screen itself never does. */

#screen-fit{padding:8px 10px 10px}
/* The fit tabs (2026-09-27): the row that used to hold the hull, the fit name and the fit
   buttons (those went up into the app header). One tab per open fit, the active one lit with the
   theme accent; the tabs shrink before they scroll, and the bar scrolls without a visible bar. */
.ft-bar{position:relative; display:flex; align-items:flex-end; gap:3px; flex:0 0 auto; flex-wrap:nowrap; min-width:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  padding:0 2px; border-bottom:1px solid var(--accent2); margin-bottom:8px}
.ft-bar::-webkit-scrollbar{display:none}
.ft-tab{display:inline-flex; align-items:center; gap:6px; flex:0 1 220px; min-width:96px; max-width:240px;
  height:30px; box-sizing:border-box; padding:0 2px 0 6px; cursor:pointer; user-select:none;
  border:1px solid var(--border); border-bottom:none; border-radius:4px 4px 0 0;
  background-color:var(--bg-card); color:var(--dim); font-size:12px}
.ft-tab:hover{color:var(--text); border-color:var(--accent2)}
.ft-tab.on{color:var(--text); border-color:var(--accent); background-color:var(--primary-bg);
  box-shadow:inset 0 2px 0 var(--accent)}
/* The icon box keeps its size when the picture is missing. On the ACTIVE tab it is the way into
   the fit lists (as the head's hull icon was), lit while that view is open. */
.ft-icobox{display:inline-flex; flex:0 0 22px; width:22px; height:22px; border:1px solid transparent; border-radius:3px}
.ft-ico{width:22px; height:22px}
.ft-tab.on .ft-icobox:hover{border-color:var(--accent2)}
.ft-icobox.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent)}
.ft-txt{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.2}
.ft-txt b{font-weight:bold}
.ft-tab.on .ft-txt b{color:var(--accent)}
.ft-fit{margin-left:5px; color:var(--dim)}
button.ft-x,button.ft-x:active{flex:0 0 auto; padding:0 5px; font-size:13px; line-height:1.3; min-width:0;
  background-color:transparent; background-image:none; box-shadow:none; border-color:transparent;
  color:var(--dim); transform:none}
button.ft-x:hover{color:var(--red); border-color:transparent}
button.ft-add{flex:0 0 auto; align-self:center; margin:0 0 3px 4px; padding:0 9px; font-size:15px; line-height:1.4}
button.ed-fitmenu{padding:2px 10px; font-size:15px; line-height:1.2}
/* The inline name prompt (Save with no name, Rename): pywebview shows no window.prompt. It lives
   in the app header now (index.html `#ed-ask`); shell.css floats it under the fit bar. */
.ed-ask{display:inline-flex; align-items:center; gap:6px}
.ed-ask-label{font-size:12px; color:var(--dim); white-space:nowrap}
.ed-ask-in{width:180px}

/* ⚠️ `min-height:0` all the way down: without it a flex child refuses to be shorter than its
   content and the columns grow the page instead of scrolling. */
.ed-cols{flex:1 1 auto; min-height:0; display:flex; gap:10px}
.ed-browser{flex:0 0 340px; min-width:0; min-height:0; display:flex; flex-direction:column;
  background-color:var(--bg-panel); border:1px solid var(--border); border-radius:4px}
.ed-centre{flex:1 1 420px; min-width:300px; min-height:0; overflow-y:auto; padding:0 4px}
.ed-stats{flex:1 1 380px; min-width:300px; min-height:0; overflow-y:auto; padding-right:4px}
/* The three columns scroll by wheel/drag without a visible bar (the user's call, 2026-09-15). */
.ed-list,.ed-centre,.ed-stats{scrollbar-width:none}
.ed-list::-webkit-scrollbar,.ed-centre::-webkit-scrollbar,.ed-stats::-webkit-scrollbar{display:none}
/* The ring keeps the site's 480 ceiling, but in its own column rather than beside the panel. */
.ed-centre .fitwin{flex:none; width:100%; max-width:480px; margin:0 auto}
/* The rows under the ring (Drones … Buffer) start at the column's LEFT edge, level with the CPU
   readout (2026-09-27, the user's request): the label column keeps its width, so the cells still
   line up, only its text sits on the left. */
.ed-centre .rack-label{text-align:left}
.ed-stats .statcols{min-width:0}
.ed-stats .stat-problems:first-child{margin-top:0; border-top:none; padding-top:0}
.ed-violations h4{color:var(--red)}
.ed-violations ul{color:var(--amber)}

/* ── browser ── */
.ed-tabs{display:flex; gap:2px; padding:6px 6px 0; flex-wrap:wrap}
button.ed-tab{flex:1 1 auto; padding:4px 4px; font-size:11px}
.ed-filter{display:flex; align-items:center; gap:8px; padding:6px}
#ed-search{flex:1 1 auto; min-width:0}
.ed-chip-row{padding:0 6px}
.ed-chip-row:empty{display:none}
button.ed-chip{color:var(--accent); border-color:var(--accent); background-color:var(--primary-bg)}
/* The slot filter row: toggles in the game's order, a green check on each one that is on. */
.ed-slotf{display:flex; gap:3px; padding:0 6px 6px}
.ed-slotf:empty{display:none}
button.ed-sf{position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:32px; padding:2px; background-color:var(--bg-deep); border-color:var(--border); opacity:.6}
button.ed-sf.on{opacity:1; border-color:var(--accent)}
.ed-sf-ico{width:24px; height:24px}
.ed-sf-txt{font-size:10px}
/* The hull restriction sits apart from the slot kinds, as in the game's row. */
button.ed-sf.ed-hullf{margin-left:8px}
.ed-slotf > button.ed-hullf:first-child{margin-left:0}
/* "Fits" - words, at the far end of the row; alone there in the fits view. */
button.ed-sf.ed-fitsb{width:auto; padding:2px 10px; margin-left:auto; opacity:.85}
button.ed-sf.ed-fitsb.on{opacity:1}
button.ed-sf.ed-fitsb .ed-sf-txt{font-size:11px}
/* Fixed green, like the game's own check - not a theme colour. */
.ed-sf-check{position:absolute; right:1px; bottom:0; font-size:10px; font-style:normal; line-height:1;
  color:#4caf50; text-shadow:0 0 2px #000}
.ed-msg{padding:0 8px; min-height:0}
.ed-msg:empty{display:none}
.ed-list{flex:1 1 auto; min-height:0; overflow-y:auto; padding:2px 4px 8px}
.ed-list > .status{padding:8px}

.ed-fhead{display:flex; align-items:center; gap:6px; padding:4px 6px; cursor:pointer;
  user-select:none; color:var(--text); border-radius:3px}
.ed-fhead:hover{background-color:rgba(255,255,255,.05)}
.ed-folder.d0 > .ed-fhead{color:var(--accent); font-weight:bold; text-transform:uppercase;
  font-size:11px; letter-spacing:.5px}
.ed-folder.d1 > .ed-fhead{padding-left:16px; font-size:12px}
.ed-caret{display:inline-block; width:10px; font-size:10px; color:var(--dim); transition:transform .1s}
.ed-folder.open > .ed-fhead .ed-caret{transform:rotate(90deg)}
.ed-fico{flex:0 0 18px; width:18px; height:18px}
.ed-fname{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ed-count{color:var(--dim); font-size:10px; font-weight:normal}

/* `user-select:none`: rows are pressed in fast pairs (the double-click counter), and a burst of
   presses would otherwise select the names. Dragging is unaffected. */
.ed-row{display:flex; align-items:center; gap:6px; padding:2px 6px 2px 26px; cursor:default;
  border-radius:3px; border-left:2px solid transparent; user-select:none}
.ed-folder.d0 > .ed-fbody > .ed-row{padding-left:16px}
.ed-list > .ed-row{padding-left:6px}
.ed-row:hover{background-color:var(--primary-bg)}
.ed-row .ed-ico{width:24px; height:24px; flex:0 0 24px}
.ed-rname{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:12px}
.ed-cost{flex:0 0 auto; display:inline-flex; gap:6px; font-size:10px; color:var(--dim)}
.ed-cost i{font-style:normal}
/* CPU teal and reactor red, the ring's own gauge colours: fixed hex, never themed. */
.ed-c-cpu{color:#39c8b5}
.ed-c-pg{color:#d4483b}
.ed-c-cal{color:#9aa0a6}
/* What cannot go in RIGHT NOW stays listed - the reason is in the tooltip - but reads as spent. */
.ed-row.blocked{opacity:.45}
/* The meta family, as a thin edge: Tech II, storyline, faction, officer, deadspace. */
.ed-row.mg2{border-left-color:#d9a441}
.ed-row.mg3{border-left-color:#4caf50}
.ed-row.mg4{border-left-color:#39c8b5}
.ed-row.mg5{border-left-color:#b06fe6}
.ed-row.mg6{border-left-color:#4a9eff}
/* The fits view: a list's "Loading…" / error / "no fits" line inside its folder, and the
   library entry the fit on screen came from. */
.ed-list .ed-fstatus{padding:4px 16px; margin:0}
.ed-fitrow{cursor:pointer}
.ed-fitrow.cur .ed-rname{color:var(--accent)}

/* ── ring interactions ── */
.ed-centre .slot[data-rack]{cursor:pointer}
/* In the editor an empty slot is the thing a pilot clicks, so it has to be seen on the dark ring:
   the window's `.slot.empty{opacity:.5}` left it nearly invisible over the hull render. */
.ed-centre .ring-slot .slot.empty{opacity:.85; border-color:var(--border-lt);
  background-color:rgba(0,0,0,.55)}
.ed-centre .slot.empty[data-rack]:hover{opacity:.85; border-color:var(--accent2)}
/* Drop-hover has to beat `.slot.empty{opacity:.5}` and the active frame. */
.ed-centre .slot.drop,
.ed-centre .rack.drop .rack-slots,
.ed-centre .fitwin.drop .fit-ring{outline:2px dashed var(--green); outline-offset:2px}
.ed-centre .slot.drop{opacity:1; border-color:var(--green)}
.ed-bay{cursor:default}

/* ── fighter tubes and the hangar ── */
.ed-fighters{margin:4px 0 8px}
.ed-ftop{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.ed-fcounts{display:inline-flex; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--text)}
.ed-fcount.over{color:var(--red)}
.ed-tubes{display:flex; flex-wrap:wrap; gap:4px; padding-left:70px}
.ed-tube{position:relative; display:flex; flex-direction:column; align-items:center; gap:2px;
  width:66px; min-height:92px; padding:3px 2px; background-color:var(--bg-deep);
  border:1px solid var(--border); border-radius:3px; font-size:10px}
.ed-tube-n{position:absolute; left:3px; top:1px; color:var(--dim)}
.ed-tube-ico{width:32px; height:32px; margin-top:8px}
.ed-tube-q{display:inline-flex; align-items:center; gap:2px}
.ed-tube-q b{min-width:26px; text-align:center; font-weight:normal; color:var(--text)}
button.ed-tq, button.ed-tx{padding:0 4px; min-width:0; line-height:14px; font-size:11px;
  background-color:var(--bg-panel)}
button.ed-tx{position:absolute; right:1px; top:1px; padding:0 3px; color:var(--dim)}
button.ed-tx:hover{color:var(--red)}
.ed-tube-dps{color:var(--dim)}
/* Not launched (no slot left for its class): there, but doing nothing - as an offline module. */
.ed-tube.down .ed-tube-ico{filter:grayscale(1) brightness(.55)}
.ed-tube.down .ed-tube-dps{color:var(--red)}
.ed-tube.empty{justify-content:center; border-style:dashed; cursor:pointer; background-color:rgba(0,0,0,.55)}
.ed-tube.empty:hover{border-color:var(--accent2)}
.ed-tube-plus{font-size:20px; color:var(--dim)}
.ed-centre .ed-tube.sel{border-style:solid; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
.ed-centre .ed-tube.drop,
.ed-centre .ed-fighters.drop .ed-tubes{outline:2px dashed var(--green); outline-offset:2px}
.ed-hangar{padding:6px 0 0 70px; font-size:11px}
.ed-hangar-head{display:flex; align-items:center; gap:8px; margin-bottom:3px; color:var(--dim)}
.ed-hangar-head b{font-weight:normal; color:var(--text)}
.ed-hangar-head b.warn{color:var(--red)}
button.ed-fclear{padding:2px 8px; font-size:11px}
.ed-resv{position:relative; display:flex; align-items:center; gap:6px; padding:1px 22px 1px 2px;
  border-radius:3px; cursor:grab}
.ed-resv:hover{background-color:var(--primary-bg)}
.ed-resv-ico{width:20px; height:20px}
.ed-resv-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ed-resv button.ed-tx{top:3px}
/* The stats column's fighter hangar line over capacity (`statSections`, class from secItem). */
.ed-stats .sec-item.over b{color:var(--red)}

/* ── implants and boosters under Ammo ── */
.ed-centre .slot[data-headslot]{cursor:pointer}
/* Plugged by the character profile, not by the fit: there, but not the fit's to take off. */
.ed-centre .slot.imp-profile{border-style:dotted; border-color:var(--border-lt)}
.ed-centre .slot.imp-profile .sl-icon{opacity:.6}
.ed-centre .imp-rack.drop .rack-slots{outline:2px dashed var(--green); outline-offset:2px}

/* ── the cargo hold ──
   Since 2026-09-20 the hold is a SPOILER in the statistics column, directly above Required
   skills, and it wears that spoiler's own class (`button.sk-spoiler`, fitwindow.css) so the two
   cannot drift apart. Only what is different from it is written here. */
.ed-cargo-box{margin-top:6px}
.ed-stats button.sk-spoiler.ed-cargo-sp b.warn{color:var(--red)}
.ed-stats .ed-cargo-sp.drop,
.ed-stats .ed-cargo.drop{outline:2px dashed var(--green); outline-offset:2px}
.ed-cargo-head b.warn{color:var(--red)}
.ed-stats .ed-cargo{margin:6px 0 0}
.ed-cargo{margin:0 0 10px; padding:6px 8px; background-color:var(--bg-deep);
  border:1px solid var(--border); border-radius:4px; font-size:11px}
.ed-cargo-head{display:flex; align-items:center; gap:8px}
.ed-cargo-title{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent)}
.ed-cargo-head b{font-weight:normal; color:var(--text); white-space:nowrap}
.ed-cargo-list{max-height:260px; overflow-y:auto}
.ed-cargo-list .ed-cargo-empty{margin:4px 0; padding:0}
.ed-crow{display:flex; align-items:center; gap:6px; padding:1px 2px; border-radius:3px}
.ed-crow:hover{background-color:var(--primary-bg)}
.ed-crow-ico{flex:0 0 22px; width:22px; height:22px}
.ed-crow-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ed-crow-name small{margin-left:6px; color:var(--dim); font-size:10px}
.ed-cq{flex:0 0 auto; display:inline-flex; align-items:center; gap:2px}
.ed-crow.head .ed-cq b{min-width:78px; text-align:center; font-weight:normal; color:var(--dim)}
.ed-cq-in{width:52px; padding:0 3px; font-size:11px; text-align:right}
.ed-crow-vol{flex:0 0 70px; text-align:right; color:var(--dim); white-space:nowrap}
button.ed-cx{flex:0 0 auto; padding:0 4px; min-width:0; line-height:14px; font-size:11px;
  color:var(--dim); background-color:var(--bg-panel)}
button.ed-cx:hover{color:var(--red)}
@media (max-width:700px){ .ed-crow-vol{flex-basis:auto} .ed-cq-in{width:40px} }

/* ── the price of the fit ──
   The hold's spoiler and panel again, one block below it: same frame, same row height. The
   three number columns are fixed and right-aligned so a column of ISK reads as a column.
   ⚠️ Buttons take `background-color`, never the `background` shorthand - it would flatten
   the bevel every other button in this application has. */
.ed-price-box{margin-top:6px}
.ed-stats .ed-price{margin:6px 0 0}
.ed-price{margin:0 0 10px; padding:6px 8px; background-color:var(--bg-deep);
  border:1px solid var(--border); border-radius:4px; font-size:11px}
/* The "copy a buy order" icon on the head's right end (2026-09-27). A SIBLING laid over the
   spoiler button, not inside it (a button may not hold a button, and its click must not fold
   the spoiler); the head keeps room for it on the right. */
.ed-price-headwrap{position:relative}
.ed-price-headwrap button.sk-spoiler.ed-price-sp{padding-right:34px}
button.ed-price-copy{position:absolute; right:4px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:22px;
  margin:0; padding:0; min-width:0; line-height:1; font-size:12px; color:var(--dim);
  background-color:var(--bg-panel); border-color:var(--border)}
button.ed-price-copy:hover{color:var(--accent); border-color:var(--accent2)}
button.ed-price-copy.done{color:var(--green)}
.ed-price-list{max-height:320px; overflow-y:auto}
.ed-prow{display:flex; align-items:center; gap:6px; padding:1px 2px; border-radius:3px}
.ed-prow:hover{background-color:var(--primary-bg)}
.ed-prow-ico{flex:0 0 22px; width:22px; height:22px}
.ed-prow-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ed-prow-name small{margin-left:6px; color:var(--dim); font-size:10px}
.ed-prow-q{flex:0 0 34px; text-align:right; color:var(--dim)}
.ed-prow-unit{flex:0 0 86px; text-align:right; color:var(--dim); white-space:nowrap}
.ed-prow-sum{flex:0 0 96px; text-align:right; font-weight:normal; color:var(--text); white-space:nowrap}
.ed-prow-sum.muted{color:var(--dim)}
.ed-price-src{font-style:normal; color:var(--accent)}
.ed-price-sub{display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin:6px 0 2px; padding-top:4px; border-top:1px solid var(--border); color:var(--dim)}
.ed-price-sub b{font-weight:normal; color:var(--text); white-space:nowrap}
.ed-price-foot{margin-top:4px; color:var(--dim); font-size:10px}
.ed-price-warn{margin:6px 0 0}
@media (max-width:700px){ .ed-prow-unit{display:none} .ed-prow-sum{flex-basis:auto} }

/* ── the range chart ──
   The falloff curve a click on a Remote figure opens. Inline SVG, drawn by `remoteChartHtml`
   in fitwindow.js; the line colours are fixed hexes set on the elements themselves, like the
   damage-type colours, because a theme accent would give two modules the same line. */
/* ⚠️ `right` and `bottom` BOTH back to auto: `.popup` pins itself with those two, and a
   fixed-position variant that leaves them set is stretched between the pin and its own
   left/top - which collapsed this panel to the height of its title bar. */
.ed-chart{position:fixed; right:auto; bottom:auto; z-index:60; width:500px; max-width:94vw;
  padding:8px 10px; background-color:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px}
.rc-head{display:flex; align-items:center; gap:8px; font-size:11px; margin-bottom:4px}
.rc-head b{color:var(--accent); text-transform:uppercase; letter-spacing:.5px; font-weight:normal}
.rc-svg{display:block; width:100%; height:210px}
.rc-line{fill:none; stroke-width:1.5; opacity:.9}
.rc-total{fill:none; stroke:var(--accent); stroke-width:2.5}
.rc-tick line{stroke:var(--border); stroke-width:1}
.rc-tick text{fill:var(--dim); font-size:10px; text-anchor:middle}
.rc-cursor{stroke:var(--text); stroke-width:1; stroke-dasharray:3 3; opacity:.6}
.rc-cursor.hidden{display:none}
.rc-axis{display:flex; align-items:center; gap:8px; font-size:10px; color:var(--dim);
  margin-top:2px}
.rc-axis b{color:var(--text); font-weight:normal; white-space:nowrap}
.rc-legend{margin-top:6px; border-top:1px solid var(--border); padding-top:5px;
  max-height:120px; overflow-y:auto}
.rc-leg{display:flex; align-items:center; gap:6px; font-size:11px; padding:1px 0}
.rc-leg i{flex:0 0 10px; width:10px; height:3px; border-radius:2px}
.rc-leg-name{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.rc-leg-num{flex:0 0 auto; color:var(--text); white-space:nowrap}
.rc-leg-num.out{color:var(--dim)}

/* ── the buffer ──
   A scratch pad: items are dragged in and dragged out again, and nothing here is ever saved
   (`dpsView.buffer`, memory only). Since 2026-09-27 it is a row of the centre column under
   Bonuses, drawn like Implants and Boosters (`.rack.imp-rack`, `.slot` cells), so the drop
   outline is `.imp-rack.drop` above. Not a spoiler - what is in it is meant to be in sight. */
.ed-buf .rack-slots{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.ed-buf-hint{font-size:10px}
.ed-bufitem{cursor:grab}
.ed-bufitem:hover{border-color:var(--accent2)}
/* ⚠️ An <img> is draggable BY ITSELF. A buffer cell is small and the picture fills it, so the
   pilot always takes hold of the PICTURE: the browser then starts its own image drag, the cell's
   `draggable` never comes into play and in the app window (WebView2) the drag leaves the page
   altogether — dragging anything OUT of the buffer did nothing (user, 2026-09-21). The ring cell
   was pinned the same way on the same day (`.slot .sl-icon`, fitwindow.css); the browser rows and
   the hangar rows are wide enough that the icon is rarely grabbed, but the trap is identical. */
.ed-buf-ico, .ed-row .ed-ico, .ed-resv-ico{-webkit-user-drag:none; user-select:none}
/* An id this catalog does not know (an old buffer, a changed patch): something has to be seen. */
.ed-buf-q{position:absolute; right:2px; bottom:0; font-style:normal; font-size:10px; color:var(--dim)}
/* An abyssal module's number among the Buffer's modules of its type (2026-09-27): top right,
   violet, EVE's colour for abyssal gear - the number the pilot asked for. Never takes the pointer. */
.ed-buf-n{position:absolute; right:1px; top:0; padding:0 2px; font-style:normal; font-size:10px;
  line-height:12px; color:#fff; background-color:var(--purple); border-radius:2px; pointer-events:none}

/* ── the Projection row (2026-09-27) ──
   Modules another ship runs onto this one (`dpsView.projected`, memory only). Built like the
   Buffer; a cell is a switch, so it wears the ring's traffic-light frame (`st-active` green,
   `st-offline` dim), and the loaded script sits small in the corner as the ring shows a round. */
.ed-proj .rack-slots{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.ed-projitem{cursor:pointer}
.ed-proj-ch{position:absolute; left:0; bottom:0; width:15px; height:15px; line-height:0;
  pointer-events:none}
.ed-proj-ch img{width:15px; height:15px; -webkit-user-drag:none}

/* ── the incoming damage picker, on <body> (the Defense head's ⚙) ──
   ⚠️ `right`/`bottom` back to auto, or `.popup`'s pin stretches it (see .ed-chart). */
.popup.ed-dmgpop{position:fixed; right:auto; bottom:auto; z-index:1310; width:340px;
  max-width:94vw; padding:6px 8px; display:flex; flex-direction:column; gap:5px;
  background-color:var(--bg-panel); border:1px solid var(--border); border-radius:4px}
.ed-dmgpop .dp-head{display:flex; align-items:center; gap:8px; font-size:11px}
.ed-dmgpop .dp-head b{color:var(--accent); text-transform:uppercase; letter-spacing:.5px;
  font-weight:normal}
.ed-dmgpop .dp-search{width:100%}
.ed-dmgpop .dp-list{max-height:min(420px, 60vh); overflow-y:auto}
/* ⚠️ Scoped under `.ed-dmgpop`: `.popup-item{display:block}` comes later (fitwindow.css) and
   would win a tie - the `.ammo-opt` trap. */
.ed-dmgpop .popup-item.dp-row, .ed-dmgpop .popup-item.dp-folder{display:flex; align-items:center;
  gap:8px; width:100%; text-align:left}
.ed-dmgpop .dp-folder{font-size:11px; color:var(--dim)}
.ed-dmgpop .dp-folder.open{color:var(--text)}
.ed-dmgpop .dp-caret{flex:0 0 10px}
.ed-dmgpop .dp-row .dp-ico{flex:0 0 24px; width:24px; height:24px}
.ed-dmgpop .dp-group .dp-row{padding-left:18px}
.ed-dmgpop .dp-rname{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.ed-dmgpop .dp-row.on .dp-rname{color:var(--accent)}

/* ── abyssal modules ──
   Nothing here: the slot's look (`.slot.st-mut` has none since 2026-09-27) and the extra tooltip rows
   (`tipExtraHtml`) belong to fitwindow.js / .css, which own the cell. The editor only hangs
   `mutated` / `tip_note` / `tip_lines` on the ring entry (`edMutMark`). (2026-09-20)
   The inline prompt, though, is ours: it takes an EVE chat line, far longer than a fit name. */
.ed-ask-in.ed-ask-wide{width:340px}

button.ed-mode{display:inline-flex; align-items:center; padding:6px 10px;
  line-height:1; font-size:11px; background-color:var(--bg-deep); border-color:var(--border)}
button.ed-mode.on{color:var(--accent); border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent), var(--btn-edge-down-sm)}

/* ── context menu ──
   ⚠️ `.popup` pins itself with `right` and `bottom`; a menu placed by JS with `left`/`top` must
   reset both or it stretches between the two edges (see `.popup.ammo-popup` in fitwindow.css).
   `.ctx-menu` resets them already, and this selector repeats it so it does not depend on that. */
.popup.ctx-menu.ed-menu{position:fixed; right:auto; bottom:auto; z-index:1320; min-width:200px;
  max-height:min(460px, 80vh); overflow-y:auto}
.ed-menu .ed-opt{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:4px 10px 4px 6px; font-size:12px}
.ed-menu .ed-opt-ico{flex:0 0 22px; line-height:0}
.ed-menu .ed-opt-ico img{width:22px; height:22px}
.ed-menu .ed-opt-name{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ed-menu .ed-opt-more{flex:0 0 auto; color:var(--dim)}
.ed-menu .ed-opt.on .ed-opt-name{color:var(--accent)}
.ed-menu .ed-opt-note{flex:0 0 auto; color:var(--dim); font-size:11px}
.ed-menu .ed-menu-sep{height:1px; margin:4px 2px; background-color:var(--border)}
/* Section headers (T1 / T2 / Faction) in the editor's menus and in the ammo picker. The picker
   is drawn by fitwindow.js; its header style lives here, beside the menu's twin. */
.ed-menu .ed-menu-head,
.ammo-popup .ammo-head{padding:6px 8px 2px; font-size:10px; font-weight:bold; letter-spacing:.5px;
  text-transform:uppercase; color:var(--accent); user-select:none}
.ammo-popup .ammo-head:first-of-type{border-top:1px solid var(--border); margin-top:2px}

/* ── "Choose mutated attributes" (2026-09-27) ──
   A window over the editor, not a menu: `edMutWindow` appends it to the body and wires its own
   handlers. ⚠️ `right`/`bottom` back to auto, or `.popup`'s pin stretches it (see .ed-chart).
   Each row's slider track shows how GOOD the value is (`--mw-good` 0…100), fixed green/red
   like the traffic light, never a theme accent. */
.ed-mutwin{position:fixed; right:auto; bottom:auto; z-index:65; width:780px; max-width:96vw;
  padding:8px 12px 10px; background-color:var(--bg-panel); border:1px solid var(--border);
  border-radius:4px; font-size:12px}
.mw-head{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.mw-head b{color:var(--accent); text-transform:uppercase; letter-spacing:.5px; font-weight:normal}
.mw-sub{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.mw-sub small{display:block; color:var(--dim)}
.mw-ico{width:32px; height:32px}
.mw-plasmid{display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--dim)}
.mw-plasmid select{flex:1 1 auto}
.mw-rows{display:flex; flex-direction:column; gap:4px}
.mw-row{display:grid; grid-template-columns:minmax(200px,1.7fr) minmax(140px,1.3fr) 80px 34px 64px minmax(96px,.8fr);
  align-items:center; gap:6px; padding:2px 0}
.mw-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mw-dir{font-style:normal; color:var(--dim)}
.mw-range{width:100%; accent-color:rgb(calc(239 - var(--mw-good, 50) * 1.63), calc(83 + var(--mw-good, 50) * .92), calc(80 + var(--mw-good, 50) * .0))}
.mw-in{width:100%; padding:0 4px; text-align:right}
.mw-unit{color:var(--dim)}
.mw-mult{color:var(--dim); text-align:right; white-space:nowrap}
.mw-row.mw-good .mw-mult{color:var(--green)}
.mw-row.mw-bad .mw-mult{color:var(--red)}
.mw-span{font-size:10px; text-align:right; white-space:nowrap}
.mw-foot{display:flex; align-items:center; gap:6px; margin-top:10px}
button.mw-apply{color:var(--accent); border-color:var(--accent2)}
@media (max-width:700px){ .mw-row{grid-template-columns:1fr 1fr 70px 30px} .mw-mult, .mw-span{display:none} }