*{box-sizing:border-box;margin:0;padding:0;} /* --user-font-scale (js/theme.js setFontScale()) is folded into zoom, not font-size: most font-sizes in this file are fixed px values, not em/rem, so they don't inherit a root font-size change. zoom scales everything uniformly instead, text included. */ html{font-size:clamp(14px,1.1vw + 0.6rem,16px);zoom:calc(1.2 * var(--user-font-scale));} /* The gradient layer is a faint wash of the active vault's color (--vault-color-active-bg-faint, set on body by applyActiveVaultAccent() in app.js) — unset (transparent) on non-vault routes, Private Vault, and vaults with no color picked. */ body{min-height:100vh; background:linear-gradient(var(--vault-color-active-bg-faint, transparent), var(--vault-color-active-bg-faint, transparent)) var(--bg); font-family:'Share Tech Mono','Courier New',monospace;color:var(--text-secondary);} :root{ --accent:#00D4FF; /* primary accent — main interactive color */ --accent-2:#FF4FD8; /* secondary accent — market/pink, used sparingly */ /* Categorical ore palette for the mining composition bars — fixed order 1→6, never cycled (band 7+ uses --ore-more); the 2px segment gaps and legend swatches are the required secondary encoding since color alone isn't a safe channel for colorblind users. */ --ore-1:#00A3CC; --ore-2:#C08A00; --ore-3:#C93BB0; --ore-4:#2F9E6E; --ore-5:#8A5FE0; --ore-6:#C25E33; --ore-more:rgba(255,255,255,0.35); --danger:#CC3333; --text-dim:#8A7EAC; /* lightened to clear 4.5:1 (AA) against both page and modal surfaces */ --text:#D4C9E8; /* clears WCAG AAA (7:1) against page/modal/form-field backgrounds */ /* Button system — see STYLE_GUIDE.md. Every clickable control (besides chips/badges, a deliberately distinct pill pattern for filters/tags) is built from .btn + one size + one variant class. */ --btn-radius:4px; --btn-radius-icon:3px; --btn-font:12px; --btn-font-sm:10px; --btn-letter:1px; --btn-icon-size:28px; /* ── Theme surface tokens (light/dark/high-contrast, js/theme.js) ────── Dark is the unstyled default — see [data-theme="light"] and [data-contrast="high"] below for the other combinations. */ --bg:#0C0714; --bg-input:#0D0716; --bg-panel:#150C20; --bg-dropdown:#1E1330; --border-strong:#3A2A50; --text-secondary:#B8AACE; --text-tertiary:#9A8CB8; --accent-hover:#33DFFF; --on-accent:#140A1C; --danger-text:#CC5555; --danger-text-hover:#E08080; --success:#3AE87A; --warning:#E8A93A; --component:#B06AFF; /* Distinct 4th hue for the marketplace/manifest "I" type-badge (Items of Interest) — with three kinds in one list (M/C/I) the badge needs to be told apart by color, not just the letter. */ --interest:#D9B54D; --buy:#4FD8FF; --chip-text:#5A9AAA; --on-warning:#412402; /* dark-mode --warning is a bright amber (dark text reads on it); light/HC-light are dark olive/brown, so their overrides flip this to white */ /* Raw (unwrapped) RGB triplets — every tinted-wash/border rule in this file reads rgba(var(--x-rgb),X) instead of a literal rgba(R,G,B,X), so one variable per hue flips every such wash to the active theme. --ore-* and the two always-dark hover-tooltips are deliberately NOT wired to this. */ --overlay-rgb:255,255,255; --bg-rgb:12,6,18; --accent-rgb:0,212,255; --accent-2-rgb:255,79,216; --danger-rgb:204,51,51; --warning-rgb:232,169,58; --success-rgb:58,232,122; --component-rgb:176,106,255; --interest-rgb:217,181,77; --buy-rgb:79,216,255; --muted-rgb:88,72,112; --user-font-scale:1; /* Shared elevation shadows — every raised surface (tiles, dropdowns, panels, modals) reads one of these four instead of its own hand-picked rgba(0,0,0,X). A fixed black shadow reads as subtle on the dark theme's near-black surfaces but glarier on the light theme's near-white ones, so the light override below swaps to a softer palette-tinted shadow rather than just lowering opacity. */ --shadow-tile:0 4px 12px rgba(0,0,0,0.35); --shadow-dropdown:0 8px 24px rgba(0,0,0,0.5); --shadow-panel:0 8px 40px rgba(0,0,0,0.6); --shadow-modal:0 20px 60px rgba(0,0,0,0.7); } /* Light theme — same token set, shapes/borders/spacing as dark; kept in the same accent hue family (STYLE_GUIDE: don't introduce a third accent hue) but darkened enough to clear WCAG AA against a near-white page. */ [data-theme="light"]{ --bg:#F3EFF9; /* Deliberately a hair darker than --bg-panel (#FFFFFF) — dark theme differentiates its own input/panel the same way (#0D0716 vs #150C20). An identical --bg-input would make fields disappear into .panel. */ --bg-input:#F7F4FC; --bg-panel:#FFFFFF; --bg-dropdown:#FFFFFF; --border-strong:#D6CCE6; --accent:#00748F; --accent-2:#B0158F; --accent-hover:#005E73; --danger:#A32828; --danger-text:#A32828; --danger-text-hover:#7D1E1E; --success:#1E7A44; --warning:#8A5E00; --component:#6B3FBF; --interest:#8A6300; --buy:#006F87; --chip-text:#006F87; --on-warning:#FFFFFF; --text:#221731; --text-dim:#5C5072; --text-secondary:#382C4B; --text-tertiary:#5C5072; --on-accent:#FFFFFF; --overlay-rgb:20,10,30; --bg-rgb:243,239,249; --accent-rgb:0,116,143; --accent-2-rgb:176,21,143; --danger-rgb:163,40,40; --warning-rgb:138,94,0; --success-rgb:30,122,68; --component-rgb:107,63,191; --interest-rgb:138,99,0; --buy-rgb:0,111,135; --muted-rgb:148,138,168; /* Softer + palette-tinted (not pure black) — a black shadow at dark- theme's opacity reads as glary/heavy against a near-white surface. */ --shadow-tile:0 2px 8px rgba(20,10,30,0.10); --shadow-dropdown:0 4px 14px rgba(20,10,30,0.14); --shadow-panel:0 6px 24px rgba(20,10,30,0.16); --shadow-modal:0 12px 36px rgba(20,10,30,0.20); } /* High contrast — layers on top of either base theme (independent toggle, js/theme.js setContrastMode()). Pushes "dim"/secondary text to the same near-max-contrast as primary text and swaps the panel/border wash for a solid border, targeting WCAG AAA (≥7:1) instead of the base themes' AA. */ [data-theme="dark"][data-contrast="high"]{ --bg:#000000; --bg-input:#000000; --bg-panel:#0A0510; --bg-dropdown:#0A0510; --border-strong:#FFFFFF; --accent:#4DEBFF; --accent-hover:#7FF3FF; --accent-2:#FF7FE8; --danger:#FF6B6B; --danger-text:#FF6B6B; --danger-text-hover:#FF9A9A; --success:#6BFFA0; --warning:#FFD166; --component:#C9A6FF; --interest:#FFDB70; --buy:#7FF3FF; --chip-text:#5A9AAA; --on-warning:#412402; --text:#FFFFFF; --text-dim:#FFFFFF; --text-secondary:#FFFFFF; --text-tertiary:#E5E5E5; --on-accent:#000000; --bg-rgb:0,0,0; --accent-rgb:77,235,255; --accent-2-rgb:255,127,232; --danger-rgb:255,107,107; --warning-rgb:255,209,102; --success-rgb:107,255,160; --component-rgb:201,166,255; --interest-rgb:255,219,112; --buy-rgb:127,243,255; --muted-rgb:255,255,255; } [data-theme="light"][data-contrast="high"]{ --bg:#FFFFFF; --bg-input:#FFFFFF; --bg-panel:#FFFFFF; --bg-dropdown:#FFFFFF; --border-strong:#000000; --accent:#005A70; --accent-hover:#00748F; --accent-2:#8A0F72; --danger:#8A0000; --danger-text:#8A0000; --danger-text-hover:#6B0000; --success:#0F5C2E; --warning:#6B4700; --component:#4B1F91; --interest:#5C4300; --buy:#005A70; --chip-text:#005E73; --on-warning:#FFFFFF; --text:#000000; --text-dim:#000000; --text-secondary:#000000; --text-tertiary:#1A1A1A; --on-accent:#FFFFFF; --overlay-rgb:0,0,0; --bg-rgb:255,255,255; --accent-rgb:0,90,112; --accent-2-rgb:138,15,114; --danger-rgb:138,0,0; --warning-rgb:107,71,0; --success-rgb:15,92,46; --component-rgb:75,31,145; --interest-rgb:92,67,0; --buy-rgb:0,90,112; --muted-rgb:0,0,0; } /* Thicker borders + focus rings app-wide in high contrast — the low- opacity 1px borders used everywhere else are the main thing AA-vs-AAA contrast can't fix by recoloring alone. */ [data-contrast="high"] .btn,[data-contrast="high"] .panel, [data-contrast="high"] input:not([type=checkbox]):not([type=radio]):not([type=range]), [data-contrast="high"] select,[data-contrast="high"] textarea{border-width:2px;} [data-contrast="high"] :focus-visible{outline-width:3px;} /* ── Button system ──────────────────────────────────────────────────── .btn = shared box model for every button in the app. Size: (default = md, ~38px tall) | .btn-sm (~28px) | .btn-icon (28x28, square) Variant: .btn-primary (solid accent — the one committing action per view) .btn-accent (outlined accent — persistent page-level CTA) .btn-secondary (default ghost — Cancel, non-destructive) .btn-danger (outlined red — destructive) .btn-ghost (muted, for low-emphasis repeated controls) Variants may combine with .active (selected/toggled-on, accent-tinted). */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; font-family:inherit;font-size:var(--btn-font);letter-spacing:var(--btn-letter); padding:10px 16px;border-radius:var(--btn-radius);border:1px solid transparent; cursor:pointer;white-space:nowrap;line-height:1;background:none;color:var(--text-dim); transition:background .12s,border-color .12s,color .12s;} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .btn:disabled{opacity:0.35;cursor:not-allowed;} .btn-sm{padding:6px 10px;font-size:var(--btn-font-sm);border-radius:var(--btn-radius-icon);} .btn-icon{width:var(--btn-icon-size);height:var(--btn-icon-size);padding:0;flex-shrink:0;font-size:12px;border-radius:var(--btn-radius-icon);} /* Wraps a disabled icon button so its title tooltip is reachable on hover — disabled controls never receive mouseover/focus themselves, but the wrapper (not disabled) does. Sized to hug the button, not a layout box. */ .disabled-tip-wrap{display:inline-flex;flex-shrink:0;} .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700;} .btn-primary:hover{background:var(--accent-hover);} .btn-accent{background:rgba(var(--accent-rgb),0.1);border-color:rgba(var(--accent-rgb),0.35);color:var(--accent);} .btn-accent:hover{background:rgba(var(--accent-rgb),0.2);} .btn-secondary{background:none;border-color:rgba(var(--overlay-rgb),0.1);color:var(--text-dim);} .btn-secondary:hover{color:var(--text);border-color:rgba(var(--overlay-rgb),0.25);} .btn-danger{background:none;border-color:rgba(var(--danger-rgb),0.4);color:var(--danger-text);} .btn-danger:hover{background:rgba(var(--danger-rgb),0.12);color:var(--danger-text-hover);} .btn-ghost{background:rgba(var(--overlay-rgb),0.03);border-color:rgba(var(--overlay-rgb),0.08);color:var(--text-dim);} .btn-ghost:hover{color:var(--text);} .btn-ghost.active{background:rgba(var(--accent-rgb),0.10);border-color:rgba(var(--accent-rgb),0.35);color:var(--accent);} /* Marketplace scope tabs: a vault tab with a member-picked color (--vault-color set inline) highlights in its own color when active — everything else falls back to the .btn-ghost.active cyan above. */ .market-scope-btn.active{background:var(--vault-color-bg, rgba(var(--accent-rgb),0.10));border-color:var(--vault-color, rgba(var(--accent-rgb),0.35));color:var(--vault-color, var(--accent));} .btn-ghost.danger:hover{color:var(--danger);border-color:rgba(var(--danger-rgb),0.4);background:rgba(var(--danger-rgb),0.08);} .btn-ghost.listed{color:var(--accent-2);border-color:rgba(var(--accent-2-rgb),0.4);background:rgba(var(--accent-2-rgb),0.08);} .btn-ghost.listed:hover{border-color:rgba(var(--accent-2-rgb),0.7);background:rgba(var(--accent-2-rgb),0.15);} /* Inline text-link button — for in-flow affordances that shouldn't look like a boxed button. */ .link-btn{background:none;border:none;padding:0;font-family:inherit;font-size:inherit;color:var(--accent);cursor:pointer;text-decoration:none;} .link-btn:hover{text-decoration:underline;} /* ── App layout ────────────────────────────────────────────────────── Left sidebar (brand + persistent nav) + main area (topbar: add-entry/ user-bar, then page content). See the sidebar-toggle/scrim rules and the max-width:900px query for the responsive collapse. */ .app-layout{width:100%;display:flex;align-items:flex-start;min-height:100vh;} /* Deliberately stays translucent rgba(var(--bg-rgb),X), NOT var(--bg-panel) — body's own background is a per-vault-color gradient wash meant to inherit down and tint every surface faintly; a fully opaque sidebar would block that. */ .sidebar{width:200px;flex-shrink:0;min-height:100vh;position:sticky;top:0; background:rgba(var(--bg-rgb),0.85);border-right:1px solid rgba(var(--overlay-rgb),0.08); padding:16px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;} .sidebar-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 16px; border-bottom:1px solid rgba(var(--overlay-rgb),0.08);margin-bottom:10px;cursor:pointer;} .sidebar-brand-text{display:flex;flex-direction:column;gap:4px;min-width:0;} .brand-logo{height:48px;width:48px;flex-shrink:0;} .brand-title{font-family:'Orbitron',monospace;font-size:1.05rem;font-weight:900;color:var(--accent);letter-spacing:2px;} .beta-badge{font-size:10px;letter-spacing:1px;color:var(--warning);background:rgba(var(--warning-rgb),0.1);border:1px solid rgba(var(--warning-rgb),0.35);border-radius:8px;padding:1px 6px;white-space:nowrap;align-self:flex-start;} /* Persistent nav — rendered dynamically by renderTopNav() in app.js. */ .sidebar-nav{display:flex;flex-direction:column;gap:3px;} .sidebar-section-label{font-size:10px;color:var(--text-dim);letter-spacing:1.5px;padding:12px 10px 4px;} .sidebar-link{display:flex;align-items:center;gap:9px;width:100%;text-align:left; padding:8px 10px;border-radius:6px;border-left:2px solid var(--vault-color, transparent); background:none;border-top:none;border-right:none;font-family:inherit; font-size:11px;letter-spacing:0.5px;color:var(--text-dim);cursor:pointer; transition:background .12s,color .12s,border-color .12s;} .sidebar-link i{font-size:12px;width:14px;text-align:center;flex-shrink:0;} /* Same accent-tinted-gradient hover already used on .home-card/.kpi-tile, so the nav reads as the same design generation as those surfaces instead of a flatter overlay tint left over from the old look. */ .sidebar-link:hover{background:linear-gradient(rgba(var(--accent-rgb),0.05),rgba(var(--accent-rgb),0.05)),rgba(var(--overlay-rgb),0.03);color:var(--text);} /* Group Vault entries with a picked color (--vault-color, set inline per row) use it here too, so the active row highlights in its own color rather than always cyan; entries with no color fall back to --accent. */ .sidebar-link.active{background:var(--vault-color-bg, rgba(var(--accent-rgb),0.1));border-left-color:var(--vault-color, var(--accent));color:var(--vault-color, var(--accent));} .sidebar-link .nav-badge{margin-left:auto;background:var(--warning);color:var(--on-warning); font-size:10px;font-weight:700;padding:1px 5px;border-radius:6px;} .main-area{flex:1;min-width:0;display:flex;flex-direction:column;} /* Topbar — the operations row + add-entry/user-bar, above the page content. The border spans the full main-area width, but the contents are constrained to the same max-width + padding as .main-content below, so the user-bar's right edge lines up with the content frame instead of drifting to the viewport edge. */ .actionframe{width:100%;display:none;border-bottom:1px solid rgba(var(--overlay-rgb),0.06);} .actionframe.visible{display:block;} .actionframe-inner{display:flex;align-items:center;gap:10px;width:100%; max-width:1200px;margin:0 auto;padding:12px clamp(14px,3vw,24px); flex-wrap:wrap;} /* Per-vault context strip (app.js's renderVaultContextStrip()) — the old per-vault sidebar sub-links (Marketplace/Listings/Inventory/Chats/ Storefront/Craftable Now/Event Vault), now horizontal and only shown while you're on one of that vault's own pages. Wraps onto a second line at narrow widths rather than needing its own mobile menu. */ .ops-strip{display:flex;align-items:center;gap:4px;flex-wrap:wrap;} .ops-link{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:6px; background:none;border:none;font-family:inherit;font-size:11px;letter-spacing:0.5px; color:var(--text-dim);cursor:pointer;white-space:nowrap; transition:background .12s,color .12s;} .ops-link i{font-size:12px;flex-shrink:0;} .ops-link:hover{background:linear-gradient(rgba(var(--accent-rgb),0.05),rgba(var(--accent-rgb),0.05)),rgba(var(--overlay-rgb),0.03);color:var(--text);} .ops-link.active{background:rgba(var(--accent-rgb),0.1);color:var(--accent);} .ops-link .nav-badge{background:var(--warning);color:var(--on-warning); font-size:10px;font-weight:700;padding:1px 5px;border-radius:6px;} /* The user bar anchors itself to the right edge, independent of whether the ops strip or an add-entry button is present before it. */ #user-bar{margin-left:auto;} .main-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px; padding:clamp(14px,3vw,24px);max-width:1200px;width:100%;margin:0 auto;} /* Fleet build page opts out of the shared centered column — it's the one page in the app wide enough (multi-column category grid, §3 below) to want the full viewport width rather than capping at 1200px. .fc-page itself still caps at a sane max-width so it doesn't stretch unreadably wide on an ultrawide monitor. */ .main-content:has(.fc-page){max-width:none;margin:0;} /* Mobile nav toggle — hidden on desktop, shown + sidebar collapsed to an off-canvas drawer under the 900px breakpoint (see media query below). */ .sidebar-toggle{display:none;position:fixed;top:12px;left:12px;z-index:1100; width:36px;height:36px;border-radius:4px;background:var(--bg-panel); border:1px solid rgba(var(--overlay-rgb),0.12);color:var(--text);cursor:pointer;} .sidebar-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:999;} /* Dashboard (Home) cards — fixed grid, no drag-to-reorder yet. */ .home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;} /* KPI grids specifically (scoped via :has so the wider Home-page vault/ shortcut cards above are untouched) get a narrower minimum than the 200px default — a KPI tile is just a number + a short label, nowhere near as content-heavy as a .home-card. Without this, a 5th KPI tile commonly wraps to its own second row despite visible spare width. */ .home-grid:has(.kpi-tile){grid-template-columns:repeat(auto-fit,minmax(150px,1fr));} /* Fleet build page (js/fleet.js) — its own visual system, a local --fc-* variable set scoped under .fc-page so it never leaks into any other page, distinct component classes (.fc-hero/.fc-layer/.fc-zone/ .fc-slot-row/.fc-console/.fc-go/.fc-tag/.fc-chain), not a reskin of the shared .panel/.item-row/.btn system. */ .fc-page{ --fc-void:#0A0612; --fc-void-2:#130B20; --fc-edge:rgba(190,164,230,.16); --fc-edge-strong:rgba(190,164,230,.32); --fc-ink:#EDE6F7; --fc-ink-dim:#9A8CBE; --fc-ink-faint:#5C4E7C; --fc-cyan:#00E5FF; --fc-cyan-rgb:0,229,255; --fc-magenta:#FF4FD8; --fc-magenta-rgb:255,79,216; --glass-radius:10px; --glass-sheen-h:22px; --glass-sheen:rgba(255,255,255,.30); /* Glass material, matching the "Glass Console Tiles" mockup's own recipe (not a from-scratch derivation) — confirmed live 2026-08-10 that a flat page background gives backdrop-filter:blur nothing to blur, so "glass" and "solid tint" were visually identical regardless of blur amount. The mockup's own page background is a textured aurora (radial-gradients + a diagonal base), and its glass adds saturate() on top of blur — both restored here, values taken directly from the mockup source rather than re-guessed. */ --glass-blur:16px; --glass-fill-top:rgba(120,120,130,.16); --glass-fill-bottom:rgba(60,60,68,.10); --glass-rim:rgba(255,255,255,.4); --glass-rim-dim:rgba(200,200,210,.20); --glass-edge:rgba(10,10,14,.6); --glass-shadow:inset 0 1px 5px -1px var(--glass-rim), inset 0 -10px 14px -12px rgba(0,0,0,.5), 0 2px 0 -1px var(--glass-edge), 0 16px 34px -18px rgba(0,0,0,.7); background-image: radial-gradient(1100px 480px at 18% -8%, rgba(60,220,180,.14), transparent 62%), radial-gradient(900px 560px at 52% -4%, rgba(130,100,255,.13), transparent 60%), radial-gradient(1000px 520px at 88% 6%, rgba(0,200,225,.11), transparent 62%), radial-gradient(760px 820px at 102% 38%, rgba(190,80,210,.08), transparent 58%), radial-gradient(820px 680px at -8% 55%, rgba(50,200,160,.09), transparent 58%), linear-gradient(175deg, #060710 0%, #08091a 38%, #0A0612 100%); background-attachment:fixed; color:var(--fc-ink);border-radius:8px;font-size:15px;line-height:1.5; } [data-theme="light"] .fc-page{ --fc-void:#EDE7FB; --fc-void-2:#FBF9FF; --fc-edge:rgba(90,60,140,.14); --fc-edge-strong:rgba(90,60,140,.28); --fc-ink:#221636; --fc-ink-dim:#5F4E82; --fc-ink-faint:#9384B3; --fc-cyan:#0092AD; --fc-cyan-rgb:0,146,173; --fc-magenta:#B01C8E; --fc-magenta-rgb:176,28,142; --glass-fill-top:rgba(95,95,102,.42); --glass-fill-bottom:rgba(95,95,102,.24); --glass-rim:rgba(255,255,255,.65); --glass-rim-dim:rgba(110,110,122,.22); --glass-sheen:rgba(255,255,255,.55); --glass-edge:rgba(90,90,100,.35); --glass-shadow:inset 0 1px 5px -1px var(--glass-rim), inset 0 -8px 12px -12px rgba(90,60,140,.3), 0 2px 0 -1px var(--glass-edge), 0 14px 30px -18px rgba(90,60,140,.4); background-image: radial-gradient(1100px 480px at 18% -8%, rgba(60,200,180,.10), transparent 62%), radial-gradient(900px 560px at 52% -4%, rgba(130,100,255,.08), transparent 60%), radial-gradient(1000px 520px at 88% 6%, rgba(0,180,205,.08), transparent 62%), radial-gradient(760px 820px at 102% 38%, rgba(190,80,210,.05), transparent 58%), linear-gradient(175deg, #F6F3FC 0%, #F0EBF9 45%, #EDE7FB 100%); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) .fc-page{ --fc-void:#EDE7FB; --fc-void-2:#FBF9FF; --fc-edge:rgba(90,60,140,.14); --fc-edge-strong:rgba(90,60,140,.28); --fc-ink:#221636; --fc-ink-dim:#5F4E82; --fc-ink-faint:#9384B3; --fc-cyan:#0092AD; --fc-cyan-rgb:0,146,173; --fc-magenta:#B01C8E; --fc-magenta-rgb:176,28,142; --glass-fill-top:rgba(95,95,102,.42); --glass-fill-bottom:rgba(95,95,102,.24); --glass-rim:rgba(255,255,255,.65); --glass-rim-dim:rgba(110,110,122,.22); --glass-sheen:rgba(255,255,255,.55); --glass-edge:rgba(90,90,100,.35); --glass-shadow:inset 0 1px 5px -1px var(--glass-rim), inset 0 -8px 12px -12px rgba(90,60,140,.3), 0 2px 0 -1px var(--glass-edge), 0 14px 30px -18px rgba(90,60,140,.4); background-image: radial-gradient(1100px 480px at 18% -8%, rgba(60,200,180,.10), transparent 62%), radial-gradient(900px 560px at 52% -4%, rgba(130,100,255,.08), transparent 60%), radial-gradient(1000px 520px at 88% 6%, rgba(0,180,205,.08), transparent 62%), radial-gradient(760px 820px at 102% 38%, rgba(190,80,210,.05), transparent 58%), linear-gradient(175deg, #F6F3FC 0%, #F0EBF9 45%, #EDE7FB 100%); } } /* High contrast (either theme): the app's own high-contrast palette is solid black/white with no translucent overlays at all (see [data-theme][data-contrast="high"] above) — a blurred, low-opacity glass fill fights that WCAG-driven design directly, so it's turned off here rather than kept "for consistency". Panels fall back to a plain solid fill + full-strength border, same shape as the rest of the app's high-contrast surfaces; the aurora background image is dropped too. */ [data-contrast="high"] .fc-page{ --glass-blur:0px; --glass-fill-top:var(--fc-void-2); --glass-fill-bottom:var(--fc-void-2); --glass-rim:var(--fc-edge-strong); --glass-rim-dim:var(--fc-edge-strong); --glass-shadow:none; --glass-sheen:transparent; background-image:none;background-color:var(--fc-void); } /* Mockup's own note (its "About This Material" card, and the comment on its .mark-glyph rule): cut/chamfer corners are gone in the real mockup — plain rounded corners read better and don't clip box-shadow the way clip-path does, so the glow lives directly on the element. Ours had drifted to keep the old cut-corner look; dropped here to match. */ .fc-panel{ position:relative;border-radius:var(--glass-radius);overflow:hidden; background:linear-gradient(180deg,var(--glass-fill-top) 0,var(--glass-fill-bottom) 110px,var(--glass-fill-bottom) 100%); backdrop-filter:blur(var(--glass-blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); border:1px solid var(--glass-rim-dim);box-shadow:var(--glass-shadow); } /* The Aero sheen — a fixed-height glossy cap (never a percentage of the panel), same physical size on every panel regardless of how tall it is, matching the mockup's .glass::before exactly. */ .fc-panel::before{ content:"";position:absolute;left:1px;right:1px;top:1px;height:var(--glass-sheen-h);pointer-events:none; border-radius:calc(var(--glass-radius) - 1px) calc(var(--glass-radius) - 1px) 14px 14px; background:linear-gradient(180deg,var(--glass-sheen) 0%,rgba(255,255,255,.06) 60%,rgba(255,255,255,0) 100%); } /* The SWAP/ASSIGN + LINK picker modals opened from the Fleet build page (#fleet-picker-modal-overlay/#fleet-link-modal-overlay, fleet.js) are the only two modals scoped to this page — brought into the same Glass Console material as .fc-panel above. ID-scoped rather than reusing .fc-page (that class also carries page-layout rules that don't belong on a modal) so this can never leak onto any other modal in the app. */ #fleet-picker-modal-overlay,#fleet-link-modal-overlay{ --fc-void:#0A0612; --fc-void-2:#130B20; --fc-edge:rgba(190,164,230,.16); --fc-edge-strong:rgba(190,164,230,.32); --fc-ink:#EDE6F7; --fc-ink-dim:#9A8CBE; --fc-ink-faint:#5C4E7C; --fc-cyan:#00E5FF; --fc-cyan-rgb:0,229,255; --fc-magenta:#FF4FD8; --fc-magenta-rgb:255,79,216; --glass-blur:14px; --glass-fill-top:rgba(150,130,190,.14); --glass-fill-bottom:rgba(80,65,110,.10); --glass-rim:rgba(255,255,255,.28); --glass-rim-dim:rgba(190,164,230,.20); --glass-shadow:inset 0 1px 4px -1px var(--glass-rim), 0 10px 24px -14px rgba(0,0,0,.6); } [data-theme="light"] #fleet-picker-modal-overlay,[data-theme="light"] #fleet-link-modal-overlay{ --fc-void:#F1ECFA; --fc-void-2:#FFFFFF; --fc-edge:rgba(90,60,140,.14); --fc-edge-strong:rgba(90,60,140,.28); --fc-ink:#221636; --fc-ink-dim:#5F4E82; --fc-ink-faint:#9384B3; --fc-cyan:#0092AD; --fc-cyan-rgb:0,146,173; --fc-magenta:#B01C8E; --fc-magenta-rgb:176,28,142; --glass-fill-top:rgba(120,120,130,.14); --glass-fill-bottom:rgba(120,120,130,.06); --glass-rim:rgba(255,255,255,.7); --glass-rim-dim:rgba(90,60,140,.18); --glass-shadow:inset 0 1px 4px -1px var(--glass-rim), 0 8px 20px -14px rgba(90,60,140,.35); } @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]) #fleet-picker-modal-overlay,:root:not([data-theme="dark"]) #fleet-link-modal-overlay{ --fc-void:#F1ECFA; --fc-void-2:#FFFFFF; --fc-edge:rgba(90,60,140,.14); --fc-edge-strong:rgba(90,60,140,.28); --fc-ink:#221636; --fc-ink-dim:#5F4E82; --fc-ink-faint:#9384B3; --fc-cyan:#0092AD; --fc-cyan-rgb:0,146,173; --fc-magenta:#B01C8E; --fc-magenta-rgb:176,28,142; --glass-fill-top:rgba(120,120,130,.14); --glass-fill-bottom:rgba(120,120,130,.06); --glass-rim:rgba(255,255,255,.7); --glass-rim-dim:rgba(90,60,140,.18); --glass-shadow:inset 0 1px 4px -1px var(--glass-rim), 0 8px 20px -14px rgba(90,60,140,.35); } } [data-contrast="high"] #fleet-picker-modal-overlay,[data-contrast="high"] #fleet-link-modal-overlay{ --glass-blur:0px; --glass-fill-top:var(--fc-void-2); --glass-fill-bottom:var(--fc-void-2); --glass-rim:var(--fc-edge-strong); --glass-rim-dim:var(--fc-edge-strong); } #fleet-picker-modal-overlay .modal-box,#fleet-link-modal-overlay .modal-box{ background:linear-gradient(180deg,var(--glass-fill-top) 0,var(--glass-fill-bottom) 110px,var(--glass-fill-bottom) 100%); backdrop-filter:blur(var(--glass-blur)) saturate(150%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%); border:1px solid var(--glass-rim-dim);box-shadow:var(--glass-shadow);color:var(--fc-ink); } #fleet-picker-modal-overlay .modal-header,#fleet-link-modal-overlay .modal-header{background:none;border-bottom:1px solid var(--fc-edge);} #fleet-picker-modal-overlay .modal-title,#fleet-link-modal-overlay .modal-title{font-family:inherit;color:var(--fc-cyan);letter-spacing:.1em;} #fleet-picker-modal-overlay .modal-close,#fleet-link-modal-overlay .modal-close{color:var(--fc-ink-dim);} #fleet-picker-modal-overlay .modal-close:hover,#fleet-link-modal-overlay .modal-close:hover{color:var(--fc-ink);} #fleet-picker-modal-overlay .empty-state,#fleet-link-modal-overlay .empty-state{color:var(--fc-ink-dim);} #fleet-picker-modal-overlay .empty-state-hint,#fleet-link-modal-overlay .empty-state-hint{color:var(--fc-ink-faint);} /* Search box, filter pills, and result rows inside those two modals — same glass palette, this page's own component classes rather than the shared .btn/.item-row system (see this section's header comment). */ .fc-search-input{width:100%;font-family:inherit;font-size:12.5px;color:var(--fc-ink); background:rgba(0,0,0,.15);border:1px solid var(--fc-edge);border-radius:4px;padding:8px 10px;} .fc-search-input::placeholder{color:var(--fc-ink-faint);} .fc-search-input:focus{outline:none;border-color:var(--fc-cyan);} .fc-pill{font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; border:1px solid var(--fc-edge);background:none;color:var(--fc-ink-dim);cursor:pointer;padding:5px 10px;border-radius:3px;} .fc-pill:hover{color:var(--fc-ink);border-color:var(--fc-ink-dim);} .fc-pill.active{color:var(--fc-void);background:var(--fc-cyan);border-color:transparent;} .fc-picker-list{display:flex;flex-direction:column;gap:1px;} .fc-picker-row{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:9px 4px;border-bottom:1px solid var(--fc-edge);cursor:pointer;} .fc-picker-row:last-child{border-bottom:0;} .fc-picker-row:hover{background:rgba(var(--fc-cyan-rgb),.06);} .fc-picker-row-main{min-width:0;} .fc-picker-name{font-size:12.5px;font-weight:600;color:var(--fc-ink);} .fc-picker-mfg{font-size:10.5px;color:var(--fc-ink-faint);} .fc-picker-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;color:var(--fc-ink-dim);margin-top:2px;} .fc-picker-note{font-size:11px;color:var(--fc-ink-faint);padding:6px 2px;} .fc-hero{position:relative;padding:16px 20px 14px;overflow:hidden;} .fc-hero::after{content:"";position:absolute;top:-55%;right:-14%;width:340px;height:340px;border-radius:50%; background:radial-gradient(circle,rgba(var(--fc-cyan-rgb),.14),transparent 65%);pointer-events:none;} .fc-hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;position:relative;flex-wrap:wrap;} .fc-eyebrow{font-size:10px;letter-spacing:.2em;color:var(--fc-cyan);text-transform:uppercase;display:flex;align-items:center;gap:8px;} .fc-eyebrow::before{content:"";width:16px;height:1px;background:var(--fc-cyan);} .fc-hero-title{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--fc-ink);} .fc-hero-title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;} .fc-hero-sub{font-size:13px;color:var(--fc-ink-dim);margin-top:3px;} .fc-hero-actions{display:flex;align-items:center;gap:14px;flex:none;} .fc-go{font-family:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--fc-edge-strong); background:none;color:var(--fc-ink-dim);cursor:pointer;padding:8px 13px;display:inline-flex;align-items:center;gap:6px;} .fc-go:hover{color:var(--fc-ink);border-color:var(--fc-ink-dim);} .fc-go-primary{color:var(--fc-void);background:linear-gradient(120deg,var(--fc-cyan),#4FC8FF);border-color:transparent;font-weight:800;padding:9px 16px;border-radius:7px;} .fc-go-primary:hover{filter:brightness(1.08);} /* Small labeled clusters (Flight Performance, Hull & Signature, Weaponry, Shields, Carrying Capacity, Quantum Travel) replacing the old single flat .fc-ticker row — more KPIs fit in the same width, and each group reads as its own real-world subsystem instead of one undifferentiated list (see fleetBuildStatsHtml()'s own comment for the build-hygiene tiles this dropped). */ .fc-kpi-groups{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;position:relative;} .fc-kpi-group{flex:1;min-width:150px;padding:7px 10px;border-radius:6px; background:rgba(var(--fc-cyan-rgb),.04);border:1px solid var(--fc-edge);} .fc-kpi-group-head{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fc-cyan);margin-bottom:5px;} .fc-kpi-group-row{display:flex;flex-wrap:wrap;gap:10px;} .fc-kpi-mini-label{font-size:9.5px;letter-spacing:.04em;color:var(--fc-ink-faint);text-transform:uppercase;} .fc-kpi-mini-value{font-size:16px;font-weight:800;color:var(--fc-ink);margin-top:2px;letter-spacing:-.01em;} /* A unit suffix right after a KPI number reads as too far away when it's just a plain space at the number's own big/bold size — smaller, dimmer and tight against the digits instead. */ .fc-unit{font-size:10px;font-weight:600;color:var(--fc-ink-dim);margin-left:2px;letter-spacing:0;} .fc-tick-note{font-size:10.5px;color:var(--fc-ink-faint);} /* Weaponry table (Total/Pilot/Manned/Remote × DPS/Alpha/Sustained) — one flex item in .fc-kpi-groups, same width as every other cluster there (not a full-width block — that wasted too much of the row, confirmed live 2026-08-15), just with a small table inside instead of a row of mini tiles. */ .fc-weaponry-panel{flex:1;min-width:150px;padding:7px 10px;border-radius:6px; background:rgba(var(--fc-cyan-rgb),.04);border:1px solid var(--fc-edge);} .fc-weaponry-head{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--fc-cyan);margin-bottom:5px;} .fc-weaponry-table{width:100%;border-collapse:collapse;} .fc-weaponry-table th{font-size:8px;letter-spacing:.02em;color:var(--fc-ink-faint);text-transform:uppercase;text-align:right;font-weight:600;padding:1px 0 2px;} .fc-weaponry-table th:first-child{text-align:left;} .fc-weaponry-table td{font-size:11px;font-weight:700;color:var(--fc-ink);text-align:right;font-variant-numeric:tabular-nums;padding:2px 0;white-space:nowrap;} .fc-weaponry-table td:first-child{text-align:left;font-weight:600;color:var(--fc-ink-dim);padding-right:4px;} .fc-weaponry-table tr + tr td{border-top:1px dashed var(--fc-edge);} .fc-weaponry-total td{font-size:15px;font-weight:800;color:var(--fc-cyan);} .fc-weaponry-total td:first-child{color:var(--fc-cyan);} /* Fixed Gimbal ("Locked") vs Manual/Auto Gimbal/Precision Targeting ("Gimbal") toggle, inline in the Weaponry group's own header. */ .fc-fire-mode-toggle{float:right;display:inline-flex;gap:3px;} .fc-fire-mode-btn{font-family:inherit;font-size:8.5px;font-weight:700;letter-spacing:.06em; background:none;border:1px solid var(--fc-edge-strong);color:var(--fc-ink-faint);border-radius:3px; padding:1px 5px;cursor:pointer;} .fc-fire-mode-btn:hover{color:var(--fc-ink-dim);} .fc-fire-mode-btn.active{background:rgba(var(--fc-cyan-rgb),.15);border-color:var(--fc-cyan);color:var(--fc-cyan);} /* Quantum Travel calculator — real per-drive linear reference rates (FuelConsumptionSCUPerGM/TravelTime10GMSeconds), scaled to whatever distance the player types in. setFleetBuildQtDistance() only touches #fc-qt-calc-output on input, so the field never loses focus/cursor. */ .fc-qt-calc{display:flex;flex-direction:column;gap:5px;} .fc-qt-input{font-family:inherit;font-size:11.5px;background:var(--fc-void-3,rgba(0,0,0,.18)); border:1px solid var(--fc-edge);border-radius:4px;padding:4px 7px;color:var(--fc-ink);width:100%;box-sizing:border-box;} .fc-qt-result{display:flex;gap:14px;} .fc-qt-result-item{display:flex;flex-direction:column;} .fc-qt-result-value{font-size:13px;font-weight:700;color:var(--fc-ink);font-variant-numeric:tabular-nums;} .fc-qt-result-label{font-size:9px;letter-spacing:.04em;color:var(--fc-ink-faint);text-transform:uppercase;margin-top:1px;} .fc-ledger{margin-top:6px;} /* The drag handle for reordering category panels (fleetBuildInitCategoryDragOnce()) — only this header bar is draggable, not the whole panel, so grabbing a row's own wrench/link/disclosure controls in the body below never mistakenly starts a panel drag. */ .fc-ledger-head{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fc-cyan);padding:6px 6px 0;cursor:grab;} .fc-drag-grip{flex:none;font-size:11px;color:var(--fc-ink-faint);} .fc-panel.fc-dragging{opacity:.4;} .fc-ledger-body{padding:6px;} .fc-zone{margin-top:10px;} .fc-zone:first-child{margin-top:2px;} .fc-zone-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--fc-edge-strong);} .fc-zone-name{font-size:16.5px;font-weight:800;color:var(--fc-ink);display:flex;align-items:center;gap:9px;} .fc-zone-name::before{content:"";width:8px;height:8px;flex:none;background:var(--fc-cyan);border-radius:50%;} .fc-zone-note{font-size:11.5px;color:var(--fc-ink-faint);margin-left:auto;} /* A single turret position's own name, one level inside a Manned/Remote Turrets .fc-zone group — same weight as .fc-zone-name but no dot (that bullet marks a real grouping boundary; a position nested inside one already-dotted group doesn't need a second). */ .fc-position-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:6px 0 6px 6px;border-bottom:1px solid var(--fc-edge-strong);} .fc-position-name{flex:none;min-width:0;font-size:15.5px;font-weight:800;color:var(--fc-ink);} /* One tile per root (weapon chain or any other category's own slot), side by side — mirrors the mockup's .zone-grid. 280px (up from 240px) gives the headline more room now that its batch pills sit inline on the same line rather than a row of their own. auto-fit, not auto-fill: with fewer items than fit a row, auto-fill still reserves the empty tracks at their minmax width, squeezing real items down to 1/3 of the panel instead of letting them grow to fill it — confirmed live 2026-08-10 on a lone Cooler tile. auto-fit collapses the empty tracks so the 1fr items actually get the rest of the space; identical to auto-fill once there are enough items to fill every track. */ /* align-items:start — without it, grid's default stretch makes every tile in a row match the row's tallest member, stretching a shorter tile's own grid cell into dead space below its real content. */ .fc-zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px;align-items:start;} /* Depth reads as indentation plus a faint tier tint, not a connector line — CSS-drawn branch lines (tee/elbow marks, and before that a blurred carved card) kept fighting box-model edge cases (KPI-chip rows shifting a tick's target, a toggle icon's transparent glyph letting the line behind it bleed through) no amount of tuning fully fixed. .fc-chain-group is just the grid-item wrapper around a root + its descendants; .fc-chain wraps one nested node purely to carry its tier class, used by the tint rules below. */ .fc-chain-group{display:flex;flex-direction:column;gap:2px;} /* .fc-layer* is the one tile/card rendering every category uses now (fleetBuildNodeRowHtml()) — the sidebar detail panel (fleetBuildConsoleHtml()), the ship_weapons zone grid (wrapped in .fc-chain), and every other category's own tile grid all share it. */ .fc-layer{position:relative;padding:8px 12px;cursor:pointer;border-radius:6px;} /* One tint step deeper per nesting tier (fleetBuildChainTierClass(), capped at t3) — placed ahead of :hover/.selected below so those still read through on top at equal selector specificity, not the reverse. */ .fc-chain-t1 > .fc-layer{background:rgba(237,230,247,.025);} .fc-chain-t2 > .fc-layer{background:rgba(237,230,247,.045);} .fc-chain-t3 > .fc-layer{background:rgba(237,230,247,.065);} .fc-layer:hover{background:rgba(var(--fc-cyan-rgb),.05);} .fc-layer + .fc-layer{border-top:1px solid var(--glass-rim-dim);} .fc-layer.selected{background:rgba(var(--fc-cyan-rgb),.08);} /* Left accent bar marks the selected row directly — replaces the old ancestor-card glow now that nesting has no card of its own to glow. */ .fc-layer.selected::before{content:"";position:absolute;left:0;top:5px;bottom:5px; width:2.5px;border-radius:2px;background:var(--fc-cyan);} /* LINK + wrench (in that order, so LINK sits to the wrench's left) are a real flex child of the same row as the headline/batches, not an absolutely-positioned overlay — naturally level with the headline, no padding-reservation hack needed to keep content from running underneath a floating corner element. */ .fc-layer-actions{display:flex;gap:6px;align-items:center;flex:none;} /* Stacks the batch pills above the LINK/wrench buttons instead of sharing one line with them — a fixed two-row block, so the same column always lands in the same place whether a row has 3 pills or 1, 2 buttons or 1. */ .fc-layer-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;} .fc-layer-line{display:flex;align-items:center;gap:8px;margin-top:4px;} .fc-layer-line:first-of-type{margin-top:0;} .fc-layer-label{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--fc-ink-dim);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fc-layer-fill{font-size:17.5px;font-weight:600;color:var(--fc-ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .fc-layer-fill.unassigned{color:var(--fc-ink-faint);font-weight:400;} /* The row's own real category (fleetBuildCategoryIconHtml()) — a cooler's fan, a shield's own icon, a gimbal's rotating mount distinct from the gun it's holding — so scanning down a chain reads faster than the name text alone. */ .fc-row-icon{flex:none;width:15px;font-size:13px;text-align:center;color:var(--fc-ink-dim);} /* A shield's total HP / a cooler's own output, right next to the name (fleetBuildInlineStat()) — same size/weight/color as the row's own name text at that depth (.fc-layer-fill below), just not the name itself, so it reads as part of the headline rather than a KPI chip. */ .fc-layer-inline-stat{flex:none;font-size:17.5px;font-weight:600;color:var(--fc-ink);white-space:nowrap;} /* A nested tile's own name (a mining laser's module, a quantum drive's sub-component) reads smaller and dimmer than its top-level parent's — .fc-chain-children is only ever a real parent/child wrapper (see fleetBuildNodeBlockHtml()'s own comment), so this needs no extra class in the markup, just scoping off that existing structure. */ .fc-chain-children .fc-layer-fill{font-size:14px;color:var(--fc-ink-dim);} .fc-chain-children .fc-layer-fill.unassigned{color:var(--fc-ink-faint);} .fc-chain-children .fc-layer-inline-stat{font-size:14px;color:var(--fc-ink-dim);} .fc-pos-glyph{color:var(--fc-cyan);font-weight:700;} /* A via wrapper's own row (fleetBuildViaWrapperHtml()) — fixed hardware, never swappable, so it reads slightly dimmer than an editable layer. */ .fc-layer-locked{cursor:default;} .fc-layer-locked .fc-layer-fill{color:var(--fc-ink-dim);} .fc-lock-icon{color:var(--fc-ink-faint);font-size:12px;} /* Wraps a node's children (fleetBuildNodeBlockHtml()) in a flex-column block — no padding of its own, so every row's own flex line still spans the panel's full width and its trailing batch pills/actions land at the same x-position regardless of nesting. Depth instead reads from each row's own leading .fc-depth-spacer plus the parent's tier tint (.fc-chain-t1/t2/t3 above), nothing drawn to connect the two. */ .fc-chain-children{display:flex;flex-direction:column;gap:2px;} /* Per-row leading indent (fleetBuildNodeRowHtml()) — width set inline to depth*18px. Lives inside .fc-layer-line itself rather than on the .fc-chain-children wrapper so it can't shrink the row's own width. */ .fc-depth-spacer{flex:none;} /* A classic disclosure chevron (fleetBuildTurretDisclosureHtml()) — points right/closed on a still-merged row, right into open/down on one of its now-individual members. Lives inline with the row's own content (in fc-position-head or fc-layer-line, both flex rows), never on a connector line, so there's nothing for it to collide with. */ .fc-disclosure{flex:none;align-self:center;display:flex;align-items:center;justify-content:center; width:18px;height:18px;background:none;border:1px solid var(--fc-edge-strong);border-radius:4px; color:var(--fc-ink-dim);cursor:pointer;padding:0;} .fc-disclosure:hover{color:var(--fc-cyan);border-color:var(--fc-cyan);} .fc-disclosure svg{width:8px;height:8px;transition:transform .15s;} .fc-disclosure-open svg{transform:rotate(90deg);} /* Size/grade/class batch pills, inline at the right of the headline — replaces the old fixed-width Component/Size/Grade table columns, which sat mostly empty for a short value like "S3"/"GrC". Every pill shares one fixed width now (a blank .fc-batch-empty fills in for whichever a component doesn't have) — size, grade, and class all read as one consistent row instead of class standing out wider than its neighbors — so the wrench/link buttons after them land in the same x-position on every tile, regardless of which pills are present. align-items:center on the row (not the default stretch) keeps the pills at their own natural height instead of stretching to match the wrench/link buttons' taller icon box. */ .fc-batch-row{display:flex;align-items:center;flex-wrap:wrap;gap:5px;flex:none;} /* height:22px + flex centering (not line-height/padding) matches .fc-wrench's own fixed 22px box exactly, so the pills and the wrench/ link buttons land on the identical vertical center regardless of font metrics — line-height-based centering was landing a hair off. */ .fc-batch{box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:34px;height:22px;font-size:10px;font-weight:700;letter-spacing:.04em;padding:0 4px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;} .fc-batch-size{background:rgba(var(--fc-cyan-rgb),.10);color:var(--fc-cyan);border:1px solid rgba(var(--fc-cyan-rgb),.28);} .fc-batch-grade{background:rgba(154,140,190,.14);color:var(--fc-ink-dim);border:1px solid var(--fc-edge-strong);} .fc-batch-class{background:rgba(var(--fc-magenta-rgb),.12);color:var(--fc-magenta);border:1px solid rgba(var(--fc-magenta-rgb),.3);} .fc-batch-empty{background:none;border-color:transparent;} .fc-tag{height:22px;box-sizing:border-box;display:inline-flex;align-items:center;font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:0 8px;flex:none;font-family:inherit;} /* Custodian-transfer linking (docs/ship-builds-overrides-design.md) — fc-tag-link mirrors fc-tag-assign's filled-magenta treatment for "plan needs an owned item"; fc-tag-linked is the outlined, already-fulfilled state (click to unlink). */ .fc-tag-link{color:var(--fc-void);background:var(--fc-magenta);font-weight:800;cursor:pointer;border:0;} .fc-tag-linked{color:var(--fc-cyan);border:1px solid var(--fc-cyan);cursor:pointer;background:none;font-weight:700;} /* Expand/collapse toggle for a weapon mount's own sub-layers — currently unused (no call site enables it), kept for a future category. */ .fc-chevron{background:none;border:0;color:var(--fc-ink-faint);cursor:pointer;padding:2px;font-family:inherit;} .fc-chevron:hover{color:var(--fc-ink);} .fc-chevron i{transition:transform .15s;display:block;} .fc-chevron.open i{transform:rotate(90deg);} .fc-grid{display:grid;grid-template-columns:1fr 330px;gap:7px;align-items:start;margin-top:10px;} .fc-grid > div > .fc-panel{margin-bottom:10px;} .fc-grid > div > .fc-panel:last-child{margin-bottom:0;} /* Category panels (fleetBuildListHtml() in fleet.js) — one panel per category, each holding a tile grid of its own roots, laid out in 3 real DOM columns (fleetBuildComputePanelColumns()) rather than CSS multi-column masonry. Masonry (`columns:480px 3`) packed tightly like Pinterest, but rebalanced on every render — expanding one panel changed every column's total height, which the browser "fixed" by shuffling OTHER panels into different columns, reading as random reordering (confirmed live 2026-08-15). Plain CSS grid isn't an option either (confirmed live 2026-08-10): a tall panel forces its whole grid ROW to that height, leaving dead space under every shorter panel sharing that row. 3 explicit flex columns get the Pinterest-style packing back without the reshuffling — a panel's column is a stable, persisted (or default) decision, never a live height rebalance — and double as the drop targets for the drag-to-reorder handles below. */ /* align-items default (stretch, not flex-start) so every .fc-cat-col matches the tallest column's height, not just its own content's — a short column's real empty space below its last panel is then part of its own box (droppable/hoverable for the panel drag-reorder, see fleetBuildDragOverPreview()) instead of belonging to nothing, which used to force dropping right on the last panel itself. */ .fc-category-grid{display:flex;gap:7px;} .fc-cat-col{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0;} @media (max-width:900px){ .fc-grid{grid-template-columns:1fr;} .fc-console-col{position:static !important;} .fc-category-grid{flex-direction:column;} } /* Sidebar column — Power Management widget (if any resource-networked component is assigned) stacked above the selected-item detail card, both scrolling together as one sticky unit. Spacing between them reuses the same .fc-grid > div > .fc-panel margin rule above, so no separate gap here (that would double up with it). */ .fc-console-col{position:sticky;top:10px;} .fc-console{padding:10px;} .fc-console-empty{font-size:12px;color:var(--fc-ink-faint);text-align:center;padding:10px 0;} /* Identity header, ported from the mockup's .cx-top — a glyph avatar (first letter of the selected item's own name/label) plus name and zone/category subtitle, replacing the old plain eyebrow+title pair. */ .fc-cx-top{display:flex;align-items:center;gap:12px;} .fc-cx-glyph{width:36px;height:36px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px; color:var(--fc-void);background:linear-gradient(135deg,var(--fc-cyan),#4FC8FF);border-radius:8px;} .fc-cx-name{font-size:13px;font-weight:800;color:var(--fc-ink);} .fc-cx-code{font-family:inherit;font-size:10px;color:var(--fc-ink-faint);margin-top:2px;} /* Recessed fact chips, ported from the mockup's .kv/.glass-inset — a shallow inset shadow, no blur/sheen of its own (stacking another full glass layer inside an already-glass card reads as unphysical). */ .fc-kv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px;} .fc-kv{padding:7px 8px;border-radius:4px;background:rgba(var(--fc-cyan-rgb),.05);box-shadow:inset 0 1px 3px rgba(0,0,0,.3);} .fc-kv-label{font-size:10px;color:var(--fc-ink-faint);text-transform:uppercase;letter-spacing:.05em;} .fc-kv-value{font-size:12px;font-weight:700;color:var(--fc-ink);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Stat row format from the "Select vs Configure" mockup — label left (small caps, dim), value right (tabular numerals), dashed divider — replacing the old flat comma-separated fc-console-detail line and the generic componentStatsTableHtml() used to render here. */ .fc-console-body{padding-top:10px;} .fc-console-row{display:flex;justify-content:space-between;gap:12px;font-size:11px;padding:6px 0;border-bottom:1px dashed var(--fc-edge);} .fc-console-row:last-child{border-bottom:0;} .fc-console-row span:first-child{color:var(--fc-ink-faint);text-transform:uppercase;letter-spacing:.06em;font-size:10px;flex:none;} .fc-console-row span:last-child{color:var(--fc-ink);font-variant-numeric:tabular-nums;text-align:right;overflow:hidden;text-overflow:ellipsis;} /* Headline KPI chips (fleetBuildKpiChipsHtml()) — compact code+value pills on a tile/card, same visual language as the mockup's .kpi-c, colored by a coarse unit heuristic (fleetBuildKpiUnit()) rather than a per-field color table, since the underlying stat set is open-ended. */ .fc-kpi-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;} .fc-kpi-chip{display:flex;align-items:center;gap:4px;background:var(--fc-void-3,rgba(0,0,0,.18));border:1px solid var(--fc-edge);border-radius:4px;padding:2px 6px 2px 3px;cursor:help;} .fc-kpi-code{font-size:10px;font-weight:700;border-radius:2px;padding:1px 3px;line-height:1.3;color:#0A0612;} .fc-kpi-val{font-size:10.5px;font-weight:700;color:var(--fc-ink);font-variant-numeric:tabular-nums;} .fc-kpi-dmg{background:#FF8A4D;} .fc-kpi-hp{background:var(--fc-magenta);} .fc-kpi-rng{background:var(--fc-cyan);} .fc-kpi-time{background:#B98CFF;} .fc-kpi-pwr{background:#FFD23D;} .fc-kpi-rate{background:#2DD4BF;} .fc-kpi-mult{background:var(--fc-ink-dim);} /* Wrench — configure/swap, top-right corner of every tile via .fc-layer-top's flex row (not absolutely positioned). Same 34×22 box as a batch pill (.fc-batch above), not just the same height, so the actions row reads as one consistent size with the pills row above it. */ .fc-wrench{width:34px;height:22px;flex:none;display:flex;align-items:center;justify-content:center; background:rgba(154,140,190,.12);border:1px solid var(--fc-edge-strong);border-radius:3px;color:var(--fc-ink-dim); cursor:pointer;font-family:inherit;transition:color .12s,border-color .12s,background .12s;} .fc-wrench:hover{color:var(--fc-cyan);border-color:var(--fc-cyan);background:rgba(var(--fc-cyan-rgb),.12);} .fc-wrench i{font-size:10px;} /* Same icon-button shape as the wrench, but persistently lit (not just on hover) — it's showing the tile is already linked, not a hover affordance. */ .fc-wrench-linked{color:var(--fc-cyan);border-color:var(--fc-cyan);background:rgba(var(--fc-cyan-rgb),.12);} /* A merged row's LINK slot (fleetBuildNodeRowHtml()) — linking is a single instance's own relationship, so a merged "×N" row can't act on it, but keeps the slot's space reserved rather than collapsing the actions column by one. */ .fc-wrench-disabled{opacity:.35;cursor:not-allowed;} .fc-wrench-disabled:hover{color:var(--fc-ink-dim);border-color:var(--fc-edge-strong);background:rgba(154,140,190,.12);} /* Power Management widget (fleetBuildPowerWidgetHtml()) — real stats.ResourceNetwork draw/pip data, see that function's own comment. */ .fc-pwr-mini{padding:10px;} .fc-pwr-mini-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} .fc-pwr-mini-title{font-size:14px;font-weight:800;color:var(--fc-ink);} .fc-pwr-mini-budget{font-size:15px;font-weight:800;color:var(--fc-cyan);} .fc-pwr-mini-budget span{color:var(--fc-ink-faint);font-size:10.5px;font-weight:600;} /* Compact segmented profile switch sitting between the title and budget figure — margin:0 keeps .type-toggle's own centering/margin-bottom rules from fighting this header's flex layout. */ .fc-pwr-mode-toggle{margin:0;gap:4px;} /* Bigger hit target than the type-toggle default (SCM/NAV is switched often while tuning a build) — EM/IR's own row was dropped from this widget (already shown in the KPI header above) to make room. */ .fc-pwr-mode-toggle button{min-width:0;padding:6px 14px;font-size:13px;} .fc-pwr-cols{display:flex;gap:8px;padding-top:14px;align-items:flex-end;flex-wrap:wrap;} .fc-pwr-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;} .fc-pwr-col.idle{opacity:.45;} .fc-pwr-col.off{opacity:.4;} /* Structurally blocked by the active SCM/NAV mode, not a user off-toggle — dimmer than .off and no pointer cursor on its pips, since clicking does nothing here (fleetBuildPowerWidgetHtml()'s locked branch omits data-action entirely). */ .fc-pwr-col.locked{opacity:.3;} .fc-pwr-col.locked .fc-pwr-pip{cursor:default;} .fc-pwr-col.locked .fc-pwr-col-code{cursor:default;} .fc-pwr-col-n{font-size:11px;font-weight:700;color:var(--fc-ink);} .fc-pwr-col-stack{display:flex;flex-direction:column-reverse;gap:3px;width:24px;} .fc-pwr-pip{height:11px;width:100%;flex:none;border-radius:2px;background:var(--fc-edge);border:0;padding:0;cursor:pointer;font-family:inherit;} .fc-pwr-pip.on{background:linear-gradient(180deg,#4FC8FF,var(--fc-cyan));} .fc-pwr-pip.frame{background:none;border:1px dashed var(--fc-edge);} .fc-pwr-pip:hover{box-shadow:0 0 0 1px var(--fc-cyan);} .fc-pwr-col-code{font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--fc-ink-faint); background:none;border:0;padding:0;cursor:pointer;font-family:inherit;} .fc-pwr-col-code:hover{color:var(--fc-cyan);} .fc-meter-row{display:flex;align-items:center;gap:8px;padding-top:12px;} .fc-meter-label{font-size:10px;color:var(--fc-ink-faint);text-transform:uppercase;letter-spacing:.04em;flex:none;width:52px;} .fc-meter-track{flex:1;height:6px;border-radius:3px;background:var(--fc-edge);overflow:hidden;} .fc-meter-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--fc-cyan),#4FC8FF);} .fc-meter-val{font-size:10px;font-weight:700;color:var(--fc-ink);flex:none;font-variant-numeric:tabular-nums;} .fc-meter-row.over .fc-meter-fill{background:var(--danger-text);} .fc-meter-row.over .fc-meter-val{color:var(--danger-text-hover);} /* Background is the same solid --bg-panel tone .panel's own body uses, not a low-opacity overlay wash — an overlay wash alone read as "hovering above the page" in dark mode but nearly flat in light mode, since a dark wash at the same low opacity barely shifts a near-white page. A solid fill plus --shadow-tile reads as a clearly raised surface in both themes. */ .home-card{cursor:pointer;padding:16px;background:var(--bg-panel);border:1px solid rgba(var(--overlay-rgb),0.08);border-radius:6px;box-shadow:var(--shadow-tile);transition:border-color .15s,background .15s;display:flex;flex-direction:column;min-height:110px;} /* No transform on hover — a transform on this ancestor would make it the containing block for any position:fixed descendant, breaking the "⋯" row-menu dropdown's viewport-relative positioning math. Border-color/ background already convey the hover state without a lift. */ .home-card:hover{border-color:rgba(var(--accent-rgb),0.35);background:linear-gradient(rgba(var(--accent-rgb),0.05),rgba(var(--accent-rgb),0.05)),var(--bg-panel);} .home-card-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;} .home-card-head i{font-size:14px;color:var(--accent);flex-shrink:0;} .home-card-label{font-size:12px;font-weight:700;letter-spacing:1px;color:var(--text);} .home-card-hint{font-size:12px;color:var(--text-dim);} /* Vault shortcut icons get their own bottom row — inline in the head row they crowded the vault name on narrow tiles. margin-top:auto pins the row to the tile's bottom edge so hints of different lengths don't push the icons around between tiles. */ .home-card-actions{margin-top:auto;padding-top:10px;border-top:1px solid rgba(var(--overlay-rgb),0.06);display:flex;} .home-card-actions .vault-actions{margin-left:0;gap:6px;} .home-card-ghost{border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--text-dim);} .home-card-ghost:hover{color:var(--accent);transform:none;} .home-card-ghost i{font-size:16px;} .home-card-ghost .home-card-label{color:inherit;} /* Per-vault Dashboard KPI tiles — sit inside a plain .home-grid row (same responsive grid as the Home cards above), just with a static-number look instead of a clickable card. */ .kpi-tile{padding:14px 16px;background:var(--bg-panel);border:1px solid rgba(var(--overlay-rgb),0.08);border-radius:6px;box-shadow:var(--shadow-tile);min-height:70px;display:flex;flex-direction:column;justify-content:center;transition:border-color .15s,background .15s;} .kpi-tile[data-action]:hover{border-color:rgba(var(--accent-rgb),0.35);background:linear-gradient(rgba(var(--accent-rgb),0.05),rgba(var(--accent-rgb),0.05)),var(--bg-panel);} .kpi-tile-value{font-size:22px;font-weight:700;color:var(--accent);line-height:1.2;} .kpi-tile-label{font-size:11px;color:var(--text-dim);margin-top:2px;} /* Home's card grid splits into zone-labeled groups — YOUR VAULTS / SHORTCUTS. Same small-caps treatment as .sidebar-section-label. */ .grid-zone-label{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase;margin:16px 0 8px;} .grid-zone-label:first-child{margin-top:0;} /* Crafting Plan "duo" — YOUR CRAFTING PLAN | MATERIALS NEEDED side by side, same shape as .uex-duo's own two-up layout. */ .craft-plan-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;} @media (max-width:900px){.craft-plan-duo{grid-template-columns:1fr;}} .craft-plan-row-scoped td{background:rgba(var(--accent-rgb),0.06);} /* Crafting Plan folders (GENERAL + one per contributing ship build) — each is its own small table, stacked with a labeled head between them. */ .craft-plan-folder + .craft-plan-folder{margin-top:16px;} .craft-plan-folder-head{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px;color:var(--text-dim);margin-bottom:6px;user-select:none;} .craft-plan-folder-head:hover{color:var(--text-secondary);} .inv-search{width:100%;margin-bottom:0;} /* App shell — fluid, centered, non-edge-to-edge main content */ .status-line{font-size:10px;letter-spacing:1px;color:var(--text-dim);display:flex;gap:8px;align-items:center;} .status-dot{width:6px;height:6px;border-radius:50%;background:var(--component);} .status-dot.offline{background:var(--danger);} /* --vault-color-active/-bg (set on body by applyActiveVaultAccent() in app.js) tint every panel while a colored Group Vault is the active view — falls back to the flat border/dark header/dim header text on Private Vault, non-vault routes, or a vault with no color picked, since the var is unset in those cases. Header text is tinted too; every palette hex sits in the L 44-70% band, legible against the header bg. */ .panel{width:100%;border:1px solid rgba(var(--overlay-rgb),0.08);border-left:3px solid var(--vault-color-active, transparent);border-radius:6px;overflow:hidden;background:var(--bg-panel);box-shadow:var(--shadow-panel);} /* No-color-picked fallback uses rgba(var(--overlay-rgb),X) rather than a fixed-opacity black — a flat black wash reads as a medium-gray band on the light theme that blends into the page instead of standing out; the relative-to-current-surface wash is the same technique every other "distinguish this band from its parent" rule in this file uses. */ /* display:flex + space-between: the label and action-button group are laid out as two flex children instead of relying on inline text flow, so a wrapped .panel-actions group can't visually collide with the label text in a narrow column. flex-wrap drops the actions to their own full-width line instead. */ .panel-header{padding:10px 16px;border-bottom:1px solid var(--border-strong);background:var(--vault-color-active-bg, rgba(var(--overlay-rgb),0.06));font-size:11px;letter-spacing:3px;color:var(--vault-color-active, var(--text-dim));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:8px;column-gap:16px;} .panel-header.clickable{cursor:pointer;user-select:none;} .panel-header.clickable:hover{color:var(--text-secondary);} .panel-header.clickable.active{color:var(--accent);background:rgba(var(--accent-rgb),0.08);} .panel-header.clickable.pink.active{color:var(--accent-2);background:rgba(var(--accent-2-rgb),0.08);} /* A panel-header's action button group — flex (not full-width block) so it sits directly after the header's label text, wrapping onto its own full-width line (courtesy of the parent's flex-wrap above) instead of overflowing or overlapping the label in a narrow grid column. */ .panel-actions{display:flex;flex-wrap:wrap;gap:8px;} .header-hint{letter-spacing:1px;opacity:0.55;font-size:10px;} .panel-body{padding:14px 16px;} .summary-row{display:flex;align-items:center;gap:10px;padding:7px 10px;background:rgba(var(--overlay-rgb),0.06);border-left:2px solid var(--border-strong);border-radius:0 3px 3px 0;margin-bottom:4px;} .sum-mat{font-size:13px;font-weight:700;color:var(--text);width:130px;flex-shrink:0;} .sum-bands{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0;} .band-chip{font-size:11px;color:var(--text-secondary);background:rgba(var(--accent-rgb),0.05);border:1px solid rgba(var(--accent-rgb),0.15);border-radius:3px;padding:2px 7px;white-space:nowrap;font-family:inherit;cursor:pointer;} .band-chip b{color:var(--accent);font-weight:700;margin-right:4px;} .band-chip:not(.static):hover{background:rgba(var(--accent-rgb),0.15);color:var(--text);} .band-chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);} .band-chip.active b{color:var(--on-accent);} .band-chip.static{cursor:default;} .sum-scu{font-size:13px;color:var(--text);width:90px;text-align:right;flex-shrink:0;} .sum-count{font-size:10px;color:var(--text-tertiary);width:30px;text-align:right;flex-shrink:0;} /* Per-vault color picker (Vault Preferences modal) — one swatch per VAULT_PALETTE entry, background set inline in JS since every swatch shows a different color simultaneously. .selected marks the member's current pick for that vault. */ .vault-swatch-row{display:flex;gap:6px;padding:4px 10px 10px;flex-wrap:wrap;} .vault-swatch{width:18px;height:18px;border-radius:50%;border:2px solid transparent; cursor:pointer;padding:0;transition:border-color .12s,transform .12s;} .vault-swatch:hover{transform:scale(1.15);} .vault-swatch.selected{border-color:var(--text);} /* "No color / back to default" chip — classic strike-through swatch. Selected (i.e. no color currently picked) still gets the same border ring as any other selected swatch. */ .vault-swatch-default{background:linear-gradient(135deg, transparent 42%, var(--text-dim) 46%, var(--text-dim) 54%, transparent 58%) rgba(var(--overlay-rgb),0.04);} .vault-actions{display:flex;gap:2px;margin-left:auto;flex-shrink:0;} .vault-header{display:flex;align-items:center;gap:10px;padding:10px 16px;} .vault-header > i{color:var(--vault-color-active, var(--accent));font-size:14px;flex-shrink:0;} .vault-header-name{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--text);} /* Personal budget widget (Private Vault header only) — sits between the vault name and the icon-button cluster; its own auto margin pushes it (and everything after it) flush right. */ .vault-budget{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:11px;color:var(--text-dim);cursor:pointer;white-space:nowrap;} .vault-budget i{color:var(--vault-color-active, var(--accent));font-size:12px;} .vault-budget-text{color:var(--text);font-weight:700;} .vault-budget-committed{color:var(--text-dim);} .vault-budget-over .vault-budget-committed{color:var(--danger);font-weight:700;} .vault-budget-editing{cursor:default;} .vault-budget-input{width:110px;font-size:11px;padding:3px 6px;} /* Search picker (storefront material items / group tax overrides) — type-to-filter results as a checkbox list; checking activates the material for configuration. */ .picker-results{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:180px;overflow-y:auto;} .picker-check{display:flex;gap:8px;align-items:center;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:4px;} .picker-check:hover{background:rgba(var(--accent-rgb),0.06);} .picker-check-locked{cursor:default;opacity:0.75;} .picker-check-locked:hover{background:none;} /* Storefront modal — list level: one dense row per storefront, name + compact inline budget bar + meta + EDIT. */ .sf-list-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(var(--overlay-rgb),0.06);border:1px solid rgba(var(--overlay-rgb),0.08);border-radius:4px;margin-bottom:4px;flex-wrap:wrap;} .sf-list-row-main{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;flex-wrap:wrap;} .sf-list-row-bar{display:flex;align-items:center;gap:6px;width:110px;flex-shrink:0;} .sf-list-row-bar-track{flex:1;height:6px;border-radius:3px;background:rgba(var(--overlay-rgb),0.08);overflow:hidden;} .sf-list-row-bar-fill{height:100%;} .sf-list-row-actions{display:flex;gap:6px;align-items:center;flex-shrink:0;} /* Mining locations (#/mining) — expanded rock-type DETAILS block: per-ore composition range bars (fill spans the ore's min–max share of the rock, positioned inline via left/width percentages) plus a dimmed expected- inert remainder row. The fill is absolutely positioned to start mid-track, so these can't share classes with the width-only storefront budget bar. */ /* Mining locations material-search results: a responsive TILE GRID (.mining-tile-grid/.mining-tile), distinct from the method-grouped browse ROWS above (.mining-row) — only the ranked search results use tiles. Each tile keeps the place+system (search spans multiple systems/ planets, so it's never redundant here), a combined-chance headline, per-material chips, and the scan-for hint. */ .mining-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;} .mining-tile{border:1px solid rgba(var(--overlay-rgb),0.08);border-radius:6px;padding:10px;background:rgba(var(--overlay-rgb),0.06);display:flex;flex-direction:column;gap:6px;} .mining-tile-place{display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .mining-tile-combined{font-size:20px;font-weight:700;color:var(--accent);white-space:nowrap;} .mining-tabbar-sub{border-bottom:none;margin-top:-6px;} .mining-tabbar-sub .tab{font-size:10px;padding:5px 10px;letter-spacing:1px;} .mining-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;} /* CHANCE/NAME sort toggle above the browse view's method sections — small ghost-button pill, same .btn-ghost/.active language as craft-plan.js's comp-type toggle. */ .mining-sort-toggle{display:flex;align-items:center;gap:6px;margin-bottom:10px;} .mining-search-pill-row{margin-bottom:10px;} .mining-cat{margin-bottom:14px;} /* 0.08, one step above the shared 0.06 list-row floor — this is a "head" row above plain .mining-row body rows and should stay visibly heavier than them, not fall to the same wash. */ .mining-cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:7px 10px;background:rgba(var(--overlay-rgb),0.08);border:1px solid rgba(var(--overlay-rgb),0.08);border-radius:6px 6px 0 0;font-size:11px;font-weight:700;letter-spacing:1.5px;} .mining-cat-note{color:var(--text-dim);font-weight:400;letter-spacing:0.5px;font-size:10px;} .mining-row{border:1px solid rgba(var(--overlay-rgb),0.06);border-top:none;} .mining-row:last-child{border-radius:0 0 6px 6px;} .mining-row.on{background:rgba(var(--overlay-rgb),0.06);} /* .mining-row-main is a role="button" DIV, not a