/* c4.css - C4 Live (2026-11-06). Loaded after the shared ResourcesExplorer/styles.css + resource-visual.css (header,
   fonts, --cyan, --line, faction colours --mud --oni --ust). Full-bleed map hero with a glass HUD, four tabbed
   sections, an owner drawer.
   Motion: staggered card rise, bar growth (scaleX), count-up numbers (JS), drawer spring, feed slide-in, live dot.
   All of it is off under prefers-reduced-motion. Chart colours: fleet combat #3987e5 / starbase combat #d95926
   (dataviz validator: dark, surface #04060f, PASS all checks); factions use the house identity colours and are
   always labelled by name (oni/ustur sit at CVD dE 6.0, legal only with that secondary encoding). */

:root {
    --npc: #8a94a6;
    --s-fleet: #3987e5;
    --s-sb: #d95926;
    --glass: rgba(6, 10, 22, 0.62);
    --glass-strong: rgba(6, 10, 22, 0.86);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --expo: cubic-bezier(0.16, 1, 0.3, 1);
}
[hidden] { display: none !important; }
/* v2 (2026-11-07): the map is the page. html/body never scroll; the stage is fixed to the viewport (100vw x 100dvh)
   and every panel floats on it. --dock-w (dock width) and --ins-r / --ins-b (map px covered, the same numbers sent to
   scene.setInsets) are written by app.js. */
html.c4-full, html.c4-full body { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-behavior: auto; }
body.c4-app { min-height: 0; margin: 0; }
:root { --dock-w: 440px; --rail: 58px; --edge: 12px; --ins-r: 0px; --ins-b: 0px; --acc: var(--cyan); }
.c4-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-left: 0.4rem; vertical-align: 2px; box-shadow: 0 0 0 0 rgba(126, 232, 164, 0.6); animation: c4-live 2.4s infinite; }
.c4-live-dot.stale { background: var(--warn); animation: none; }
@keyframes c4-live { 0% { box-shadow: 0 0 0 0 rgba(126, 232, 164, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(126, 232, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 232, 164, 0); } }

/* ------------------------------------------------------------------ stage (full-viewport map) */
.c4-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; background: radial-gradient(80% 70% at 50% 45%, #0b1430 0%, #04060f 70%); overflow: hidden; }
.c4-map { position: absolute; inset: 0; }
/* top bar: slim brand / back link + the KPI bar, across the area the dock leaves open */
.c4-topbar { position: absolute; z-index: 5; top: var(--edge); left: var(--edge); right: calc(var(--ins-r) + var(--edge)); display: flex; align-items: stretch; gap: 0.6rem; pointer-events: none; }
.c4-topbar > * { pointer-events: auto; }
.c4-brand { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.8rem 0.35rem 0.4rem; text-decoration: none; color: inherit; flex: none; transition: border-color 0.2s, box-shadow 0.2s; }
.c4-brand:hover { border-color: var(--line-strong); box-shadow: 0 0 24px rgba(79, 216, 255, 0.12); }
.c4-brand img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); }
.c4-brand-t { display: flex; flex-direction: column; line-height: 1.1; }
.c4-brand-t small { font-family: 'Orbitron', sans-serif; font-size: 0.46rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); }
.c4-brand-t h1 { margin: 0; font-family: 'Orbitron', sans-serif; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(79, 216, 255, 0.35); white-space: nowrap; }
.c4-nomap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 2rem; }
.c4-nomap b { color: var(--text-secondary); }
.c4-hud { position: absolute; z-index: 3; pointer-events: none; }
.c4-hud > * { pointer-events: auto; }
.c4-glass { background: var(--glass); border: 1px solid var(--line); border-radius: 12px; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.c4-hud-top { flex: 1 1 auto; min-width: 0; max-width: 1200px; container-type: inline-size; }
/* v3 (2026-11-07): nothing in the KPI bar is ever ellipsised. Labels and sub-lines wrap (at most two short lines, the
   value row stays aligned at the bottom); where the bar is too narrow for the sub-lines they are hidden and app.js puts
   their text in the KPI's tooltip. Wide (>= 900 px): label + value + sub-line. 560-899: label + value, 8 across.
   < 560: label + value, 4 x 2. */
.c4-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 0.45rem 0.25rem; height: 100%; box-sizing: border-box; align-content: center; }
.c4-kpi { padding: 0.1rem 0.55rem; border-left: 1px solid rgba(120, 200, 255, 0.1); min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.c4-kpi:first-child { border-left: 0; }
.c4-kpi span { display: block; font-family: 'Orbitron', sans-serif; font-size: 0.5rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); overflow-wrap: break-word; }
.c4-kpi b { display: block; font-family: 'Orbitron', sans-serif; font-weight: 600; font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; margin-top: auto; }
.c4-kpi small { display: block; font-size: 0.68rem; line-height: 1.25; color: var(--text-muted); overflow-wrap: break-word; }
@container (max-width: 899px) { .c4-kpi small { display: none; } .c4-kpi { padding: 0.1rem 0.45rem; } .c4-kpi span { letter-spacing: 0.06em; } .c4-kpi b { font-size: 0.95rem; } }
@container (max-width: 559px) { .c4-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.35rem; } .c4-kpi:nth-child(5) { border-left: 0; } }
.c4-kpi.hot b { color: var(--cyan); text-shadow: 0 0 18px rgba(79, 216, 255, 0.45); }
.c4-hud-left { left: var(--edge); top: calc(var(--kpi-b, 76px) + 0.6rem); display: flex; flex-direction: column; gap: 0.5rem; max-width: 190px; max-height: calc(100% - var(--kpi-b, 76px) - 7rem); overflow-y: auto; scrollbar-width: none; }
.c4-box { padding: 0.55rem 0.6rem; }
.c4-box h4 { margin: 0 0 0.4rem; font-family: 'Orbitron', sans-serif; font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.c4-chip { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.22rem 0.5rem; border-radius: 6px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.c4-chip:hover { border-color: var(--line-strong); color: #fff; }
.c4-chip.on { border-color: var(--cyan); color: #fff; background: rgba(79, 216, 255, 0.1); }
.c4-chip .dot { margin: 0; }
.c4-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.c4-layer { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; padding: 0.1rem 0; user-select: none; }
.c4-layer input { accent-color: var(--cyan); margin: 0; }
.c4-hud-bottom { left: var(--edge); bottom: calc(var(--ins-b) + var(--edge)); right: calc(var(--ins-r) + var(--edge)); display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.c4-age { padding: 0.35rem 0.7rem; font-size: 0.78rem; color: var(--text-secondary); }
.c4-age b { color: #fff; font-weight: 600; }
.c4-age.stale { border-color: rgba(255, 184, 107, 0.5); color: var(--warn); }
.c4-tip { position: fixed; z-index: 210; pointer-events: none; background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.8rem; color: var(--text-secondary); max-width: 280px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.c4-tip b { color: #fff; display: block; font-size: 0.86rem; }
.c4-tip em { font-style: normal; color: var(--text-muted); }
.c4-ctip { position: fixed; z-index: 220; pointer-events: none; background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.35rem 0.55rem; font-size: 0.78rem; color: var(--text-secondary); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); max-width: 260px; }
.c4-ctip b { color: #fff; }

/* ------------------------------------------------------------------ the analytics dock (v2): right-side glass, on the map */
.c4-dock[data-acc="mining"] { --acc: #7ee8a4; } .c4-dock[data-acc="combat"] { --acc: #ff7a6b; }
.c4-dock[data-acc="fleets"] { --acc: #4fd8ff; } .c4-dock[data-acc="owners"] { --acc: #b99bff; } .c4-dock[data-acc="system"] { --acc: #9fb4ff; }
.c4-dock { position: absolute; z-index: 6; top: var(--edge); right: var(--edge); bottom: var(--edge); width: var(--dock-w); display: flex; flex-direction: column; min-height: 0;
    background: linear-gradient(180deg, rgba(8, 13, 28, 0.80), rgba(5, 8, 18, 0.74)); border-color: color-mix(in srgb, var(--acc) 30%, transparent); border-radius: 16px;
    box-shadow: -1px 0 0 color-mix(in srgb, var(--acc) 55%, transparent), -18px 0 48px -18px color-mix(in srgb, var(--acc) 38%, transparent), 0 24px 60px rgba(0, 0, 0, 0.55);
    transition: width 0.55s var(--spring), height 0.55s var(--spring), border-color 0.45s, box-shadow 0.45s; animation: c4-dock-in 0.9s var(--spring) both; }
.c4-dock.resizing { transition: none; user-select: none; }
@keyframes c4-dock-in { from { transform: translateX(calc(100% + 2rem)); opacity: 0; } to { transform: none; opacity: 1; } }
/* the edge glow: a thin light line down the dock's inner left edge in the active tab's accent */
.c4-dock::before { content: ''; position: absolute; left: -1px; top: 14%; bottom: 14%; width: 2px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--acc), transparent); opacity: 0.85; filter: blur(0.3px); transition: background 0.45s; pointer-events: none; }
.c4-dock-grip { position: absolute; left: -6px; top: 0; bottom: 0; width: 12px; cursor: ew-resize; z-index: 2; }
.c4-dock-grip:hover + .c4-dock-head, .c4-dock.resizing { border-color: var(--acc); }
.c4-dock-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.55rem 0.4rem 0.7rem; border-bottom: 1px solid rgba(120, 200, 255, 0.08); }
.c4-tabs { display: flex; align-items: center; gap: 0.2rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.c4-tab { font-family: 'Orbitron', sans-serif; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.5rem 0.62rem; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text-secondary); cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; flex: none; transition: color 0.2s, background 0.25s, border-color 0.25s; }
.c4-tab:hover { color: #fff; }
.c4-tab.active { color: #fff; border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.c4-tab.active::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; background: var(--acc); border-radius: 2px; box-shadow: 0 0 10px var(--acc); }
.c4-tab-sys span { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
/* a wheel zoom into a system leaves the dock alone (2026-11-08) and only pulses the System tab twice */
.c4-tab-sys.pulse { animation: c4-live 1.1s ease-out 2; }
/* v4 tab fit (app.js fitTabs): labels are shed in steps until the row fits - the row never scrolls a tab out of reach */
.c4-tabs[data-fit="1"] .c4-tab:not(.active):not(.c4-tab-sys) span, .c4-tabs[data-fit="2"] .c4-tab:not(.active) span, .c4-tabs[data-fit="3"] .c4-tab span { display: none; }
.c4-tabs[data-fit="1"] .c4-tab:not(.active):not(.c4-tab-sys), .c4-tabs[data-fit="2"] .c4-tab:not(.active), .c4-tabs[data-fit="3"] .c4-tab { padding-left: 0.55rem; padding-right: 0.55rem; }
.c4-tabs[data-fit="1"] .c4-tab-sys span, .c4-tabs[data-fit="2"] .c4-tab-sys span { max-width: 7.5rem; }
.c4-tab .ti { width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; opacity: 0.85; }
.ti-mining { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l5 5-5 9-5-9z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M3 6h10' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.ti-combat { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 0v5M8 11v5M0 8h5M11 8h5' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ti-fleets { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 13-6-3-6 3z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ti-owners { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5' r='3' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M2 15c0-4 3-6 6-6s6 2 6 6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ti-system { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23000'/%3E%3Cellipse cx='8' cy='8' rx='7' ry='3.4' fill='none' stroke='%23000' stroke-width='1.4' transform='rotate(-25 8 8)'/%3E%3C/svg%3E"); }
.c4-dock-toggle { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s, background 0.2s; }
.c4-dock-toggle:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.c4-dock-toggle i { width: 8px; height: 8px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(-45deg); margin-left: -3px; transition: transform 0.4s var(--spring); }
.c4-dock.collapsed .c4-dock-toggle i { transform: rotate(135deg); margin-left: 3px; }
.c4-find { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.8rem 0.45rem; flex-wrap: wrap; }
.c4-find span { font-family: 'Orbitron', sans-serif; font-size: 0.48rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); flex: none; transition: color 0.45s; }
.c4-find input, .c4-search { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 8px; color: #fff; padding: 0.42rem 0.65rem; font-family: 'Exo 2', sans-serif; font-size: 0.82rem; width: 280px; max-width: 100%; }
.c4-find input { flex: 1; min-width: 0; width: auto; }
.c4-find input:focus, .c4-search:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79, 216, 255, 0.15); }
.c4-find-msg { font-size: 0.76rem; color: var(--warn); flex-basis: 100%; }
.c4-dock-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.4rem 0.8rem 1rem; scrollbar-width: thin; scrollbar-color: rgba(120, 200, 255, 0.25) transparent; overscroll-behavior: contain; }
/* collapsed: a slim rail with the tab icons; clicking one (or D) opens the dock again */
.c4-dock.collapsed { width: var(--rail); }
.c4-dock.collapsed .c4-dock-head { flex-direction: column-reverse; padding: 0.55rem 0.4rem; border: 0; gap: 0.6rem; }
.c4-dock.collapsed .c4-tabs { flex-direction: column; overflow: visible; }
.c4-dock.collapsed .c4-tab { padding: 0.55rem; }
.c4-dock.collapsed .c4-tab span { display: none; }
.c4-dock.collapsed .c4-tab .ti { width: 15px; height: 15px; }
.c4-dock.collapsed .c4-tab.active::after { left: auto; right: -1px; top: 20%; bottom: 20%; width: 2px; height: auto; }
.c4-dock.collapsed .c4-find, .c4-dock.collapsed .c4-dock-body, .c4-dock.collapsed .c4-dock-grip { display: none; }

/* ------------------------------------------------------------------ sections (rendered inside the dock, one column) */
.c4-sec { display: none; }
.c4-sec.active { display: block; animation: c4-xin 0.38s var(--expo) both; }
.c4-sec.leaving { opacity: 0; transform: translateX(10px); transition: opacity 0.14s, transform 0.14s; }
@keyframes c4-xin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.c4-verdict { font-family: 'Rajdhani', sans-serif; font-size: 1.08rem; font-weight: 500; line-height: 1.4; color: var(--text-secondary); margin: 0.3rem 0 0.9rem; padding-left: 0.8rem; border-left: 3px solid var(--acc, var(--cyan)); transition: border-color 0.45s; }
.c4-verdict b { color: #fff; font-weight: 700; }
.c4-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.c4-card { grid-column: 1 / -1; background: rgba(9, 13, 28, 0.72); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.85rem 0.9rem; min-width: 0; position: relative; }
/* dock column: tighter bar columns so the track keeps room at 360-460 px */
.c4-dock .c4-bar { grid-template-columns: minmax(78px, 8rem) minmax(40px, 1fr) auto; gap: 0.5rem; }
.c4-dock .c4-res .c4-bar, .c4-dock .c4-res-head { grid-template-columns: minmax(70px, 6.6rem) minmax(36px, 1fr) 4.6rem 5.4rem; gap: 0.45rem; }
.c4-dock .c4-feed { max-height: 440px; }
/* v3: dock tables fit the column (no horizontal scroll, nothing cut at the dock edge). Two-line cells (.c2) carry a
   secondary fact under the first; .opt columns show only when the dock body is at least 520 px wide. */
.c4-dock-body { container-type: inline-size; container-name: dockbody; }
.c4-dock .c4-table { font-size: 0.78rem; }
.c4-dock .c4-table th, .c4-dock .c4-table td { padding: 0.34rem 0.32rem; }
.c4-dock .c4-table th:first-child, .c4-dock .c4-table td:first-child { padding-left: 0.1rem; }
.c4-dock .c4-table thead th { letter-spacing: 0.08em; }
.c4-table.c4-fit { table-layout: auto; }
.c4-table .c2 b, .c4-table .c2 small { display: block; }
.c4-table .c2 b { font-weight: 500; color: #fff; }
.c4-table .c2 small { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }
.c4-table .c2 small .c4-fa, .c4-table .c2 small .c4-st { font-size: 0.64rem; }
.c4-table[data-table="fleets"] .nm { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
.c4-table td.tm { font-size: 0.72rem; color: var(--text-muted); }
@container dockbody (max-width: 519px) { .c4-table .opt { display: none; } }
@container dockbody (max-width: 379px) { .c4-table .opt2 { display: none; } .c4-table[data-table="fleets"] .nm { max-width: 7.5rem; } }
@container dockbody (max-width: 339px) { .c4-table .opt3 { display: none; } }
.c4-card h3 { margin: 0 0 0.15rem; font-family: 'Orbitron', sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc, var(--cyan)); font-weight: 600; transition: color 0.45s; }
.c4-card .sub { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
.c4-card .sub b { color: var(--text-secondary); font-weight: 600; }
.c4-note { font-size: 0.8rem; color: var(--text-muted); padding: 1.2rem 0.6rem; text-align: center; border: 1px dashed rgba(120, 200, 255, 0.18); border-radius: 10px; line-height: 1.5; }
.c4-note b { color: var(--text-secondary); }
.c4-anim .c4-card { animation: c4-rise 0.65s var(--expo) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes c4-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* bars: an HTML bar row; the fill grows with scaleX */
.c4-bars { display: flex; flex-direction: column; gap: 0.32rem; }
.c4-bar { display: grid; grid-template-columns: minmax(90px, 9.5rem) minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: 0.82rem; cursor: default; }
.c4-bar.click { cursor: pointer; }
.c4-bar.click:hover .lab { color: #fff; }
.c4-bar .lab { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c4-bar .trk { height: 10px; background: rgba(255, 255, 255, 0.04); border-radius: 0 4px 4px 0; overflow: hidden; display: flex; gap: 2px; }
.c4-bar .trk i { display: block; height: 100%; width: var(--w); background: var(--c, var(--cyan)); border-radius: 0 4px 4px 0; transform-origin: left center; flex: none; }
.c4-anim .c4-bar .trk i { animation: c4-grow 0.9s var(--expo) both; animation-delay: calc(var(--i, 0) * 35ms + 120ms); }
@keyframes c4-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.c4-bar .val { font-family: 'Orbitron', sans-serif; font-size: 0.66rem; color: #fff; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; min-width: 4.5rem; }
.c4-bar .val em { font-style: normal; color: var(--text-muted); font-family: 'Rajdhani', sans-serif; font-size: 0.78rem; margin-left: 0.35rem; }
.c4-bar.on .lab { color: #fff; } .c4-bar.on .trk { box-shadow: 0 0 0 1px var(--cyan); }
.c4-res .c4-bar { grid-template-columns: minmax(90px, 9rem) minmax(0, 1fr) 5.2rem 6.6rem; }
.c4-res .live { font-family: 'Orbitron', sans-serif; font-size: 0.66rem; color: var(--cyan); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c4-res-head { display: grid; grid-template-columns: minmax(90px, 9rem) minmax(0, 1fr) 5.2rem 6.6rem; gap: 0.6rem; font-family: 'Orbitron', sans-serif; font-size: 0.48rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.3rem; }
.c4-res-head span:nth-child(n+3) { text-align: right; }
.c4-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.76rem; color: var(--text-secondary); margin: 0 0 0.5rem; }
.c4-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }

/* tables */
.c4-tw { overflow-x: auto; }
.c4-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.c4-table th, .c4-table td { padding: 0.38rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-align: right; white-space: nowrap; }
.c4-table th:first-child, .c4-table td:first-child, .c4-table .l { text-align: left; }
.c4-table thead th { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; position: sticky; top: 0; background: rgba(9, 13, 28, 0.98); }
.c4-table thead th[data-sort] { cursor: pointer; }
.c4-table thead th[data-sort]:hover { color: #fff; }
.c4-table thead th.sorted { color: var(--cyan); }
.c4-table td { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.c4-table td.n { font-family: 'Orbitron', sans-serif; font-size: 0.64rem; color: #fff; }
.c4-table tbody tr { cursor: pointer; transition: background 0.15s; }
.c4-table tbody tr:hover { background: rgba(79, 216, 255, 0.06); }
.c4-table .addr { font-family: 'Exo 2', monospace; color: #fff; }
.c4-more { margin-top: 0.6rem; background: none; border: 1px solid var(--line); color: var(--text-secondary); border-radius: 8px; padding: 0.35rem 0.8rem; cursor: pointer; font-size: 0.78rem; }
.c4-more:hover { border-color: var(--cyan); color: #fff; }
.c4-tools { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.c4-tools .cnt { font-size: 0.78rem; color: var(--text-muted); }

/* faction tags */
.c4-fa { display: inline-flex; align-items: center; gap: 0.3rem; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.c4-fa i { width: 8px; height: 8px; border-radius: 50%; background: var(--fc); display: inline-block; }
.fc-mud { --fc: var(--mud); } .fc-oni { --fc: var(--oni); } .fc-ustur { --fc: var(--ust); } .fc-npc, .fc-unaligned { --fc: var(--npc); }
.c4-st { display: inline-block; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 4px; border: 1px solid var(--line); color: var(--text-secondary); }
.st-mining { color: var(--ok); border-color: rgba(126, 232, 164, 0.4); }
.st-warp, .st-subwarp { color: var(--cyan); border-color: rgba(79, 216, 255, 0.4); }
.st-destroyed, .st-respawn { color: var(--bad); border-color: rgba(255, 122, 107, 0.45); }

/* SVG charts */
.c4-svg { width: 100%; height: auto; display: block; overflow: visible; }
.c4-svg .ax { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.c4-svg .gl { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.c4-svg text { fill: var(--text-muted); font-family: 'Rajdhani', sans-serif; font-size: 11px; }
.c4-svg .hit { fill: transparent; cursor: crosshair; }
.c4-svg .hit:hover + g rect, .c4-svg .col:hover rect { opacity: 0.85; }
.c4-svg .ln { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; }
.c4-svg .ar { fill: url(#c4gradA); }
.c4-svg .mk { fill: var(--cyan); stroke: #04060f; stroke-width: 2; }
.c4-svg .xh { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.c4-anim .c4-svg .ln { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: c4-draw 1.2s var(--expo) 0.2s forwards; }
.c4-anim .c4-svg .colr { transform-box: fill-box; transform-origin: bottom; animation: c4-up 0.8s var(--expo) both; animation-delay: calc(var(--i, 0) * 25ms + 100ms); }
@keyframes c4-draw { to { stroke-dashoffset: 0; } }
@keyframes c4-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* faction-vs-faction matrix */
.c4-mx { display: grid; gap: 3px; font-size: 0.78rem; }
.c4-mx div { padding: 0.45rem 0.3rem; text-align: center; border-radius: 4px; }
.c4-mx .h { font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); background: none; }
.c4-mx .c { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: #fff; background: rgba(57, 135, 229, var(--a)); }
.c4-mx .c.z { color: var(--text-dim); }

/* feed */
.c4-feed { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; }
.c4-feed li { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.38rem 0.5rem 0.38rem 0; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.c4-feed li:hover { background: rgba(79, 216, 255, 0.06); }
.c4-feed li > i { align-self: stretch; border-radius: 2px; background: var(--s-fleet); }
.c4-feed li.k-starbaseCombat > i, .c4-feed li.k-captured > i { background: var(--s-sb); }
.c4-feed li.k-destroyed > i { background: var(--bad); }
.c4-feed .f1 { color: #fff; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.c4-feed .f2 { color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.c4-feed .tm { font-size: 0.72rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.c4-feed .hpb { display: inline-block; width: 46px; height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; vertical-align: 2px; margin-left: 0.3rem; overflow: hidden; }
.c4-feed .hpb b { display: block; height: 100%; background: var(--ok); width: var(--w); }
.c4-feed .hpb.low b { background: var(--bad); }
.c4-anim .c4-feed li { animation: c4-slide 0.5s var(--expo) both; animation-delay: calc(var(--i, 0) * 30ms); }
.c4-feed li.fresh { animation: c4-slide 0.6s var(--spring) both !important; background: rgba(79, 216, 255, 0.08); }
@keyframes c4-slide { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.c4-seed { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 3px; padding: 0 0.25rem; margin-left: 0.3rem; }

/* lists */
.c4-list { list-style: none; margin: 0; padding: 0; }
.c4-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.36rem 0.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; }
.c4-list li:hover { color: #fff; }
.c4-list li .n { font-family: 'Orbitron', sans-serif; font-size: 0.66rem; color: #fff; white-space: nowrap; }
.c4-list li .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ drawer */
.c4-scrim { position: fixed; inset: 0; z-index: 190; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.3s; }
.c4-scrim.show { opacity: 1; }
/* v2: the drawer slides in OVER the dock (same edge, at least the dock width), so the map centre stays clear */
.c4-drawer { position: fixed; top: var(--edge); right: var(--edge); bottom: var(--edge); z-index: 200; width: max(var(--dock-w), 420px); max-width: calc(100vw - 2 * var(--edge)); box-sizing: border-box; background: rgba(6, 9, 20, 0.95); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6), -1px 0 0 rgba(79, 216, 255, 0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateX(calc(100% + 2rem)); transition: transform 0.55s var(--spring); overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.2rem 2rem; outline: none; }
.c4-drawer.open { transform: none; }
.c4-drawer .x { position: absolute; top: 0.8rem; right: 0.9rem; background: none; border: 1px solid var(--line); color: var(--text-secondary); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; }
.c4-drawer .x:hover { color: #fff; border-color: var(--cyan); }
.c4-drawer .kind { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); }
.c4-drawer h2 { margin: 0.2rem 0 0.3rem; font-family: 'Orbitron', sans-serif; font-size: 1.15rem; color: #fff; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding-right: 2.4rem; }
.c4-drawer .full { font-size: 0.7rem; color: var(--text-dim); word-break: break-all; margin-bottom: 0.6rem; }
.c4-copy { background: none; border: 1px solid var(--line); color: var(--text-secondary); border-radius: 6px; font-size: 0.68rem; padding: 0.15rem 0.45rem; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.c4-copy:hover { color: #fff; border-color: var(--cyan); }
.c4-copy.ok { color: var(--ok); border-color: var(--ok); }
.c4-drawer .c4-verdict { font-size: 1.05rem; margin: 0.4rem 0 0.9rem; }
.c4-dstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.9rem; }
.c4-dstats div { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(120, 200, 255, 0.1); border-radius: 10px; padding: 0.45rem 0.6rem; }
.c4-dstats span { display: block; font-family: 'Orbitron', sans-serif; font-size: 0.46rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.c4-dstats b { font-family: 'Orbitron', sans-serif; font-size: 0.92rem; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.c4-dsec { margin: 1rem 0 0.4rem; font-family: 'Orbitron', sans-serif; font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); display: flex; justify-content: space-between; align-items: center; }
.c4-act { background: rgba(79, 216, 255, 0.1); border: 1px solid var(--cyan); color: #fff; border-radius: 8px; padding: 0.4rem 0.8rem; cursor: pointer; font-family: 'Orbitron', sans-serif; font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; }
.c4-act:hover { background: rgba(79, 216, 255, 0.2); }
.c4-act:disabled { opacity: 0.4; cursor: default; }
.c4-spark { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.35rem; }
.c4-spark svg { width: 100%; height: 26px; }
.c4-spark b { font-family: 'Orbitron', sans-serif; font-size: 0.66rem; color: #fff; }
.c4-xp .c4-bar { grid-template-columns: 6.5rem minmax(0, 1fr) 6.4rem; }
.c4-drawer .c4-anim-in { animation: c4-rise 0.5s var(--expo) both; animation-delay: calc(var(--i, 0) * 60ms + 150ms); }

/* ------------------------------------------------------------------ empty state */
.c4-empty { position: fixed; inset: 0; z-index: 230; display: flex; align-items: center; justify-content: center; background: rgba(4, 6, 15, 0.92); padding: 2rem; }
.c4-empty > div { max-width: 560px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 16px; padding: 1.6rem 1.8rem; color: var(--text-secondary); line-height: 1.55; }
.c4-empty h2 { margin: 0 0 0.6rem; font-family: 'Orbitron', sans-serif; font-size: 1rem; color: #fff; }
.c4-empty code { display: block; margin: 0.7rem 0; padding: 0.6rem 0.8rem; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--line); border-radius: 8px; color: var(--cyan); font-size: 0.86rem; }
.c4-empty a { color: var(--cyan); }
.c4-loading { text-align: center; }
.c4-spin { display: block; width: 34px; height: 34px; margin: 0 auto 0.9rem; border: 3px solid var(--line-strong); border-top-color: var(--cyan); border-radius: 50%; animation: c4-spin 0.9s linear infinite; }
@keyframes c4-spin { to { transform: rotate(360deg); } }
.c4-saved { display: flex; align-items: center; gap: 0.7rem; }
.c4-refresh { padding: 0.2rem 0.65rem; font: inherit; font-weight: 600; color: var(--cyan); background: transparent; border: 1px solid var(--cyan); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.c4-refresh:hover:not(:disabled) { background: rgba(62, 200, 255, 0.14); }
.c4-refresh:disabled { color: var(--text-muted); border-color: var(--line-strong); cursor: default; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .c4-anim .c4-svg .ln { stroke-dashoffset: 0; }
}
.c4-drawer .sub { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin: 0.3rem 0 0; }
.c4-hud-bottom { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0.35rem; }
.c4-age.stopped { border-color: rgba(255, 122, 107, 0.7); color: var(--bad); background: rgba(40, 8, 8, 0.75); }
.c4-age.stopped b { color: #fff; }
.c4-age .sm { display: none; }
.c4-qual { border-color: rgba(255, 184, 107, 0.55); color: var(--warn); }

/* ------------------------------------------------------------------ system view (a fifth, contextual dock view in v2) + body drawer */
.c4-sp-head { padding-top: 0.3rem; }
.c4-syspanel .kind { font-family: 'Orbitron', sans-serif; font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc, var(--cyan)); }
.c4-syspanel h2 { margin: 0.15rem 0 0.4rem; font-family: 'Orbitron', sans-serif; font-size: 1.05rem; color: #fff; }
.c4-syspanel .c4-verdict { font-size: 1rem; margin: 0.3rem 0 0.8rem; }
.c4-syspanel .c4-act { float: right; }
.c4-syspanel .sub, .c4-drawer .sub { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; margin: 0.4rem 0 0; }
.c4-sp-states { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; font-size: 0.8rem; color: #fff; }
.c4-bodies li { justify-content: flex-start; gap: 0.6rem; }
.c4-bodies img { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.c4-bodies .bt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.c4-bodies .bt b { color: #fff; font-weight: 600; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c4-bodies .bt small { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c4-bodies .bt small.top { color: var(--text-secondary); }
.c4-bodies .bt em { font-style: normal; color: var(--cyan); }
.c4-bodies .n { flex: none; }
.c4-bimg { text-align: center; margin: 0.4rem 0 0.2rem; }
.c4-bimg img { width: 150px; height: 150px; filter: drop-shadow(0 0 30px rgba(79, 216, 255, 0.25)); }
.c4-drawer .kind a { color: var(--cyan); }

/* "zoom in to see ships" hint (task #27): under the map controls, fades in only while a map filter is set at overview zoom */
.c4-shiphint { position: absolute; z-index: 3; left: var(--edge); bottom: calc(var(--ins-b) + 3.4rem); max-width: 260px; padding: 0.35rem 0.6rem; font-size: 0.76rem; color: var(--text-secondary); background: var(--glass); border: 1px solid var(--line); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s; }
.c4-shiphint.show { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ phones (< 700 px): the dock becomes a bottom sheet */
@media (max-width: 699px) {
    :root { --edge: 8px; }
    .c4-topbar { right: var(--edge); flex-direction: column; gap: 0.4rem; }
    /* the interface-sound button (SFX/ui-sfx.js) rides on the brand row instead of taking a row of its own */
    .c4-topbar .ui-sfx-btn { position: absolute; top: 3px; right: 0; }
    .c4-brand { align-self: flex-start; padding: 0.25rem 0.7rem 0.25rem 0.3rem; }
    .c4-brand img { width: 24px; height: 24px; }
    .c4-brand-t small { display: none; }
    .c4-hud-top { max-width: none; container-type: normal; }
    /* one swipeable KPI row, so the map keeps its height above the sheet. v3: exactly four KPIs per screen, snapped,
       so the strip never rests on a half-cut KPI ("MINI 39"); labels may wrap, sub-lines live in the tooltip */
    .c4-kpis { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0.35rem 0; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
    .c4-kpi { flex: 0 0 25%; box-sizing: border-box; min-width: 0; padding: 0.05rem 0.45rem; border-left: 1px solid rgba(120, 200, 255, 0.1) !important; scroll-snap-align: start; }
    .c4-kpi:nth-child(4n+1) { border-left: 0 !important; }
    .c4-kpi span { font-size: 0.46rem; letter-spacing: 0.05em; }
    .c4-kpi small { display: none; }
    .c4-kpi b { font-size: 0.88rem; }
    /* the age / collector banner becomes a one-line chip; quality notes fold into its count (full text = tooltip) */
    .c4-age .lg { display: none; }
    .c4-age .sm { display: inline; }
    .c4-age { padding: 0.22rem 0.6rem; font-size: 0.72rem; white-space: nowrap; border-radius: 999px; }
    .c4-qual { display: none; }
    .c4-hud-left { display: none; }
    .c4-dock { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 58vh; height: 58dvh; border-radius: 18px 18px 0 0; border-bottom: 0; animation-name: c4-sheet-in;
        box-shadow: 0 -1px 0 color-mix(in srgb, var(--acc) 55%, transparent), 0 -18px 48px -18px color-mix(in srgb, var(--acc) 38%, transparent); }
    @keyframes c4-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
    .c4-dock::before { left: 30%; right: 30%; top: -1px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); }
    .c4-dock-grip { display: none; }
    .c4-dock.collapsed { width: auto; height: var(--rail); }
    .c4-dock.collapsed .c4-dock-head { flex-direction: row; padding: 0.55rem 0.7rem; }
    .c4-dock.collapsed .c4-tabs { flex-direction: row; }
    .c4-dock.collapsed .c4-tab span { display: inline; }
    .c4-dock.collapsed .c4-tab.active::after { left: 18%; right: 18%; top: auto; bottom: -1px; width: auto; height: 2px; }
    .c4-dock-toggle i { transform: rotate(45deg); margin: -3px 0 0; }
    .c4-dock.collapsed .c4-dock-toggle i { transform: rotate(-135deg); margin: 3px 0 0; }
    .c4-drawer { inset: 0; width: 100vw; max-width: none; border-radius: 0; }
    .c4-res .c4-bar, .c4-res-head { grid-template-columns: minmax(70px, 7rem) minmax(0, 1fr) 4.6rem 5.6rem; }
}

/* ------------------------------------------------------------------ v5 (2026-11-07): names, wallet chip, wealth, toast */
.c4-on { font-family: 'Exo 2', sans-serif; unicode-bidi: isolate; }   /* isolate: a name never re-orders the text around it */
.c4-on.unnamed { font-family: 'Exo 2', monospace; color: var(--text-secondary); }
.c4-table[data-table="owners"] .c2 b { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
@container dockbody (max-width: 379px) { .c4-table[data-table="owners"] .c2 b { max-width: 6rem; } }
.c4-table td.wl { color: var(--ust, #ffcc33); font-variant-numeric: tabular-nums; }
.c4-table td.wl i { font-style: normal; font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-left: 0.25rem; }
.c4-wal { display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(255, 204, 51, 0.07); border: 1px solid rgba(255, 204, 51, 0.35); color: var(--ust, #ffcc33); border-radius: 999px; padding: 0.12rem 0.25rem 0.12rem 0.55rem; cursor: pointer; font: inherit; transition: border-color 0.2s, background 0.2s, transform 0.25s var(--spring); }
.c4-wal code { font-family: 'Exo 2', monospace; font-size: 0.8rem; letter-spacing: 0.06em; color: #fff; }
.c4-wal span { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(255, 204, 51, 0.16); }
.c4-wal:hover, .c4-wal:focus-visible { border-color: var(--ust, #ffcc33); background: rgba(255, 204, 51, 0.14); outline: none; transform: translateY(-1px); }
.c4-wal.ok { border-color: var(--ok); }
.c4-wal.ok span { background: rgba(126, 232, 164, 0.2); color: var(--ok); }
/* in a leaderboard row the chip appears on row hover / keyboard focus (it stays in the tab order) */
/* absolutely placed over the cell's second line, so the chip never widens the table (dock fit check) */
.c4-table[data-table="owners"] td.c2 { position: relative; }
/* v7 (owner): the first 4 wallet characters show AT REST (subtle); the "Copy" tag joins on row hover / focus */
.c4-wal.row { position: absolute; left: 4.6rem; bottom: 0.3rem; padding: 0 0.4rem; opacity: 0.72; transition: opacity 0.2s; background: rgba(9, 13, 28, 0.96); border-color: rgba(255, 204, 51, 0.22); }
.c4-wal.row code { font-size: 0.66rem; color: var(--ust, #ffcc33); }
.c4-wal.row span { font-size: 0.52rem; padding: 0 0.3rem; display: none; }
.c4-table tr:hover .c4-wal.row, .c4-table tr:focus-within .c4-wal.row, .c4-wal.row:focus-visible { opacity: 1; padding-right: 0.15rem; }
.c4-table tr:hover .c4-wal.row span, .c4-table tr:focus-within .c4-wal.row span, .c4-wal.row:focus-visible span { display: inline; }
.c4-table tr:hover .c4-wal.row code, .c4-table tr:focus-within .c4-wal.row code { color: #fff; }
@media (hover: none) { .c4-wal.row { opacity: 1; } }
.c4-drawer h2 .c4-dname { min-width: 0; overflow-wrap: anywhere; }
.c4-ident { margin: 0 0 0.6rem; display: grid; gap: 0.3rem; }
.c4-idrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); }
.c4-idrow .lab { font-family: 'Orbitron', sans-serif; font-size: 0.46rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); width: 4.2rem; flex: none; }
.c4-idrow code.c4-prof { font-family: 'Exo 2', monospace; color: #fff; font-size: 0.8rem; }
.c4-idrow em { font-style: normal; color: var(--text-muted); }
.c4-ident .sub { margin: 0.1rem 0 0; font-size: 0.72rem; }
.c4-dsec-note { font-family: 'Exo 2', sans-serif; font-style: normal; font-size: 0.7rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.c4-wealth { display: grid; gap: 0.45rem; }
.c4-wline { font-size: 0.84rem; color: var(--text-secondary); }
.c4-wline b { color: #fff; font-family: 'Orbitron', sans-serif; font-size: 0.78rem; font-weight: 600; }
.c4-worth { background: linear-gradient(135deg, rgba(255, 204, 51, 0.09), rgba(255, 204, 51, 0.02)); border: 1px solid rgba(255, 204, 51, 0.28); border-radius: 12px; padding: 0.6rem 0.75rem; display: grid; gap: 0.2rem; }
.c4-worth b { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; color: var(--ust, #ffcc33); font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.c4-worth small { font-size: 0.74rem; color: var(--text-secondary); line-height: 1.35; }
.c4-worth small.c4-bidask { color: var(--text-muted); font-size: 0.7rem; }
.c4-wealth .c4-warn { color: var(--warn); margin: 0; }
.c4-wealth .sub { margin: 0; }
.c4-wcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.c4-wcols h5 { margin: 0.3rem 0 0.2rem; font-family: 'Orbitron', sans-serif; font-size: 0.48rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.c4-wcols .c4-list li { cursor: default; font-size: 0.78rem; }
.c4-hulls li .l { display: flex; align-items: center; gap: 0.4rem; }
.c4-sil { width: 22px; height: 22px; flex: none; background: url(../Images/ships/silhouettes/atlas.webp) no-repeat; opacity: 0.8; filter: drop-shadow(0 0 3px rgba(79, 216, 255, 0.45)); }
.c4-sil.none { background: none; border: 1px dashed var(--line); border-radius: 50%; width: 10px; height: 10px; margin: 6px; }
.c4-why summary { cursor: pointer; font-size: 0.76rem; color: var(--cyan); }
.c4-why .c4-list li { cursor: default; font-size: 0.76rem; }
.c4-why em { font-style: normal; color: var(--text-muted); }
@media (max-width: 459px) { .c4-wcols { grid-template-columns: 1fr; } }
.c4-find-list { color: var(--text-secondary); display: grid; gap: 0.3rem; }
.c4-find-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; max-height: 14rem; overflow-y: auto; }
.c4-find-list button { width: 100%; display: flex; align-items: baseline; gap: 0.5rem; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.55rem; color: #fff; cursor: pointer; text-align: left; font: inherit; }
.c4-find-list button:hover, .c4-find-list button:focus-visible { border-color: var(--cyan); outline: none; }
.c4-find-list b { font-weight: 600; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c4-find-list code { font-family: 'Exo 2', monospace; color: var(--text-muted); font-size: 0.72rem; }
.c4-find-list small { margin-left: auto; color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }
.c4-toast { position: fixed; left: 50%; bottom: 1.4rem; z-index: 260; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; background: var(--glass-strong); border: 1px solid var(--ok); color: #fff; border-radius: 999px; padding: 0.45rem 1rem; font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: opacity 0.25s, transform 0.4s var(--spring); max-width: calc(100vw - 2rem); overflow-wrap: anywhere; }
.c4-toast.show { opacity: 1; transform: translate(-50%, 0); }
.c4-toast.bad { border-color: var(--warn); }

/* ---------------------------------------------------------------- DACs (2026-11-07): hand-kept list + example preview */
.ti-dacs { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 2.5V8c0 3.5-2.6 5.8-6 7-3.4-1.2-6-3.5-6-7V3.5z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M5 8h6M8 5v6' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E"); }
.c4-dock[data-acc="dacs"] { --acc: #ff8fe0; }
.fc-all { --fc: linear-gradient(90deg, var(--mud), var(--oni), var(--ust)); }
.c4-dacchip { display: inline-flex; align-items: center; font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 0.56rem; letter-spacing: 0.12em; color: #04060f; background: var(--dac, #9aa3b5); border-radius: 5px; padding: 0.16rem 0.4rem; margin-right: 0.3rem; }
.c4-dac-tools { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.8rem; }
.c4-dac-tools .sub { margin: 0; }
.c4-act.c4-dac-ex.on { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.c4-dacs { display: flex; flex-direction: column; gap: 0.6rem; }
.c4-dac { border: 1px solid rgba(120, 200, 255, 0.12); border-left: 3px solid var(--dac); border-radius: 10px; padding: 0.55rem 0.7rem; background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s, background 0.2s; }
.c4-dac.on { border-color: var(--dac); background: color-mix(in srgb, var(--dac) 8%, transparent); box-shadow: 0 0 18px -8px var(--dac); }
.c4-dac-head { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: 0; padding: 0 0 0.45rem; color: inherit; cursor: pointer; text-align: left; font: inherit; }
.c4-dac-head .nm { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c4-dac-head .cnt { margin-left: auto; font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }
.c4-dac-head:focus-visible { outline: 2px solid var(--dac); outline-offset: 2px; border-radius: 6px; }
.c4-dac .c4-dstats { margin-bottom: 0.5rem; }
.c4-dac .c4-dstats b { font-size: 0.8rem; }
.c4-dac-sys { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; }
.c4-dac-sys .lab { font-family: 'Orbitron', sans-serif; font-size: 0.46rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-right: 0.2rem; }
.c4-dac-sys .c4-chip { font-size: 0.66rem; padding: 0.14rem 0.4rem; }
.c4-dac-sys small { color: var(--text-muted); font-size: 0.7rem; }
.c4-dac-src { margin: 0.3rem 0 0; font-size: 0.68rem; color: var(--text-muted); overflow-wrap: anywhere; }
.c4-dac .c4-warn { color: var(--warn); margin: 0.3rem 0 0; font-size: 0.72rem; }
/* example mode: a sticky banner in the dock, a banner on the map, and every DAC number dashed with an EX mark */
.c4-dac-banner { position: sticky; top: 0; z-index: 2; margin: 0 0 0.7rem; padding: 0.5rem 0.7rem; border: 1px dashed var(--warn); border-radius: 10px; background: #281804; color: #fff; font-size: 0.8rem; line-height: 1.4; }
/* v7: OPAQUE (was 92 % alpha: rows scrolling under the sticky banner bled through its text) */
.c4-dac-banner b, .c4-dacex b { color: var(--warn); font-family: 'Orbitron', sans-serif; letter-spacing: 0.14em; }
.c4-dacn.ex { text-decoration: underline dashed var(--warn); text-underline-offset: 3px; }
.c4-dacn.ex::after { content: 'EX'; margin-left: 0.2em; font-family: 'Orbitron', sans-serif; font-size: 0.5em; vertical-align: super; color: var(--warn); letter-spacing: 0.06em; }
.c4-dacex { position: absolute; z-index: 4; top: calc(var(--kpi-b, 0px) + 0.6rem); left: calc((100% - var(--ins-r)) / 2); transform: translateX(-50%); padding: 0.35rem 0.8rem; border: 1px dashed var(--warn); border-radius: 999px; background: rgba(40, 24, 4, 0.88); color: #fff; font-size: 0.78rem; white-space: nowrap; pointer-events: none; }
.c4-dacex[hidden] { display: none; }
.c4-dacrow.ex .c4-exmark { color: var(--warn); font-size: 0.68rem; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------- v7 (2026-11-07): DAC conquest lens */
.c4-dac-lens { display: grid; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0.55rem 0.65rem; border: 1px solid rgba(255, 143, 224, 0.22); border-radius: 12px; background: rgba(255, 143, 224, 0.035); }
.c4-dac-lens.on { border-color: rgba(255, 143, 224, 0.5); box-shadow: 0 0 22px -12px #ff8fe0; }
.c4-lrow { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.c4-lrow .lab, .c4-hud-lens .lab { font-family: 'Orbitron', sans-serif; font-size: 0.46rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); min-width: 4.4rem; }
.c4-dac-scope { font: 600 0.78rem 'Rajdhani', sans-serif; color: #fff; background: rgba(9, 13, 28, 0.9); border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem 0.4rem; max-width: 100%; }
.c4-dac-scope:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.c4-dac-legend { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.6rem, 1fr)); gap: 0.25rem 0.6rem; }
.c4-dac-legend li { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.76rem; color: var(--text-secondary); min-width: 0; }
.c4-dac-legend li.zero { opacity: 0.5; }
.c4-dac-legend i { width: 0.7rem; height: 0.7rem; border-radius: 3px; background: var(--dac, #9aa3b5); flex: none; align-self: center; box-shadow: 0 0 6px -1px var(--dac, transparent); }
.c4-dac-legend li.ct i { background: repeating-linear-gradient(45deg, #9aa3b5 0 2px, transparent 2px 4px); border: 1px solid #9aa3b5; }
.c4-dac-legend .t { font-family: 'Orbitron', sans-serif; font-size: 0.56rem; letter-spacing: 0.08em; color: #fff; }
.c4-dac-legend b { color: #fff; font-family: 'Orbitron', sans-serif; font-size: 0.72rem; }
.c4-dac-legend small { color: var(--text-muted); font-size: 0.66rem; }
p.c4-dac-legend.none { display: block; margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-muted); }
.c4-dac-lens .sub { margin: 0; font-size: 0.7rem; }
.c4-hud-lens { margin-top: 0.45rem; align-items: center; }
.c4-hud-lens .lab { min-width: 0; margin-right: 0.15rem; }
.c4-hud-lensnote { margin: 0.35rem 0 0; max-width: 15rem; font-size: 0.7rem; line-height: 1.3; color: #ffc4ef; }
.c4-hud-lensnote .c4-exmark { color: var(--warn); font-family: 'Orbitron', sans-serif; font-size: 0.55rem; letter-spacing: 0.1em; }
/* v7: hull mix - short name + a muted variant tag, never ellipsised mid-name */
.c4-hulls li .l { white-space: normal; flex-wrap: wrap; row-gap: 0.1rem; }
.c4-hn { min-width: 0; overflow-wrap: anywhere; }
.c4-hv { font-style: normal; font-size: 0.6rem; letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 0.25rem; white-space: nowrap; }
/* v7: collector stopped = a compact amber chip; the instruction is its tooltip and opens on click */
.c4-age.stopped { border-color: rgba(255, 184, 107, 0.6); color: var(--text-secondary); background: rgba(9, 13, 28, 0.82); }
.c4-age.stopped b { color: #fff; }
.c4-stopchip { display: inline-flex; align-items: center; gap: 0.35rem; font: 700 0.72rem 'Rajdhani', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1004; background: var(--warn); border: 0; border-radius: 999px; padding: 0.08rem 0.5rem; cursor: pointer; margin-right: 0.2rem; }
.c4-stopchip i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #1a1004; animation: c4-stoppulse 1.4s ease-in-out infinite; }
@keyframes c4-stoppulse { 50% { opacity: 0.25; } }
.c4-stopchip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.c4-stopdetail { display: block; margin-top: 0.25rem; max-width: 30rem; white-space: normal; }