/* Fitting page styles. Built on the site tokens in styles.css (light + dark come from the tokens).
   Every class here starts with "fit-" so nothing collides with styles.css.
   Breakpoints: <= 420 small phone, <= 720 phone, 721-1100 tablet / small laptop, 1101+ wide. */

/* 1. Shared helpers ------------------------------------------------------------------------- */

/* Game glyphs are white-on-transparent images used as masks, so they take the text colour. */
.fit-glyph { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.g-high { --g: url("/fit-data/ui/glyph-high.webp"); }
.g-mid { --g: url("/fit-data/ui/glyph-mid.webp"); }
.g-low { --g: url("/fit-data/ui/glyph-low.webp"); }
.g-drone { --g: url("/fit-data/ui/glyph-drone.webp"); }
.g-crig { --g: url("/fit-data/ui/glyph-combat-rig.webp"); }
.g-erig { --g: url("/fit-data/ui/glyph-eng-rig.webp"); }
.g-drig { --g: url("/fit-data/ui/glyph-defense-rig.webp"); }
.g-offense { --g: url("/fit-data/ui/sec-offense.webp"); }
.g-defense, .g-shield { --g: url("/fit-data/ui/layer-shield.webp"); }
.g-armor { --g: url("/fit-data/ui/layer-armor.webp"); }
.g-structure { --g: url("/fit-data/ui/layer-structure.webp"); }
.g-capacitor { --g: url("/fit-data/ui/sec-capacitor.webp"); }
.g-targeting { --g: url("/fit-data/ui/sec-targeting.webp"); }
.g-navigation { --g: url("/fit-data/ui/sec-navigation.webp"); }

/* Small-caps label: same values as the site's shared label rule. */
.fit-label, .fit-cell-k, .fit-group-h, .fit-cmp-h, .fit-thisslot-h {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.fit-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.fit-good { color: var(--green-ink); }
.fit-bad { color: var(--red); }
.fit-unit { color: var(--muted); font-weight: 600; font-size: .86em; margin-left: 3px; }
.fit-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; line-height: 17px; }
.fit-tag.fit-tag-fitted { color: var(--green-ink); border-color: currentColor; }
.fit-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--ctrl); color: var(--ink); cursor: pointer; flex: none; }
.fit-iconbtn:hover { background: var(--cool); }
.fit-page button:focus-visible, .fit-page a:focus-visible, .fit-modal button:focus-visible, .fit-picker button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px; }

/* 2. Page shell and toolbar ------------------------------------------------------------------ */

.fit-page { padding-top: 16px; padding-bottom: 40px; }
.fit-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.fit-shipbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px 4px 6px; border: 1px solid var(--btn-line, var(--line));
  border-radius: var(--radius); background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; text-align: left; box-shadow: var(--shadow); }
.fit-shipbtn:hover { background: var(--cool); }
.fit-shipbtn .icon { width: 44px; height: 36px; object-fit: contain; }
.fit-shipbtn-name { display: block; font-weight: 800; font-size: 16px; line-height: 1.15; }
.fit-shipbtn-sub { display: block; font-size: 13px; color: var(--muted); }
.fit-chev { width: 12px; height: 12px; color: var(--muted); flex: none; }
.fit-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.fit-tools .btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
.fit-tools .btn svg { width: 16px; height: 16px; flex: none; }
.fit-tools .btn[disabled] { opacity: .45; cursor: default; }
.fit-more { position: relative; }
.fit-more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 180px; padding: 6px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow), 0 12px 30px -12px rgba(0,0,0,.35); }
.fit-more-pop button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 10px; border: 0;
  border-radius: 6px; background: none; color: var(--ink); cursor: pointer; }
.fit-more-pop button:hover { background: var(--cool); }
.fit-more-pop button.fit-danger { color: var(--red); }
.fit-tool-wide { display: inline-flex; }
.fit-more { display: none; }
/* Message line under the toolbar: game error texts (can't fit, not enough power) and ship-change notes. */
.fit-msg { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 8px 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 14px; line-height: 1.4; }
.fit-msg[hidden] { display: none; }
.fit-msg.is-error { background: var(--red-bg); border-color: transparent; }
.fit-msg-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fit-msg-x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; }
.fit-msg-x:hover { background: var(--cool); color: var(--ink); }

/* 3. Summary strip (phones only): the key numbers stay in view while editing ----------------- */

.fit-strip { display: none; }
.fit-strip:empty { display: none !important; }
.fit-strip-cell { display: flex; flex-direction: column; min-width: 0; }
.fit-cell-k { font-size: 11.5px; line-height: 1.2; }
.fit-cell-v { font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fit-cell-d { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 4. Main grid ------------------------------------------------------------------------------- */

.fit-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fit-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* 5. Stage: the one space surface on the page (ship header, slot ring, arcs) ------------------ */

.fit-stage { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); padding: 14px 16px 12px; }
/* Plain stage (owner 2026-11-04): one solid dark colour, no stars or gradient. */
.fit-stage.space { background: #1c2027; border: 1px solid #2a3039; }
.fit-stage > * { position: relative; z-index: 1; }
.fit-shiphead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fit-faction { display: block; font-size: 13px; color: var(--on-space-muted); font-weight: 600; }
.fit-shipname { font: inherit; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: #fff; background: none; border: 0; padding: 0; cursor: pointer; }
.fit-shipname:hover { text-decoration: underline; text-underline-offset: 3px; }
.fit-shipname .fit-raquo { color: var(--on-space-muted); font-weight: 600; margin-left: 4px; }
.fit-viewname { font-size: 13px; color: var(--on-space-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: 4px; }

/* The ring box is a size container, so slot positions scale with it (cqi units). */
.fit-ring { position: relative; container-type: inline-size; width: min(100%, 520px); aspect-ratio: 1; margin: 2px auto 0; }
.fit-ring::before, .fit-ring::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.fit-ring::before { inset: 8cqi; border: 1px solid rgba(255,255,255,.18); }
.fit-ring::after { inset: 15cqi; border: 1px solid rgba(255,255,255,.08); }
.fit-shipimg { position: absolute; left: 50%; top: 47%; width: 40cqi; height: auto; transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); pointer-events: none; user-select: none; }

/* Slot nodes: placed by angle like the game (0 deg = 3 o'clock, clockwise). Set --a inline. */
.fit-slot { --r: 42cqi; --hit: 8.2cqi; position: absolute; left: 50%; top: 50%; width: var(--hit); height: var(--hit);
  margin: calc(var(--hit) / -2) 0 0 calc(var(--hit) / -2); padding: 0; border: 0; background: none; cursor: pointer;
  transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))); display: flex; align-items: center; justify-content: center; }
.fit-slot-tile { position: relative; width: 7.6cqi; height: 7.6cqi; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.26); color: var(--on-space-muted); transition: transform .12s, border-color .12s; }
.fit-slot-tile .fit-glyph { width: 56%; height: 56%; opacity: .9; }
.fit-slot.is-fitted .fit-slot-tile { background: rgba(6,10,22,.7); border-color: rgba(255,255,255,.42); }
.fit-slot.is-fitted .fit-slot-tile img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.fit-slot:hover .fit-slot-tile { transform: scale(1.06); border-color: rgba(255,255,255,.6); }
.fit-slot.is-offline .fit-slot-tile { border-style: dashed; border-color: rgba(255,255,255,.55); }
.fit-slot.is-offline .fit-slot-tile img { filter: grayscale(1); opacity: .5; }
.fit-slot.is-active .fit-slot-tile { box-shadow: 0 0 0 2px var(--green); }
.fit-slot.is-over .fit-slot-tile { box-shadow: 0 0 0 2px var(--red); }
.fit-slot.is-short .fit-slot-tile { box-shadow: 0 0 0 2px var(--red); }
.fit-slot.is-selected .fit-slot-tile { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(255,255,255,.25); }
.fit-slot:focus-visible { outline: none; }
.fit-slot:focus-visible .fit-slot-tile { outline: 2px solid #fff; outline-offset: 2px; }
/* Divider tick between slot groups. */
.fit-div { --r: 42cqi; position: absolute; left: 50%; top: 50%; width: 6cqi; height: 1px; background: rgba(255,255,255,.35);
  transform-origin: 0 50%; transform: rotate(var(--a)) translateX(calc(var(--r) - 3cqi)); pointer-events: none; }

/* Power and drone arcs: one SVG over the ring (viewBox 0 0 100 100). Neutral fill, red when over. */
.fit-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.fit-arc-track { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.6; stroke-linecap: round; }
.fit-arc-fill { fill: none; stroke: var(--on-space); stroke-width: 1.6; stroke-linecap: round; transition: stroke-dasharray .18s; }
.fit-arc-fill.is-over { stroke: var(--red); }
.fit-arc-hit { fill: none; stroke: transparent; stroke-width: 7; pointer-events: stroke; cursor: help; }
.fit-pgread { position: absolute; left: 50%; top: 71%; transform: translateX(-50%); text-align: center; color: var(--on-space); white-space: nowrap;
  border: 0; background: none; font: inherit; padding: 2px 6px; border-radius: 6px; cursor: help; }
.fit-pgread:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fit-pgread .fit-label { color: var(--on-space-muted); display: block; }
.fit-pgread b { font-size: 15px; font-variant-numeric: tabular-nums; }
.fit-pgread.is-over b { color: #ff9a9a; }
.fit-tip { position: absolute; z-index: 5; left: 50%; top: 83%; transform: translateX(-50%); width: max-content; max-width: 70cqi; padding: 7px 10px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; line-height: 1.35; }

/* Stage footer: nanocore (left) and rig view toggle (right), glass buttons on space. */
.fit-stagefoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.fit-glass { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px 4px 6px; font: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--on-space); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.26); border-radius: 8px; cursor: pointer; }
.fit-glass:hover { background: rgba(255,255,255,.16); }
.fit-glass .fit-glyph { width: 20px; height: 20px; margin-left: 4px; }
.fit-glass .fit-coreico { width: 28px; height: 28px; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px dashed rgba(255,255,255,.35); }
.fit-glass img.fit-coreico { border-style: solid; object-fit: cover; }
.fit-glass:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fit-glass[hidden] { display: none; }

/* Rig view: ship name hides, module slots hide, rig slots show at the rig angles. */
.fit-ring .fit-rigslot, .fit-ring .fit-rigdiv { display: none; }
.fit-stage.is-rigs .fit-ring .fit-modslot, .fit-stage.is-rigs .fit-ring .fit-moddiv, .fit-stage.is-rigs .fit-pgread,
.fit-stage.is-rigs .fit-arcs, .fit-stage.is-rigs .fit-shipname { display: none; }
.fit-stage.is-rigs .fit-ring .fit-rigslot { display: flex; }
.fit-stage.is-rigs .fit-ring .fit-rigdiv { display: block; }
.fit-viewname { display: none; }
.fit-stage.is-rigs .fit-viewname { display: block; }
.fit-riglegend { display: none; position: absolute; left: 50%; top: 14%; transform: translateX(-50%); gap: 14px; font-size: 13px; color: var(--on-space-muted); white-space: nowrap; }
.fit-riglegend span { display: inline-flex; align-items: center; gap: 5px; }
.fit-riglegend .fit-glyph { width: 15px; height: 15px; }
.fit-stage.is-rigs .fit-riglegend { display: flex; }

/* 6. Stats card: the game's five sections, fixed order, one open at a time ------------------- */

.fit-stats { overflow: hidden; }
.fit-stats-empty { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--muted); }
.fit-pgline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fit-pgline b { font-size: 16px; font-variant-numeric: tabular-nums; }
.fit-sec + .fit-sec { border-top: 1px solid var(--line-2); }
.fit-sec-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 16px; border: 0; background: none;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fit-sec-head:hover { background: var(--cool); }
.fit-sec-head .fit-glyph { width: 22px; height: 22px; color: var(--muted); }
.fit-sec-title { font-weight: 700; font-size: 15px; }
.fit-sec-key { font-size: 13px; color: var(--muted); margin-left: 2px; }
.fit-sec-val { margin-left: auto; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fit-sec-head .fit-chev { transition: transform .15s; }
.fit-sec-head[aria-expanded="true"] .fit-chev { transform: rotate(180deg); }
.fit-sec-body { padding: 2px 16px 14px 48px; }
.fit-sec-body[hidden] { display: none; }
.fit-rows { margin: 0; }
.fit-row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.fit-row:first-child { border-top: 0; }
.fit-row dt { color: var(--muted); display: flex; align-items: center; gap: 8px; min-width: 0; }
.fit-row dd { margin: 0 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fit-row .fit-why { margin-left: 6px; }
.fit-dmgico { width: 18px; height: 18px; flex: none; }
.fit-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.fit-col { border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; }
.fit-col b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.fit-col .fit-none { color: var(--muted); font-weight: 600; font-size: 14px; }
.fit-layers { margin: 4px 0 8px; }
.fit-layers button { display: inline-flex; align-items: center; gap: 6px; }
.fit-layers .fit-glyph { width: 16px; height: 16px; }
.fit-layerhp { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0 6px; }
.fit-layerhp b { font-variant-numeric: tabular-nums; }
.fit-subtabs { display: flex; gap: 18px; margin: 4px 0 6px; }
.fit-subtabs .tab { padding: 6px 2px; font-size: 13.5px; }

/* "Why" button: small, quiet, opens the breakdown. */
.fit-why { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--ctrl); color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; flex: none; }
.fit-why:hover { color: var(--ink); background: var(--cool); }

/* 7. "Not shown in game": numbers the game UI does not show, kept apart from the five sections */

.fit-hidden { padding: 12px 16px 10px; }
.fit-hidden-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink); }
.fit-hidden-h svg { width: 18px; height: 18px; color: var(--muted); }
.fit-hidden-note { margin: 0 0 6px; font-size: 13px; color: var(--muted); }

/* 8. Lower tabs card: Modules list and All attributes ---------------------------------------- */

.fit-lower { margin-top: 16px; }
.fit-lower-tabs { padding: 0 16px; border-bottom: 1px solid var(--line); overflow-x: auto; }
/* Tabs here are buttons (they switch panels, not pages): reset the button look. */
button.tab { appearance: none; background: none; border: 0; border-bottom: 2.5px solid transparent; border-radius: 0; font: inherit; font-size: 14.5px; font-weight: 600; }
button.tab.active { border-bottom-color: var(--green); }
.fit-lower-tabs.tabs, .fit-modal .tabs { justify-content: flex-start; gap: 22px; }
.fit-lower-body { padding: 6px 16px 14px; }
.fit-group { margin-top: 10px; }
.fit-group-h { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.fit-group-h .fit-glyph { width: 16px; height: 16px; }
.fit-mrow { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-top: 1px solid var(--line-2); }
.fit-mrow .icon { width: 36px; height: 36px; }
.fit-mrow-slot { width: 66px; flex: none; white-space: nowrap; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit-mrow-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 0; padding: 0; font-family: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.fit-mrow-name:hover { text-decoration: underline; }
/* the whole row opens the slot menu (name button >= 24 px tall on phones) */
.fit-mrow { cursor: pointer; }
.fit-mrow-name { min-height: 32px; }
/* long press on slots / rows: no text selection, no callout */
.fit-slot, .fit-mrow, .fit-opt, .fit-sprow { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.fit-mrow.is-empty .fit-mrow-name { color: var(--muted); font-weight: 600; }
.fit-mrow .seg button { padding: 6px 10px; font-size: 12.5px; }
.fit-mrow .seg button[disabled] { opacity: .4; cursor: default; }
.fit-empty-ico { width: 36px; height: 36px; border-radius: 5px; border: 1px dashed var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--faint); flex: none; }

/* All attributes table. */
.fit-attrbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 6px; }
.fit-attrbar .lf-input { width: 240px; max-width: 100%; }
.fit-attrs { width: 100%; border-collapse: collapse; font-size: 14px; }
.fit-attrs th { text-align: left; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); }
.fit-attrs td { padding: 7px 6px; border-top: 1px solid var(--line-2); vertical-align: middle; }
.fit-attrs td.num, .fit-attrs th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fit-attrs td.num { font-weight: 700; }
.fit-attrs .fit-base { color: var(--muted); font-weight: 600; }
.fit-attrs tr.fit-changed td.num:not(.fit-base) { color: var(--ink); }
.fit-attrs .fit-tag { margin-left: 6px; }
.fit-attrs td.fit-whycell { width: 32px; text-align: right; }

/* 9. Module picker: column on wide screens, drawer on tablets, bottom sheet on phones ------- */

.fit-picker { display: none; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.fit-picker.open { display: flex; }
.fit-picker-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.fit-picker-head h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.fit-picker-head .fit-glyph { width: 20px; height: 20px; color: var(--muted); }
.fit-picker-head .fit-slotno { font-size: 13px; color: var(--muted); font-weight: 600; }
.fit-picker-head .pi-modal-x { margin-left: auto; width: 40px; height: 40px; }
.fit-grab { display: none; }
.fit-thisslot { padding: 10px 16px 12px; border-bottom: 1px solid var(--line); background: var(--warm); }
.fit-thisslot-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.fit-thisslot-top .icon { width: 40px; height: 40px; }
.fit-thisslot-top b { font-size: 15px; }
.fit-thisslot-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fit-thisslot-acts .btn { padding: 7px 12px; }
.fit-picker-filters { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--line-2); }
.fit-picker-filters .lf-input { width: 100%; }
.fit-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fit-chips .ct-chip { min-height: 32px; }
.fit-list { flex: 1; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; margin: 0; list-style: none; }
.fit-opt { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px; cursor: pointer; border-left: 3px solid transparent; }
.fit-opt:hover { background: var(--cool); }
.fit-opt[aria-selected="true"] { background: var(--blue-soft); border-left-color: var(--blue); }
.fit-opt .icon { width: 36px; height: 36px; }
.fit-opt-main { flex: 1; min-width: 0; }
.fit-opt-name { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.fit-opt-sub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--muted); }
.fit-opt-err { display: block; font-size: 13px; color: var(--red); }
.fit-opt.is-cant .fit-opt-name { color: var(--muted); }
.fit-opt-pg { text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; }
.fit-opt-pg b { display: block; font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fit-cmp { border-top: 1px solid var(--line); padding: 10px 16px 12px; background: var(--panel); }
/* Fit / Remove never move: the compare rows get a fixed box (the 6 base rows; extra rows scroll inside it), the same
   while it says "Select a module first" / "Loading fitting data". Drawer + sheet (fixed height): the box may shrink. */
.fit-picker > .fit-cmp { display: flex; flex-direction: column; flex: none; }
.fit-picker > .fit-cmp > #fmp-cmp { height: 136px; overflow-y: auto; overscroll-behavior: contain; }
.fit-picker > .fit-cmp > .fit-cmp-h, .fit-picker > .fit-cmp > .fit-cmp-btns { flex: none; }
@media (max-width: 1100px) {
  .fit-picker > .fit-cmp { flex: 0 1 auto; min-height: 0; }
  .fit-picker > .fit-cmp > #fmp-cmp { flex: 0 1 136px; height: auto; min-height: 0; }
}
.fit-cmp-rows { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 12px; margin: 6px 0 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.fit-cmp-rows dt { color: var(--muted); }
.fit-cmp-rows dd { margin: 0; text-align: right; font-weight: 700; }
.fit-cmp-rows dd.fit-cmp-d { min-width: 52px; font-weight: 700; }
.fit-cmp-rows .fit-neutral { color: var(--muted); }
.fit-cmp-btns { display: flex; gap: 8px; justify-content: flex-end; }
.fit-cmp-btns .btn { min-width: 96px; min-height: 40px; }
.fit-inline-err { flex: none; margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: var(--red-bg); color: var(--ink); font-size: 13px; line-height: 1.4; }
.fit-cmp-empty { margin: 6px 0 10px; font-size: 14px; color: var(--muted); }
.fit-scrim { display: none; }
/* Phone sheet: fade in (no clip-path, no transform): the box sits in place and takes taps from the first frame
   (a clip-path reveal hides the buttons from hit testing, so early taps landed on the scrim and closed the sheet). */
@media (max-width: 720px) {
  .fit-page .fit-picker.open { animation-name: fit-sheet-in; }
  /* The slot menu is short: size the sheet to it (the charge list scrolls inside the cap). */
  .fit-page .fit-picker.open:has(> .fit-thisslot[data-menu]) { height: auto; }
}
@keyframes fit-sheet-in { from { opacity: 0; } to { opacity: 1; } }

/* 10. Modals: fits manager, skills, nanocore, ship picker, ship info, why ------------------- */
/* Built on .pi-modal / .pi-modal-box from styles.css; these only widen and fill them. */

.fit-modal .pi-modal-box { max-width: 560px; }
.fit-modal.fit-modal-wide .pi-modal-box { max-width: 720px; }
.fit-modal .tabs { border-bottom: 1px solid var(--line); margin-top: 8px; }
.fit-mlist { list-style: none; margin: 0; padding: 0; }
.fit-mlist > li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.fit-mlist > li:first-child { border-top: 0; }
.fit-mlist .icon { width: 40px; height: 40px; }
.fit-mlist .fit-ship-ico { width: 52px; height: 42px; object-fit: contain; }
.fit-mlist-main { flex: 1; min-width: 0; }
.fit-mlist-main b { display: block; font-size: 15px; }
.fit-mlist-main span { display: block; font-size: 13px; color: var(--muted); }
.fit-mlist li.is-current { background: var(--blue-soft); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.fit-saverow { display: flex; gap: 8px; align-items: flex-end; }
.fit-saverow .lf-field { flex: 1; }
.fit-saverow .lf-input { width: 100%; }
.fit-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.fit-recolist { font-size: 13px; color: var(--muted); margin: 3px 0 0; }
.fit-skillrow { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line-2); }
.fit-skillrow .seg button { padding: 5px 9px; }
.fit-skel { display: block; height: 12px; border-radius: 4px; background: var(--line-2); }
.fit-desc { font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.fit-bonus h4 { margin: 10px 0 4px; font-size: 14px; }
.fit-bonus p { margin: 0; font-size: 14px; color: var(--muted); }
.fit-why-steps { list-style: none; margin: 0; padding: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.fit-why-steps li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-2); }
.fit-why-steps li:first-child { border-top: 0; }
.fit-why-steps .fit-op { width: 64px; flex: none; font-weight: 800; text-align: right; }
.fit-why-steps .icon { width: 28px; height: 28px; }
.fit-why-steps .fit-src { flex: 1; min-width: 0; }
.fit-why-steps .fit-src span { display: block; font-size: 13px; color: var(--muted); }
.fit-why-steps li.fit-why-total { border-top: 1.5px solid var(--ink); font-weight: 800; }
.fit-note { font-size: 13px; color: var(--muted); margin: 0; }
.fit-implants { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.fit-implant { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 8px;
  background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }

/* 11. Empty, loading and error states -------------------------------------------------------- */

.fit-state { padding: 40px 20px; text-align: center; color: var(--on-space-muted); }
/* No ship (owner 2026-11-04): the stage keeps its ship layout; a small round + sits where the ship picture sits. */
.fit-shipname.is-none { display: block; color: var(--on-space-muted); cursor: default; }
.fit-shipname.is-none:hover { text-decoration: none; }
.fit-addship { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: clamp(48px, 12cqi, 64px); height: clamp(48px, 12cqi, 64px);
  border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--on-space); background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.35); transition: background .12s, border-color .12s; }
.fit-addship svg { width: 46%; height: 46%; }
.fit-addship:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.fit-addship:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fit-ring-empty .fit-pgread { cursor: default; }
.fit-glass:disabled { opacity: .5; cursor: default; }
.fit-glass:disabled:hover { background: rgba(255,255,255,.10); }
.fit-state h2 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.fit-state p { margin: 0 0 14px; }
.fit-ring.is-loading::before { border-color: rgba(255,255,255,.10); }
.fit-skelring { position: absolute; inset: 8cqi; border-radius: 50%; border: 7cqi solid rgba(255,255,255,.06); animation: fit-pulse 1.4s ease-in-out infinite; }
@keyframes fit-pulse { 50% { opacity: .45; } }
.fit-stats .skel-row { padding: 14px 16px; }
.fit-err { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--red-bg); color: var(--ink); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.fit-err .btn { margin-left: auto; }
.fit-err[hidden] { display: none; }

/* 12. Wide screens (1101+): stage left, stats (or picker) right ------------------------------ */

@media (min-width: 1101px) {
  .fit-grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
  .fit-side { position: sticky; top: 12px; }
  .fit-picker { max-height: max(520px, calc(100vh - 150px)); }
  .fit-page.is-picking .fit-stats, .fit-page.is-picking .fit-hidden { display: none; }
}
@media (min-width: 1280px) {
  .fit-grid { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
}

/* 13. Tablets and small laptops (721-1100): picker is a right drawer ------------------------- */

@media (min-width: 721px) and (max-width: 1100px) {
  .fit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fit-picker { position: fixed; z-index: 46; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow), -12px 0 40px -16px rgba(0,0,0,.45); animation: fit-in-right .26s ease-out; }
  .fit-page.is-picking .fit-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(20,25,35,.35); }
  @keyframes fit-in-right { from { transform: translateX(100%); } }
}
@media (min-width: 721px) and (max-width: 860px) {
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .fit-ring { width: min(100%, 460px); }
}

/* 14. Phones (<= 720): one column, summary strip, bottom sheet ------------------------------ */

@media (max-width: 720px) {
  .fit-page { padding-top: 10px; }
  .fit-toolbar { gap: 8px; }
  .fit-shipbtn { width: 100%; }
  .fit-shipbtn .fit-chev { margin-left: auto; }
  .fit-tools { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .fit-tools .btn { padding: 8px 11px; }
  .fit-tool-wide { display: none !important; }
  .fit-more { display: block; margin-left: auto; }
  .fit-strip { display: flex; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 47; margin: 0 -16px 12px; padding: 7px 16px;
    background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: 0 6px 14px -12px rgba(0,0,0,.35); }
  .fit-stage { padding: 12px 8px 10px; border-radius: 14px; }
  .fit-shiphead { padding: 0 6px; }
  .fit-shipname { font-size: 21px; }
  .fit-stagefoot { padding: 0 4px; }
  .fit-sec-body { padding-left: 16px; }
  .fit-picker { position: fixed; z-index: 46; left: 0; right: 0; bottom: 0; height: 74dvh; max-height: calc(100dvh - 64px);
    border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -12px 40px -12px rgba(0,0,0,.45); animation: fit-in-up .26s ease-out; }
  .fit-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto -4px; }
  .fit-page.is-picking .fit-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(20,25,35,.30); }
  @keyframes fit-in-up { from { transform: translateY(100%); } }
  .fit-lower-body { padding: 4px 12px 12px; }
  .fit-lower-tabs { padding: 0 12px; }
  .fit-mrow { flex-wrap: wrap; }
  .fit-mrow-name { flex: 1 1 140px; }
  .fit-mrow .seg { margin-left: 62px; }
  .fit-page.is-picking .fit-strip { position: fixed; top: 0; left: 0; right: 0; margin: 0; }
  .fit-mrow-slot { width: auto; min-width: 40px; white-space: nowrap; }
  .fit-attrs .fit-hide-sm { display: none; }
  .fit-modal .pi-modal-box { padding: 14px 14px 16px; }
  .fit-saverow { flex-wrap: wrap; }
  .fit-saverow .btn { width: 100%; }
}
@media (max-width: 420px) {
  .fit-cell-v { font-size: 13.5px; }
  .fit-strip { gap: 4px; padding: 7px 12px; margin: 0 -16px 10px; }
  .fit-cols { grid-template-columns: 1fr; }
  .fit-col { display: flex; justify-content: space-between; align-items: baseline; }
  .fit-col b { display: inline; }
  .fit-glass { font-size: 13px; padding-right: 10px; }
  /* one toolbar row at 360: labels never wrap, Undo shows its icon only (name kept for screen readers) */
  .fit-tools .btn { white-space: nowrap; padding: 8px 10px; }
  #fit-skills { min-width: 0; flex: 0 1 auto; }
  #fit-skills > span { overflow: hidden; text-overflow: ellipsis; }
  #fit-undo span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Short landscape phones: keep the sheet usable. */
@media (max-height: 500px) and (max-width: 1100px) {
  .fit-picker { height: auto; top: 8px; max-height: none; }
}

/* 15. Reduced motion: styles.css already turns transitions off; also stop the keyframes here. */

@media (prefers-reduced-motion: reduce) {
  .fit-picker, .fit-skelring { animation: none !important; }
  .fit-slot:hover .fit-slot-tile { transform: none; }
}

/* 16. Fits manager add-on (fitting-fits.js): saved fits rows, scope switch, rename, delete confirm */

.fit-fits-note { margin-top: 6px; }
.fit-fits-note.is-error { color: var(--red); font-weight: 600; }
.fit-fits-scope { margin: 10px 0 4px; }
.fit-fits-list .fit-mlist-main b { overflow-wrap: anywhere; }
.fit-fits-list .fit-fits-src { font-size: 12.5px; }
.fit-fits-acts { display: flex; gap: 6px; flex: none; }
.fit-fits-rename { width: 100%; }
.btn.fit-fits-confirm { color: var(--red); border-color: var(--red); }
.fit-fits-empty { padding: 28px 12px; }
@media (max-width: 720px) {
  .fit-fits-list > li { flex-wrap: wrap; }
  .fit-fits-list .fit-mlist-main { flex-basis: calc(100% - 64px); }
  .fit-fits-list > li > .btn { width: 100%; }
  .fit-fits-acts { width: 100%; }
  .fit-fits-acts .btn { flex: 1; }
}

/* 17. Skills, Nanocore and Implants add-ons (fitting-skills.js, fitting-nanocore.js) ------------ */
.fit-sk, .fit-nc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fit-sk-presets { align-self: flex-start; max-width: 100%; }
.fit-sk-tl { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit-sk-tl b { color: var(--ink); }
.fit-sk-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fit-sk-tools .lf-input { flex: 1 1 180px; min-width: 0; }
.fit-sk-tools .lf-sort { flex: 0 1 200px; min-width: 0; max-width: 100%; }
.fit-sk-setgrp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.fit-sk-setgrp[hidden] { display: none; }
.fit-sk-count { margin: 0; font-size: 12.5px; color: var(--muted); }
.fit-sklist { min-width: 0; }
.fit-skgrp { margin: 12px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fit-skgrp:first-child { margin-top: 0; }
.fit-skrow { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line-2); }
.fit-skrow[hidden], .fit-skgrp[hidden] { display: none; }
.fit-skname { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.fit-sklv { flex: none; }
.fit-sklv button, .fit-sk-setgrp .seg button { padding: 6px 10px; min-width: 32px; }

.fit-nclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.fit-ncitem { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.fit-ncitem.active { border-color: var(--green); background: var(--blue-soft); }
.fit-ncico { width: 32px; height: 32px; flex: none; object-fit: contain; border-radius: 6px; background: var(--line-2); }
.fit-ncname { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fit-nctag { flex: none; font-size: 12px; color: var(--muted); }
.fit-ncsel { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.fit-ncsel .fit-label { margin: 0; }
.fit-nclv { margin: 0; font-size: 13px; color: var(--muted); }
.fit-nclv b { color: var(--ink); }
.fit-ncaff { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--line-2); }
.fit-ncaffl { flex: 0 0 100%; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fit-ncpool.seg { display: flex; flex-wrap: wrap; gap: 6px; border: 0; overflow: visible; max-width: 100%; }
.fit-ncpool.seg button { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; white-space: normal; text-align: left; min-height: 36px; }
.fit-ncpool.seg button + button { border-left: 1px solid var(--line); }
.fit-ncstep { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.fit-ncstep .btn { min-width: 38px; justify-content: center; }
.fit-ncval { font-size: 14px; min-width: 96px; text-align: center; }
.fit-nclim { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; font-size: 13px; }
.fit-muted { color: var(--muted); }
.fit-imp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 6px 4px 6px 10px; border: 1px solid var(--line); border-radius: 8px; grid-column: 1 / -1; }
.fit-imp .fit-ncname { font-size: 13.5px; font-weight: 600; }
.fit-implv { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.fit-implv .lf-input { width: 72px; }
.fit-imppick { display: flex; flex-direction: column; gap: 8px; }
.fit-imppick .lf-input { width: 100%; }
.fit-implist { max-height: 320px; overflow-y: auto; }
@media (max-width: 720px) {
  .fit-sklv button, .fit-sk-setgrp .seg button { padding: 6px 7px; min-width: 30px; }
  .fit-skrow { flex-wrap: wrap; gap: 2px 10px; padding: 4px 0; }
  .fit-skname { flex-basis: 100%; }
  .fit-nclist { grid-template-columns: 1fr; }
}

/* 16. Pickers (fitting-pickers.js): ship picker modal + module picker filters -------------- */
.fit-pickbar { display: flex; gap: 8px; align-items: center; }
.fit-pickbar .lf-input { flex: 1; min-width: 0; width: auto; }
.fit-pickbar .ct-filter-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.fit-filters { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 2px; }
.fit-filters[hidden] { display: none; }
.fit-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); min-height: 32px; cursor: pointer; }
.fit-sortlbl { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fit-plnote { display: block; font-size: 12.5px; color: var(--muted); font-style: italic; }
.fit-modal .fit-chips { margin: 8px 0; }
.fit-modal .fit-label { display: block; margin: 8px 0 2px; }
.fit-sprow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 4px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.fit-sprow:hover { background: var(--cool); }
.fit-mlist > li:has(> .fit-sprow) { padding: 0; }
.fit-sprow .fit-ship-ico { width: 52px; height: 42px; object-fit: contain; flex: none; }
.fit-list:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fit-picker .fit-glyph + .fit-opt-main, .fit-opt > .fit-glyph { width: 36px; height: 36px; color: var(--muted); flex: none; }
/* long module lists: rows off screen skip layout and paint (R2 #8) */
.fit-opt { content-visibility: auto; contain-intrinsic-size: auto 52px; }
/* phone ring: each slot answers taps on a 40 px strip along its radius, grown outward only (just inside the ring sit
   the powergrid / capacitor arc tips); the tile keeps its size (FIXLIST 10). Across the ring the slots already
   touch, so the strip stays one slot wide there, and only the strip takes taps (square boxes overlap on diagonals). */
@media (max-width: 720px) {
  .fit-slot { pointer-events: none; }
  .fit-slot::before { content: ""; position: absolute; left: 0; top: 0; width: max(100%, 40px); height: 100%;
    transform-origin: calc(var(--hit) / 2) 50%; transform: rotate(var(--a)); pointer-events: auto; }
}

/* 18. Hidden data add-on (fitting-attrs.js): All attributes table, inline why rows, "Not shown in game" card */
.fit-attrs-items { margin: 8px 0 2px; }
.fit-attrs-items .ct-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit-attrs-items .fit-unit { font-size: 12px; }
.fit-attrs-scroll { max-width: 100%; overflow-x: auto; }
.fit-attrs td:first-child { overflow-wrap: anywhere; }
.fit-attrs .fit-aname { color: var(--ink); }
.fit-attrv { background: none; border: 0; padding: 2px 4px; margin: -2px -4px; border-radius: 5px; font: inherit; font-weight: 700; color: inherit;
  cursor: pointer; text-decoration: underline dotted var(--faint); text-underline-offset: 3px; white-space: nowrap; }
.fit-attrv:hover, .fit-attrv[aria-expanded="true"] { background: var(--cool); color: var(--ink); }
.fit-attrs tr.fit-whyrow > td { padding: 2px 6px 8px 14px; border-top: 0; background: var(--cool); border-radius: 0 0 6px 6px; }
.fit-attrs .fit-why-steps .fit-src { overflow-wrap: anywhere; }
.fit-attrs-empty { margin: 8px 0 0; }
.fit-why-steps .fit-noico { width: 28px; height: 28px; flex: none; }
.fit-hidden-sub { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 10px 0 2px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fit-hidden-sub span { font-weight: 600; font-size: 12.5px; color: var(--muted); }
.fit-hidden .fit-row dt { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .fit-why-steps .fit-op { width: auto; min-width: 52px; }
}

/* D2 polish: in the phone sheet and tablet drawer the group chips scroll in one row, so the module list stays in view. */
@media (max-width: 1100px) {
  #fmp-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  #fmp-groups .ct-chip { flex: none; }
}

/* 19. Rig integrator add-on (fitting-integrators.js): efficiency, chosen sub rigs, stat change, rigs to add */
.fit-integ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fit-integ-host { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fit-integ-list, .fit-integ-fx, .fit-integ-opts { list-style: none; margin: 0; padding: 0; min-width: 0; }
.fit-integ-sub { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line-2); padding: 4px 0; }
.fit-integ-b { display: block; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fit-integ-fx li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 4px 0; border-top: 1px solid var(--line-2); font-size: 13px; }
.fit-integ-fx b { font-variant-numeric: tabular-nums; }
.fit-integ-find[hidden] { display: none; }
.fit-integ-find .lf-input { width: 100%; }
.fit-integ-opts { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.fit-integ-opts .fit-skgrp { margin: 8px 0 0; }
.fit-integ-opt .fit-ncitem:disabled { cursor: default; opacity: .55; }
.fit-integ-why { display: block; margin: 2px 0 0 10px; font-size: 12px; color: var(--red); }

/* integrator short of sub rigs (game texts) + its sub rigs under it in the Modules list */
.fit-integ-short { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: var(--red-bg); color: var(--ink); font-size: 13px; line-height: 1.4; }
.fit-tag.fit-tag-short { color: var(--red); border-color: currentColor; text-transform: none; letter-spacing: 0; }
.fit-mrow.fit-mrow-sub { min-height: 40px; padding-left: 24px; cursor: default; }
.fit-mrow-sub .icon { width: 28px; height: 28px; }
.fit-mrow-subname { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }