/* ==========================================================================
mobile-sterile-v1.css · v2 (approved Imagine look)
Nuclear presentation layer for max-width 1100px Mission.
Content preserved; HUD frames / cyan glow stripped on phone only.
========================================================================== */
/* —— Tokens —— */
@media (max-width: 1100px) {
html[data-theme="dark"],
html.mission-stack[data-theme="dark"] {
--st-bg: #0b0d0f;
--st-surface: #111317;
--st-surface-2: #161a1f;
--st-border: #1f2327;
--st-border-soft: rgba(255, 255, 255, 0.07);
--st-text: #f2f4f7;
--st-muted: #8b939e;
--st-dim: #5c6570;
--st-accent: #00b89c;
--st-accent-dim: rgba(0, 184, 156, 0.14);
--st-accent-ink: #041018;
--st-ok: #2dffb2;
--st-danger: #ff5c6c;
--st-warn: #f5b942;
--bg: #0b0d0f !important;
--bg-elev: #111317 !important;
--bg-panel: #111317 !important;
--bg-panel-solid: #161a1f !important;
--text: #f2f4f7 !important;
--muted: #8b939e !important;
--dim: #5c6570 !important;
--line: #1f2327 !important;
--line-soft: rgba(255, 255, 255, 0.07) !important;
--accent: #00b89c !important;
--accent-soft: #14d4b5 !important;
--accent-dim: rgba(0, 184, 156, 0.14) !important;
--border-cyan: rgba(0, 184, 156, 0.35) !important;
--glass-border: #1f2327 !important;
--glass-border-soft: rgba(255, 255, 255, 0.07) !important;
--glass-panel: #111317 !important;
--glass-panel-cyan: #161a1f !important;
--glass-shadow: none !important;
--glow-cyan: none !important;
--glow-cyan-soft: none !important;
--topbar-edge: #1f2327 !important;
--fill-deep: rgba(0, 0, 0, 0.35) !important;
--fill-soft: rgba(0, 184, 156, 0.1) !important;
--hover-fill: rgba(0, 184, 156, 0.1) !important;
--radius-panel: 14px !important;
}
html[data-theme="light"],
html.mission-stack[data-theme="light"] {
--st-bg: #f3f5f7;
--st-surface: #ffffff;
--st-surface-2: #f6f7f9;
--st-border: #e6e8ec;
--st-border-soft: rgba(15, 20, 25, 0.08);
--st-text: #0b0d0f;
--st-muted: #5c6570;
--st-dim: #8b939e;
--st-accent: #00b89c;
--st-accent-dim: rgba(0, 184, 156, 0.12);
--st-accent-ink: #041018;
--st-ok: #00a86b;
--st-danger: #d32f2f;
--st-warn: #c47f00;
--bg: #f3f5f7 !important;
--bg-elev: #ffffff !important;
--bg-panel: #ffffff !important;
--bg-panel-solid: #ffffff !important;
--text: #0b0d0f !important;
--muted: #5c6570 !important;
--dim: #8b939e !important;
--line: #e6e8ec !important;
--line-soft: rgba(15, 20, 25, 0.08) !important;
--accent: #00b89c !important;
--accent-soft: #0d9488 !important;
--accent-dim: rgba(0, 184, 156, 0.12) !important;
--border-cyan: rgba(0, 184, 156, 0.3) !important;
--glass-border: #e6e8ec !important;
--glass-panel: #ffffff !important;
--glass-panel-cyan: #ffffff !important;
--glass-shadow: 0 8px 22px rgba(15, 20, 25, 0.06) !important;
--glow-cyan: none !important;
--glow-cyan-soft: none !important;
--topbar-edge: #e6e8ec !important;
--fill-deep: rgba(15, 20, 25, 0.04) !important;
--fill-soft: rgba(0, 184, 156, 0.1) !important;
--hover-fill: rgba(0, 184, 156, 0.08) !important;
}
}
/* Kill rotate gate always */
html.mission-need-landscape .mission-rotate-gate,
html.mission-need-landscape #mission-rotate-gate,
.mission-rotate-gate,
#mission-rotate-gate {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
html.mission-need-landscape #app.shell,
html.mission-need-landscape .portal-topbar,
html.mission-need-landscape .navstak-site-foot--mission {
visibility: visible !important;
pointer-events: auto !important;
}
html.mission-need-landscape body.has-portal-topbar {
overflow: auto !important;
}
@media (max-width: 1100px) {
/* —— Shell —— */
html.mission-stack,
html.mission-stack body {
height: 100%;
overflow: hidden;
background: var(--st-bg, #0b0d0f) !important;
background-image: none !important;
}
html.mission-stack body,
html.mission-stack #app.shell,
html.mission-stack .stage,
html.mission-stack .page[data-page="mission"] {
background: var(--st-bg) !important;
background-image: none !important;
}
html.mission-stack #app.shell {
display: flex !important;
flex-direction: column !important;
height: 100dvh !important;
max-height: 100dvh !important;
overflow: hidden !important;
grid-template-columns: none !important;
}
/* —— Top bar: flat sterile (kill cyan HUD chrome) —— */
html.mission-stack .portal-topbar,
html.mission-stack .portal-topbar.mission-desk-mode,
html.mission-stack header.portal-topbar {
position: sticky !important;
top: 0 !important;
z-index: 50 !important;
flex: 0 0 auto !important;
min-height: calc(52px + env(safe-area-inset-top, 0px)) !important;
padding: env(safe-area-inset-top, 0px) 0.75rem 0 !important;
background: var(--st-bg) !important;
background-image: none !important;
border-bottom: 1px solid var(--st-border) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html.mission-stack .portal-topbar::before,
html.mission-stack .portal-topbar::after,
html.mission-stack .portal-end-thumb::before,
html.mission-stack .portal-link::before,
html.mission-stack .portal-link::after {
display: none !important;
content: none !important;
background: none !important;
box-shadow: none !important;
}
html.mission-stack .portal-end-thumb,
html.mission-stack .portal-link,
html.mission-stack .portal-burger,
html.mission-stack .theme-toggle,
html.mission-stack .portal-topbar button {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 12px !important;
box-shadow: none !important;
min-width: 44px !important;
min-height: 44px !important;
color: var(--st-text) !important;
filter: none !important;
}
html.mission-stack .portal-link.is-on,
html.mission-stack .portal-link[aria-current="page"] {
border-color: var(--st-accent) !important;
background: var(--st-accent-dim) !important;
color: var(--st-accent) !important;
box-shadow: none !important;
}
html.mission-stack .portal-topbar img,
html.mission-stack .portal-end-thumb img {
filter: none !important;
opacity: 0.9 !important;
}
html.mission-stack .mission-clock-only,
html.mission-stack .portal-topbar-clock,
html.mission-stack .mission-clock-face {
background: var(--st-surface) !important;
border: 1px solid var(--st-border) !important;
border-radius: 12px !important;
box-shadow: none !important;
color: var(--st-muted) !important;
font-size: 0.7rem !important;
}
/* Hide decorative HUD stage backgrounds */
html.mission-stack .stage::before,
html.mission-stack .stage::after,
html.mission-stack #app.shell::before,
html.mission-stack body::before {
display: none !important;
background: none !important;
}
/* —— Portrait home —— */
html.mission-stack .mission-mobile-hero,
html.mission-stack body.mission-desk-mode .mission-mobile-hero {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.65rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
gap: 0.55rem !important;
background: transparent !important;
}
html.mission-stack body.mission-desk-mode #rail-left,
html.mission-stack body.mission-desk-mode #rail-right,
html.mission-stack body.mission-desk-mode #rail-right-social,
html.mission-stack body.mission-desk-mode .mission-stage-frame,
html.mission-stack #mission-stage-void,
html.mission-stack .mission-rail-mid {
display: none !important;
}
html.mission-stack .navstak-site-foot--mission {
display: none !important;
}
/* —— Decision strip —— */
html.mission-stack .mh-decision-bar,
html.mission-stack .mh-decision {
border: 1px solid var(--st-border) !important;
border-radius: 14px !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: none !important;
padding: 0.65rem 0.8rem !important;
}
html.mission-stack .mh-decision-bar::before,
html.mission-stack .mh-decision::before {
display: none !important;
}
html.mission-stack .mh-cell-lab,
html.mission-stack .mh-pill-k {
color: var(--st-muted) !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
html.mission-stack .mh-chip {
background: var(--st-accent-dim) !important;
color: var(--st-accent) !important;
border: 1px solid rgba(0, 184, 156, 0.35) !important;
border-radius: 999px !important;
font-weight: 650 !important;
}
/* —— Equity hero —— */
html.mission-stack .mh-cell--hb,
html.mission-stack #mh-cell-hb {
width: 100% !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: none !important;
min-height: 8rem !important;
padding: 0.8rem 0.9rem 0.65rem !important;
}
html.mission-stack .mh-cell--hb::before,
html.mission-stack .mh-cell--hb::after {
display: none !important;
}
html.mission-stack .mh-hb-eq {
font-size: clamp(1.55rem, 7.5vw, 2rem) !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.03em !important;
color: var(--st-text) !important;
}
html.mission-stack .mh-hb-plot {
background: var(--st-surface-2) !important;
border-radius: 10px !important;
border: 1px solid var(--st-border-soft) !important;
overflow: hidden !important;
min-height: 64px !important;
}
html.mission-stack .mh-hb-canvas {
width: 100% !important;
max-height: 72px !important;
}
/* —— Expand dock = full-screen sheet when open —— */
html.mission-stack .mh-dock {
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: none !important;
overflow: hidden !important;
order: 0 !important;
}
html.mission-stack .mh-dock[data-empty="1"] {
min-height: 0 !important;
display: none !important; /* hide empty expand strip — cleaner home */
}
html.mission-stack .mh-dock:not([data-empty="1"]) {
position: fixed !important;
inset: calc(52px + env(safe-area-inset-top, 0px)) 0 env(safe-area-inset-bottom, 0px) 0 !important;
z-index: 80 !important;
border-radius: 0 !important;
border: none !important;
border-top: 1px solid var(--st-border) !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
background: var(--st-bg) !important;
}
html.mission-stack .mh-dock:not([data-empty="1"]) .mh-dock-active {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
}
html.mission-stack .mh-dock-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
padding: 0.7rem 0.9rem !important;
border-bottom: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
flex: 0 0 auto !important;
}
html.mission-stack .mh-dock-title {
margin: 0 !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--st-text) !important;
letter-spacing: -0.02em !important;
}
html.mission-stack .mh-dock-close {
min-height: 40px !important;
min-width: 72px !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
color: var(--st-text) !important;
font-weight: 650 !important;
font-size: 0.85rem !important;
}
html.mission-stack .mh-dock-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.5rem 0.55rem 1rem !important;
background: var(--st-bg) !important;
}
/* —— STRIP ALL HUD FRAMES inside mobile —— */
html.mission-stack .mission-widget,
html.mission-stack .glass-panel,
html.mission-stack .panel,
html.mission-stack .auto-banner,
html.mission-stack .board-wrap,
html.mission-stack .arena-matchup,
html.mission-stack .coin-profile,
html.mission-stack .assets-widget,
html.mission-stack .social-panel,
html.mission-stack .trade-journal-widget,
html.mission-stack .mod-plate-host,
html.mission-stack .mh-dock-body .mission-widget {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 14px !important;
box-shadow: none !important;
filter: none !important;
}
html.mission-stack .mission-widget::before,
html.mission-stack .mission-widget::after,
html.mission-stack .auto-banner::before,
html.mission-stack .auto-banner::after,
html.mission-stack .board-wrap::before,
html.mission-stack .board-wrap::after,
html.mission-stack .arena-matchup::before,
html.mission-stack .mod-plate-host::before,
html.mission-stack .mod-plate-host::after,
html.mission-stack .mod-chrome-head::before,
html.mission-stack .section-head-row::before,
html.mission-stack [class*="plate"]::before,
html.mission-stack [class*="frame"]::before {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
}
/* Hide PNG plate art images if present as children */
html.mission-stack .mod-plate-art,
html.mission-stack .frame-img,
html.mission-stack img[src*="/img/hud/frame-"] {
display: none !important;
}
html.mission-stack .mh-dock-body .mission-widget-head,
html.mission-stack .mh-dock-body .mod-chrome-head,
html.mission-stack .mh-dock-body .section-head-row.mission-widget-head {
display: none !important;
}
/* —— Tile grid (approved card look) —— */
html.mission-stack .mh-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.55rem !important;
flex: 0 0 auto !important;
}
html.mission-stack .mh-cell {
appearance: none !important;
-webkit-appearance: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 14px !important;
min-height: 6.25rem !important;
padding: 0.7rem 0.75rem !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 0.3rem !important;
text-align: left !important;
color: var(--st-text) !important;
font: inherit !important;
cursor: pointer !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent !important;
}
html.mission-stack .mh-cell::before,
html.mission-stack .mh-cell::after {
display: none !important;
}
html.mission-stack .mh-cell.is-mh-active {
border-color: var(--st-accent) !important;
background: var(--st-accent-dim) !important;
}
html.mission-stack .mh-cell-hero {
font-size: 1.2rem !important;
font-weight: 700 !important;
font-variant-numeric: tabular-nums !important;
color: var(--st-text) !important;
line-height: 1.15 !important;
margin-top: 0.15rem !important;
}
html.mission-stack .mh-cell-foot,
html.mission-stack .mh-pill-data {
font-size: 0.7rem !important;
color: var(--st-muted) !important;
margin-top: auto !important;
}
html.mission-stack .mh-ord-metrics {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.2rem 0.4rem !important;
width: 100% !important;
margin-top: 0.2rem !important;
}
html.mission-stack .mh-ord-m .k {
color: var(--st-dim) !important;
font-size: 0.62rem !important;
font-weight: 600 !important;
}
html.mission-stack .mh-ord-m .v {
color: var(--st-text) !important;
font-size: 0.75rem !important;
font-variant-numeric: tabular-nums !important;
font-weight: 600 !important;
}
/* Focus + Autopilot full content visible */
html.mission-stack .mh-cell--focus,
html.mission-stack .mh-cell--auto,
html.mission-stack .mh-cell--standings {
min-height: 6.5rem !important;
overflow: visible !important;
}
html.mission-stack .mh-auto-row {
display: flex !important;
align-items: center !important;
gap: 0.45rem !important;
width: 100% !important;
}
html.mission-stack .mh-status-light {
width: 0.55rem !important;
height: 0.55rem !important;
border-radius: 50% !important;
box-shadow: none !important;
flex: 0 0 auto !important;
}
html.mission-stack .mh-status-light[data-tone="green"] { background: var(--st-ok) !important; }
html.mission-stack .mh-status-light[data-tone="red"] { background: var(--st-danger) !important; }
html.mission-stack .mh-status-light[data-tone="amber"],
html.mission-stack .mh-status-light[data-tone="yellow"] { background: var(--st-warn) !important; }
html.mission-stack .mh-pill {
min-height: 3.4rem !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.4rem 0.55rem !important;
}
html.mission-stack .mh-pill-sym {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: var(--st-text) !important;
}
html.mission-stack .mh-ls {
width: 100% !important;
margin-top: 0.25rem !important;
}
html.mission-stack .mh-ls-bar {
height: 4px !important;
border-radius: 99px !important;
background: var(--st-border) !important;
overflow: hidden !important;
display: flex !important;
}
html.mission-stack .mh-ls-fill-long { background: var(--st-ok) !important; }
html.mission-stack .mh-ls-fill-short { background: var(--st-danger) !important; }
html.mission-stack .mh-ls-nums {
display: flex !important;
justify-content: space-between !important;
font-size: 0.65rem !important;
color: var(--st-muted) !important;
margin-top: 0.2rem !important;
}
/* —— Market board sticky: clean sheet, not metal HUD —— */
html.mission-stack .mh-market-sticky {
flex: 0 0 auto !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px 16px 0 0 !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.25) !important;
margin: 0.25rem -0.15rem 0 !important;
max-height: 46dvh !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
html.mission-stack .mh-market-sticky::before,
html.mission-stack .mh-market-sticky::after {
display: none !important;
}
html.mission-stack .mh-market-sticky-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0.55rem 0.75rem !important;
border-bottom: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
min-height: 48px !important;
}
html.mission-stack .mh-market-sticky-meta {
font-size: 0.72rem !important;
color: var(--st-muted) !important;
font-weight: 500 !important;
}
html.mission-stack .mh-market-sticky-toggle {
min-width: 40px !important;
min-height: 40px !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
color: var(--st-text) !important;
font-size: 1.15rem !important;
box-shadow: none !important;
}
html.mission-stack .mh-market-sticky-body {
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
min-height: 0 !important;
flex: 1 1 auto !important;
padding: 0.35rem 0.4rem 0.65rem !important;
background: var(--st-surface) !important;
}
html.mission-stack .mh-market-sticky-body .board-wrap,
html.mission-stack .mh-market-sticky-body #market-board,
html.mission-stack .mh-market-sticky-body .mission-widget {
border: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
min-height: 0 !important;
}
html.mission-stack .board-tab,
html.mission-stack .focus-hub-tab,
html.mission-stack .am-mode,
html.mission-stack .trades-topnav-btn,
html.mission-stack .si-feed-tab {
border-radius: 10px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
color: var(--st-muted) !important;
box-shadow: none !important;
min-height: 36px !important;
}
html.mission-stack .board-tab.is-on,
html.mission-stack .focus-hub-tab.is-on,
html.mission-stack .am-mode.is-on,
html.mission-stack .trades-topnav-btn.is-on,
html.mission-stack [role="tab"][aria-selected="true"] {
background: var(--st-accent-dim) !important;
border-color: rgba(0, 184, 156, 0.4) !important;
color: var(--st-accent) !important;
box-shadow: none !important;
}
/* Board rows dense clean */
html.mission-stack .board-row,
html.mission-stack .board-table tr,
html.mission-stack .am-row,
html.mission-stack .tj-row {
min-height: 44px !important;
border-bottom: 1px solid var(--st-border-soft) !important;
background: transparent !important;
}
html.mission-stack .board-search,
html.mission-stack input[type="search"],
html.mission-stack input[type="text"] {
background: var(--st-surface-2) !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
color: var(--st-text) !important;
box-shadow: none !important;
min-height: 40px !important;
}
/* —— Autopilot module: reflow for phone (no plate coordinates) —— */
html.mission-stack .auto-banner,
html.mission-stack #auto-banner {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
padding: 0.75rem !important;
min-height: 0 !important;
height: auto !important;
overflow: visible !important;
}
html.mission-stack .auto-banner > *,
html.mission-stack #auto-banner > * {
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
}
/* Absolute slot maps from HUD plate — flatten */
html.mission-stack .auto-banner [class*="slot"],
html.mission-stack .auto-banner [class*="bay"],
html.mission-stack .auto-banner [class*="rail"],
html.mission-stack .ap-ops,
html.mission-stack .auto-status-line,
html.mission-stack .auto-tools {
position: static !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 0.4rem !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}
html.mission-stack .btn.primary,
html.mission-stack button.primary,
html.mission-stack .auto-engage-btn,
html.mission-stack #btn-auto-engage,
html.mission-stack [id*="engage"] {
background: var(--st-accent) !important;
color: var(--st-accent-ink) !important;
border: none !important;
border-radius: 12px !important;
box-shadow: none !important;
font-weight: 700 !important;
min-height: 48px !important;
padding: 0.65rem 1rem !important;
}
html.mission-stack .btn.ghost,
html.mission-stack .btn.secondary {
border: 1px solid var(--st-border) !important;
background: transparent !important;
color: var(--st-text) !important;
border-radius: 12px !important;
min-height: 40px !important;
box-shadow: none !important;
}
/* Paper | Live chips */
html.mission-stack .mode-chip,
html.mission-stack .cap-mode,
html.mission-stack .paper-live-seg button {
border-radius: 999px !important;
border: 1px solid var(--st-border) !important;
min-height: 36px !important;
}
/* Standings / arena clean */
html.mission-stack .arena-matchup,
html.mission-stack #arena-matchup {
padding: 0.5rem !important;
min-height: 0 !important;
height: auto !important;
}
html.mission-stack .arena-matchup-plate,
html.mission-stack .mod-plate-host {
background: transparent !important;
background-image: none !important;
border: none !important;
padding: 0 !important;
}
/* Focus chart area */
html.mission-stack .coin-profile,
html.mission-stack #coin-profile {
padding: 0.5rem !important;
min-height: 0 !important;
height: auto !important;
}
/* Ava float clean */
html.mission-stack .ava-float {
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
right: 0.75rem !important;
}
html.mission-stack .ava-widget {
border-radius: 16px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
}
/* No horizontal scroll */
html.mission-stack .stage,
html.mission-stack .mission-mobile-hero,
html.mission-stack .mh-dock-body,
html.mission-stack .mh-market-sticky-body {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Light theme: market sticky was hard black */
html[data-theme="light"].mission-stack .mh-market-sticky,
html.mission-stack[data-theme="light"] .mh-market-sticky {
background: var(--st-surface) !important;
box-shadow: 0 -8px 28px rgba(15, 20, 25, 0.08) !important;
}
html[data-theme="light"].mission-stack .mh-market-sticky-body,
html.mission-stack[data-theme="light"] .mh-market-sticky-body {
background: var(--st-surface) !important;
}
}
/* When dock open, dim home slightly via body class if present */
@media (max-width: 1100px) {
html.mission-stack .mh-dock:not([data-empty="1"]) ~ .mh-grid {
/* grid may not be sibling - ok */
}
}
/* ==========================================================================
v2b — flatten HUD absolute plate layouts (Autopilot / Focus / Arena / Board)
Must beat jarvis-hud.css position:absolute !important rules.
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.auto-banner,
html.mission-stack #auto-banner {
position: relative !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
width: 100% !important;
padding: 0.75rem !important;
display: flex !important;
flex-direction: column !important;
gap: 0.65rem !important;
overflow: visible !important;
background: var(--st-surface) !important;
background-image: none !important;
}
html.mission-stack #auto-banner.auto-banner::before,
html.mission-stack #auto-banner.auto-banner::after,
html.mission-stack #auto-banner::before,
html.mission-stack #auto-banner::after {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
opacity: 0 !important;
}
html.mission-stack #auto-banner .auto-frame-sizer,
html.mission-stack .auto-frame-sizer {
display: none !important;
}
html.mission-stack #auto-banner .auto-zone--head,
html.mission-stack #auto-banner .auto-zone--body,
html.mission-stack #auto-banner .auto-zone--foot,
html.mission-stack #auto-banner .auto-zone--status,
html.mission-stack #auto-banner .auto-zone--control,
html.mission-stack #auto-banner .auto-nest,
html.mission-stack #auto-banner .auto-nest--status,
html.mission-stack #auto-banner .auto-nest--control,
html.mission-stack #auto-banner .auto-identity,
html.mission-stack #auto-banner .auto-control-universe,
html.mission-stack #auto-banner [class*="auto-zone"],
html.mission-stack #auto-banner [class*="auto-nest"] {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
transform: none !important;
inset: auto !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.4rem !important;
margin: 0 !important;
padding: 0.25rem 0 !important;
overflow: visible !important;
}
html.mission-stack #auto-banner .auto-tool-btn,
html.mission-stack #auto-banner .widget-min-btn {
position: static !important;
transform: none !important;
height: 40px !important;
min-height: 40px !important;
font-size: 0.8rem !important;
padding: 0 0.65rem !important;
}
html.mission-stack #auto-banner .auto-mode-chip {
font-size: 0.85rem !important;
padding: 0.35rem 0.75rem !important;
min-height: 36px !important;
}
html.mission-stack #auto-banner .auto-uni-chip {
font-size: 0.75rem !important;
padding: 0.3rem 0.5rem !important;
background: var(--st-surface-2) !important;
border: 1px solid var(--st-border) !important;
border-radius: 8px !important;
color: var(--st-text) !important;
}
html.mission-stack #auto-banner .auto-uni-chip:has(input:checked) {
border-color: var(--st-accent) !important;
background: var(--st-accent-dim) !important;
color: var(--st-accent) !important;
}
/* Engage full width */
html.mission-stack #auto-banner button[id*="engage"],
html.mission-stack #auto-banner .btn.primary,
html.mission-stack #auto-banner .auto-engage {
width: 100% !important;
flex: 1 1 100% !important;
}
/* Market board expanded frame kill */
html.mission-stack #market-board,
html.mission-stack #market-board.board-wrap,
html.mission-stack .board-wrap-tall {
position: relative !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
background-image: none !important;
padding: 0.35rem !important;
}
html.mission-stack #market-board::before,
html.mission-stack #market-board::after,
html.mission-stack .board-wrap::before,
html.mission-stack .board-wrap::after {
display: none !important;
background: none !important;
}
/* Arena */
html.mission-stack #arena-matchup,
html.mission-stack .arena-matchup {
position: relative !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
background-image: none !important;
padding: 0.5rem !important;
}
html.mission-stack #arena-matchup::before,
html.mission-stack #arena-matchup::after,
html.mission-stack .arena-matchup-plate::before {
display: none !important;
}
html.mission-stack .arena-matchup-plate,
html.mission-stack #arena-matchup-plate {
position: static !important;
background: transparent !important;
background-image: none !important;
height: auto !important;
min-height: 0 !important;
}
/* Focus */
html.mission-stack #coin-profile,
html.mission-stack .coin-profile {
position: relative !important;
aspect-ratio: auto !important;
height: auto !important;
background-image: none !important;
padding: 0.5rem !important;
}
html.mission-stack #coin-profile::before,
html.mission-stack #coin-profile::after {
display: none !important;
}
/* Equity / assets widget */
html.mission-stack #assets-widget,
html.mission-stack .assets-widget {
position: relative !important;
height: auto !important;
background-image: none !important;
padding: 0.5rem !important;
}
html.mission-stack #assets-widget::before,
html.mission-stack #assets-widget::after {
display: none !important;
}
/* Trade journal */
html.mission-stack #trade-journal-panel,
html.mission-stack .trade-journal-widget {
position: relative !important;
height: auto !important;
background-image: none !important;
padding: 0.5rem !important;
}
/* Social */
html.mission-stack #social-panel,
html.mission-stack .social-panel {
position: relative !important;
height: auto !important;
background-image: none !important;
padding: 0.5rem !important;
}
/* Top portal icons: desaturate cyan HUD PNGs toward sterile mono */
html.mission-stack .portal-topbar img.portal-ico,
html.mission-stack .portal-end-thumb img,
html.mission-stack .portal-link img {
filter: grayscale(0.35) brightness(1.05) !important;
opacity: 0.92 !important;
}
html[data-theme="light"].mission-stack .portal-topbar img.portal-ico,
html.mission-stack[data-theme="light"] .portal-end-thumb img {
filter: grayscale(0.2) brightness(0.35) !important;
}
}
/* ==========================================================================
v3 — match approved sterile mockup (full-screen sheets + no metal plates)
Uses body.mh-sheet-open / .mh-dock.is-open already set by app.js
========================================================================== */
@media (max-width: 1100px) {
/* Hide home chrome while a module sheet is open */
html.mission-stack body.mh-sheet-open .mh-decision-bar,
html.mission-stack body.mh-sheet-open .mh-decision,
html.mission-stack body.mh-sheet-open #mh-cell-hb,
html.mission-stack body.mh-sheet-open .mh-cell--hb,
html.mission-stack body.mh-sheet-open .mh-grid,
html.mission-stack body.mh-sheet-open .mh-market-sticky,
html.mission-stack .mission-mobile-hero.mh-dock-open .mh-decision-bar,
html.mission-stack .mission-mobile-hero.mh-dock-open #mh-cell-hb,
html.mission-stack .mission-mobile-hero.mh-dock-open .mh-grid,
html.mission-stack .mission-mobile-hero.mh-dock-open .mh-market-sticky {
display: none !important;
}
/* Full-screen module sheet */
html.mission-stack .mh-dock.is-open,
html.mission-stack body.mh-sheet-open .mh-dock,
html.mission-stack .mission-mobile-hero.mh-dock-open .mh-dock {
position: fixed !important;
top: calc(52px + env(safe-area-inset-top, 0px)) !important;
left: 0 !important;
right: 0 !important;
bottom: calc(3.7rem + env(safe-area-inset-bottom, 0px)) !important;
z-index: 70 !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: var(--st-bg) !important;
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
html.mission-stack .mh-dock.is-open .mh-dock-active,
html.mission-stack body.mh-sheet-open .mh-dock-active {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
html.mission-stack .mh-dock.is-open .mh-dock-body {
flex: 1 1 auto !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.65rem 0.7rem calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
background: var(--st-bg) !important;
}
/* Hosted widget: flat card, never metal plate */
html.mission-stack .mh-sheet-hosted,
html.mission-stack .mh-dock-body .mission-widget.mh-sheet-hosted,
html.mission-stack .mh-dock-body .mission-widget {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
box-shadow: none !important;
padding: 0.75rem !important;
overflow: visible !important;
filter: none !important;
contain: none !important;
}
html.mission-stack .mh-sheet-hosted::before,
html.mission-stack .mh-sheet-hosted::after,
html.mission-stack .mh-sheet-hosted .mod-plate-host::before,
html.mission-stack .mh-sheet-hosted .mod-plate-host::after,
html.mission-stack .mh-sheet-hosted .auto-frame-sizer,
html.mission-stack .mh-sheet-hosted .si-frame-sizer,
html.mission-stack .mh-sheet-hosted .liq-frame-sizer,
html.mission-stack .mh-sheet-hosted img[src*="/img/hud/"] {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
width: 0 !important;
height: 0 !important;
}
html.mission-stack .mh-sheet-hosted .mod-plate-host,
html.mission-stack .mh-sheet-hosted .auto-plate-host,
html.mission-stack .mh-sheet-hosted .board-plate-host,
html.mission-stack .mh-sheet-hosted .arena-matchup-plate {
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
background: transparent !important;
background-image: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* Flatten every absolute zone inside hosted modules */
html.mission-stack .mh-sheet-hosted .auto-zone,
html.mission-stack .mh-sheet-hosted .auto-nest,
html.mission-stack .mh-sheet-hosted .ap-ops,
html.mission-stack .mh-sheet-hosted .ap-ops-cmd,
html.mission-stack .mh-sheet-hosted .ap-ops-status-row,
html.mission-stack .mh-sheet-hosted .ap-ops-mode-toggle,
html.mission-stack .mh-sheet-hosted .cp-grid,
html.mission-stack .mh-sheet-hosted .cp-cell,
html.mission-stack .mh-sheet-hosted .si-zone,
html.mission-stack .mh-sheet-hosted .liq-zone,
html.mission-stack .mh-sheet-hosted .board-chrome,
html.mission-stack .mh-sheet-hosted [class*="auto-zone"],
html.mission-stack .mh-sheet-hosted [class*="auto-nest"],
html.mission-stack .mh-sheet-hosted [class*="ap-ops"] {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
transform: none !important;
margin: 0 !important;
overflow: visible !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-cmd,
html.mission-stack .mh-sheet-hosted .auto-zone--head,
html.mission-stack .mh-sheet-hosted .ap-ops-status-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.45rem !important;
padding: 0.15rem 0 0.45rem !important;
border-bottom: 1px solid var(--st-border-soft) !important;
margin-bottom: 0.35rem !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-mode-toggle {
display: inline-flex !important;
width: auto !important;
border: 1px solid var(--st-border) !important;
border-radius: 999px !important;
background: var(--st-surface-2) !important;
padding: 0.15rem !important;
gap: 0.15rem !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-mode-opt {
border: none !important;
border-radius: 999px !important;
min-height: 36px !important;
padding: 0.35rem 0.9rem !important;
background: transparent !important;
color: var(--st-muted) !important;
font-weight: 650 !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-mode-opt.is-on {
background: var(--st-accent) !important;
color: var(--st-accent-ink) !important;
}
html.mission-stack .mh-sheet-hosted button[id*="engage"],
html.mission-stack .mh-sheet-hosted .btn.primary {
width: 100% !important;
min-height: 48px !important;
border-radius: 12px !important;
background: var(--st-accent) !important;
color: var(--st-accent-ink) !important;
font-weight: 700 !important;
box-shadow: none !important;
}
/* Hide decorative metal nameplates inside sheets */
html.mission-stack .mh-sheet-hosted .mod-chrome-head,
html.mission-stack .mh-sheet-hosted .mission-widget-head,
html.mission-stack .mh-sheet-hosted .auto-widget-head,
html.mission-stack .mh-sheet-hosted .section-head-row {
display: none !important;
}
/* —— Market sticky: kill metal board plate completely —— */
html.mission-stack .mh-market-sticky,
html.mission-stack .mh-market-sticky-body,
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky .board-wrap,
html.mission-stack .mh-market-sticky .mod-plate-host,
html.mission-stack .mh-market-sticky .board-plate-host {
background: var(--st-surface) !important;
background-image: none !important;
background-size: auto !important;
box-shadow: none !important;
aspect-ratio: auto !important;
height: auto !important;
min-height: 0 !important;
filter: none !important;
}
html.mission-stack .mh-market-sticky #market-board::before,
html.mission-stack .mh-market-sticky #market-board::after,
html.mission-stack .mh-market-sticky .board-wrap::before,
html.mission-stack .mh-market-sticky .board-wrap::after,
html.mission-stack .mh-market-sticky .mod-plate-host::before,
html.mission-stack .mh-market-sticky .mod-plate-host::after,
html.mission-stack .mh-market-sticky .board-plate-host::before,
html.mission-stack .mh-market-sticky .board-plate-host::after,
html.mission-stack .mh-market-sticky img[src*="frame-market"] {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
opacity: 0 !important;
}
html.mission-stack .mh-market-sticky .board-chrome {
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
padding: 0.35rem 0.25rem !important;
inset: auto !important;
height: auto !important;
}
html.mission-stack .mh-market-sticky .board-tabs {
display: flex !important;
gap: 0.35rem !important;
}
html.mission-stack .mh-market-sticky .board-tab {
flex: 1 1 50% !important;
min-height: 40px !important;
border-radius: 10px !important;
}
html.mission-stack .mh-market-sticky table,
html.mission-stack .mh-market-sticky .board-table {
width: 100% !important;
background: transparent !important;
}
html.mission-stack .mh-market-sticky .board-row,
html.mission-stack .mh-market-sticky tr {
background: transparent !important;
}
/* Topbar: solid sterile strip (icons no cyan glow rings) */
html.mission-stack .portal-topbar .portal-end,
html.mission-stack .portal-topbar .portal-nav {
gap: 0.35rem !important;
}
html.mission-stack .portal-topbar {
border-bottom: 1px solid var(--st-border) !important;
}
/* Light theme market was still black — force */
html.mission-stack[data-theme="light"] .mh-market-sticky,
html[data-theme="light"].mission-stack .mh-market-sticky,
html.mission-stack[data-theme="light"] .mh-market-sticky-body,
html.mission-stack[data-theme="light"] .mh-market-sticky #market-board {
background: #ffffff !important;
color: #0b0d0f !important;
}
}
/* ==========================================================================
v3b — light theme market board + topbar cleanup
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack[data-theme="light"] .mh-market-sticky,
html[data-theme="light"].mission-stack .mh-market-sticky,
html.mission-stack[data-theme="light"] .mh-market-sticky-body,
html.mission-stack[data-theme="light"] .mh-market-sticky #market-board,
html.mission-stack[data-theme="light"] .mh-market-sticky .board-chrome,
html.mission-stack[data-theme="light"] .mh-market-sticky table,
html.mission-stack[data-theme="light"] .mh-market-sticky .board-table,
html.mission-stack[data-theme="light"] .mh-market-sticky tbody,
html.mission-stack[data-theme="light"] .mh-market-sticky thead {
background: #ffffff !important;
background-image: none !important;
color: #0b0d0f !important;
}
html.mission-stack[data-theme="light"] .mh-market-sticky .board-tab {
background: #f6f7f9 !important;
border-color: #e6e8ec !important;
color: #5c6570 !important;
}
html.mission-stack[data-theme="light"] .mh-market-sticky .board-tab.is-on {
background: rgba(0, 184, 156, 0.12) !important;
border-color: rgba(0, 184, 156, 0.4) !important;
color: #00b89c !important;
}
html.mission-stack[data-theme="light"] .mh-market-sticky .board-search,
html.mission-stack[data-theme="light"] .mh-market-sticky input {
background: #f6f7f9 !important;
border-color: #e6e8ec !important;
color: #0b0d0f !important;
}
html.mission-stack[data-theme="light"] .mh-market-sticky td,
html.mission-stack[data-theme="light"] .mh-market-sticky th,
html.mission-stack[data-theme="light"] .mh-market-sticky .board-row {
color: #0b0d0f !important;
border-color: #e6e8ec !important;
background: transparent !important;
}
html.mission-stack[data-theme="light"] .portal-topbar {
background: #f3f5f7 !important;
border-bottom-color: #e6e8ec !important;
}
html.mission-stack[data-theme="light"] .portal-end-thumb,
html.mission-stack[data-theme="light"] .portal-link,
html.mission-stack[data-theme="light"] .portal-burger,
html.mission-stack[data-theme="light"] .theme-toggle {
background: #ffffff !important;
border-color: #e6e8ec !important;
}
/* Autopilot sheet readability */
html.mission-stack .mh-sheet-hosted label,
html.mission-stack .mh-sheet-hosted .auto-field-lab,
html.mission-stack .mh-sheet-hosted .ap-field-lab {
color: var(--st-muted) !important;
font-size: 0.72rem !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
html.mission-stack .mh-sheet-hosted input,
html.mission-stack .mh-sheet-hosted select,
html.mission-stack .mh-sheet-hosted textarea {
background: var(--st-surface-2) !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
color: var(--st-text) !important;
min-height: 40px !important;
box-shadow: none !important;
}
html.mission-stack .mh-dock-head {
background: var(--st-surface) !important;
}
}
/* ==========================================================================
v4 — Mission portrait = ONLY mobile hero (kill desk stream + metal bars)
Matches approved sterile layout; no old frames under the tiles.
========================================================================== */
@media (max-width: 1100px) {
/* Shell: hero fills viewport under topbar */
html.mission-stack #app.shell {
display: flex !important;
flex-direction: column !important;
height: 100dvh !important;
overflow: hidden !important;
background: var(--st-bg, #0b0d0f) !important;
}
/* Hide desktop rails entirely on phone Mission */
html.mission-stack #rail-left,
html.mission-stack #rail-right,
html.mission-stack #rail-right-social,
html.mission-stack aside.rail {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
html.mission-stack .stage {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
background: var(--st-bg) !important;
}
html.mission-stack .page[data-page="mission"].is-active {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
position: relative !important;
background: var(--st-bg) !important;
}
/* ONLY show mobile home (and banners if not hidden) */
html.mission-stack .page[data-page="mission"] > .mission-rail-mid,
html.mission-stack .page[data-page="mission"] > #mission-rail-mid,
html.mission-stack .page[data-page="mission"] > .mission-widget-source,
html.mission-stack .page[data-page="mission"] > #mission-widget-source,
html.mission-stack .page[data-page="mission"] > .auto-banner,
html.mission-stack .page[data-page="mission"] > #auto-banner,
html.mission-stack .page[data-page="mission"] > .assets-widget,
html.mission-stack .page[data-page="mission"] > #assets-widget,
html.mission-stack .page[data-page="mission"] > .board-wrap,
html.mission-stack .page[data-page="mission"] > #market-board,
html.mission-stack .page[data-page="mission"] > .coin-profile,
html.mission-stack .page[data-page="mission"] > #coin-profile,
html.mission-stack .page[data-page="mission"] > .trade-journal-widget,
html.mission-stack .page[data-page="mission"] > #trade-journal-panel,
html.mission-stack .page[data-page="mission"] > .social-panel,
html.mission-stack .page[data-page="mission"] > #social-panel,
html.mission-stack .page[data-page="mission"] > .arena-matchup,
html.mission-stack .page[data-page="mission"] > #arena-matchup,
html.mission-stack .page[data-page="mission"] > .liq-panel,
html.mission-stack .page[data-page="mission"] > #liq-panel,
html.mission-stack .page[data-page="mission"] > .panel.mission-widget,
html.mission-stack .page[data-page="mission"] > .mission-widget,
html.mission-stack .page[data-page="mission"] > .glass-panel {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* Exception: widgets hosted in dock or market sticky must show */
html.mission-stack .mh-dock .mission-widget,
html.mission-stack .mh-dock .auto-banner,
html.mission-stack .mh-dock #auto-banner,
html.mission-stack .mh-dock .assets-widget,
html.mission-stack .mh-dock #assets-widget,
html.mission-stack .mh-dock .board-wrap,
html.mission-stack .mh-dock #market-board,
html.mission-stack .mh-dock .coin-profile,
html.mission-stack .mh-dock #coin-profile,
html.mission-stack .mh-dock .arena-matchup,
html.mission-stack .mh-dock #arena-matchup,
html.mission-stack .mh-dock .social-panel,
html.mission-stack .mh-dock #social-panel,
html.mission-stack .mh-dock .trade-journal-widget,
html.mission-stack .mh-dock #trade-journal-panel,
html.mission-stack .mh-market-sticky .mission-widget,
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky .board-wrap {
display: block !important;
visibility: visible !important;
pointer-events: auto !important;
position: relative !important;
left: auto !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
}
html.mission-stack #mission-mobile-hero,
html.mission-stack .mission-mobile-hero {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: 100% !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.6rem 0.7rem calc(0.4rem + env(safe-area-inset-bottom, 0px)) !important;
gap: 0.5rem !important;
background: var(--st-bg) !important;
}
/* Kill ANY remaining HUD chrome images on stack */
html.mission-stack img[src*="/img/hud/frame-"],
html.mission-stack img[src*="/static/img/hud/frame-"] {
display: none !important;
}
/* Floating + expand from minimized plates — gone on phone home */
html.mission-stack .page[data-page="mission"] > .widget-min-btn,
html.mission-stack .page[data-page="mission"] .auto-banner .widget-min-btn,
html.mission-stack body:not(.mh-sheet-open) #auto-banner .widget-min-btn {
display: none !important;
}
/* —— Sterile top banner (replace HUD icon plates) —— */
html.mission-stack .portal-topbar,
html.mission-stack #portal-topbar {
position: sticky !important;
top: 0 !important;
z-index: 100 !important;
flex: 0 0 auto !important;
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
padding: env(safe-area-inset-top, 0px) 0.65rem 0.4rem !important;
background: var(--st-bg) !important;
background-image: none !important;
border-bottom: 1px solid var(--st-border) !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
/* Never auto-hide topbar on phone Mission */
html.mission-stack .portal-topbar.is-hidden,
html.mission-stack .portal-topbar.portal-topbar--hidden,
html.mission-stack body.portal-topbar-hidden .portal-topbar,
html.mission-stack .portal-topbar[data-autohide] {
transform: none !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
html.mission-stack .portal-topbar-hit {
display: none !important;
}
html.mission-stack .portal-topbar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.4rem !important;
min-height: 48px !important;
width: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
html.mission-stack .portal-topbar-left,
html.mission-stack .portal-topbar-right,
html.mission-stack .portal-topbar-end,
html.mission-stack .portal-nav {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Hide old HUD PNG icons */
html.mission-stack .portal-topbar img,
html.mission-stack .portal-link img,
html.mission-stack .portal-end-thumb img,
html.mission-stack .theme-toggle img {
display: none !important;
}
/* Flat icon buttons */
html.mission-stack .portal-link,
html.mission-stack .portal-end-thumb,
html.mission-stack .portal-burger,
html.mission-stack .theme-toggle,
html.mission-stack .portal-topbar button.portal-link,
html.mission-stack .portal-topbar button.portal-end-thumb {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: none !important;
color: var(--st-text) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
filter: none !important;
position: relative !important;
}
html.mission-stack .portal-link.is-on,
html.mission-stack .portal-link[aria-current="page"] {
border-color: var(--st-accent) !important;
background: var(--st-accent-dim) !important;
color: var(--st-accent) !important;
}
/* Simple glyph labels via aria / data */
html.mission-stack .portal-mission-btn::after { content: "⌂"; font-size: 1.15rem; }
html.mission-stack .portal-link[data-portal="whats-new"]::after,
html.mission-stack .portal-link[data-nav="whats-new"]::after { content: "✦"; font-size: 1rem; }
html.mission-stack .portal-link[data-portal="account"]::after,
html.mission-stack .portal-link[data-nav="account"]::after,
html.mission-stack button[data-portal="account"]::after { content: "◎"; font-size: 1.1rem; }
html.mission-stack .portal-link[data-portal="inbox"]::after,
html.mission-stack .portal-link[data-nav="inbox"]::after,
html.mission-stack button[title="Inbox"]::after,
html.mission-stack button[aria-label="Inbox"]::after { content: "✉"; font-size: 1rem; }
html.mission-stack .theme-toggle::after { content: "◐"; font-size: 1.05rem; color: var(--st-accent); }
html.mission-stack .portal-link[data-portal="logout"]::after,
html.mission-stack button[title*="Sign out"]::after,
html.mission-stack button[aria-label*="Sign out"]::after,
html.mission-stack button[title*="Log out"]::after { content: "→"; font-size: 1.1rem; }
/* Wordmark instead of clock cluster if present */
html.mission-stack .mission-clock-only,
html.mission-stack .portal-topbar-clock,
html.mission-stack .mission-clock-face {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--st-muted) !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
padding: 0 0.35rem !important;
}
/* Brand label chip */
html.mission-stack .portal-topbar-inner::before {
content: "NAVSTAK";
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--st-text);
margin-right: auto;
padding-right: 0.5rem;
flex: 0 0 auto;
}
/* Heartbeat equity big number */
html.mission-stack .mh-hb-head {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
width: 100% !important;
gap: 0.5rem !important;
}
html.mission-stack .mh-hb-eq {
font-size: clamp(1.6rem, 8vw, 2.1rem) !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
}
/* Market sticky always on home, clean */
html.mission-stack .mh-market-sticky {
margin-top: auto !important;
flex: 0 0 auto !important;
max-height: 38dvh !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px 16px 0 0 !important;
background: var(--st-surface) !important;
box-shadow: 0 -6px 24px rgba(0,0,0,0.2) !important;
}
/* Decision bar subtle */
html.mission-stack .mh-decision-bar {
display: none !important; /* hide open-decision strip on home — data lives in tiles */
}
/* Tiles denser, match phone screenshot intent */
html.mission-stack .mh-grid {
gap: 0.5rem !important;
}
html.mission-stack .mh-cell {
min-height: 5.8rem !important;
border-radius: 14px !important;
background: var(--st-surface) !important;
border: 1px solid var(--st-border) !important;
}
/* No site foot */
html.mission-stack .navstak-site-foot,
html.mission-stack .navstak-site-foot--mission {
display: none !important;
}
/* Ava help stays */
html.mission-stack .ava-float {
z-index: 90 !important;
}
}
/* v4b final override — force-hide unhosted HUD modules (beat jarvis display:flex) */
@media (max-width: 1100px) {
html.mission-stack #auto-banner:not(.mh-sheet-hosted),
html.mission-stack .auto-banner:not(.mh-sheet-hosted),
html.mission-stack #assets-widget:not(.mh-sheet-hosted),
html.mission-stack .assets-widget:not(.mh-sheet-hosted),
html.mission-stack #coin-profile:not(.mh-sheet-hosted),
html.mission-stack #arena-matchup:not(.mh-sheet-hosted),
html.mission-stack #social-panel:not(.mh-sheet-hosted),
html.mission-stack #trade-journal-panel:not(.mh-sheet-hosted),
html.mission-stack #market-board:not(.mh-sheet-hosted):not(.mh-market-hosted),
html.mission-stack #liq-panel:not(.mh-sheet-hosted) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
max-height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
}
/* Market board inside sticky is allowed */
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky .board-wrap,
html.mission-stack #market-board.mh-market-hosted {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
pointer-events: auto !important;
}
html.mission-stack .mh-dock .mh-sheet-hosted {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
pointer-events: auto !important;
}
/* Hide collapse chrome nameplates always on stack home */
html.mission-stack .auto-collapse-bar,
html.mission-stack .mod-collapse-bar,
html.mission-stack #auto-collapse-bar {
display: none !important;
}
/* All portal images hidden on stack */
html.mission-stack .portal-topbar img {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* Don't invent double wordmark if left nav first */
html.mission-stack .portal-topbar-inner {
position: relative !important;
}
}
/* v4c — market sticky content only (no metal plate geometry) */
@media (max-width: 1100px) {
html.mission-stack .mh-market-sticky {
background: var(--st-surface) !important;
background-image: none !important;
max-height: 42dvh !important;
min-height: 0 !important;
}
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky #market-board.mh-sheet-hosted,
html.mission-stack .mh-market-sticky .board-wrap,
html.mission-stack .mh-market-sticky .mod-plate-host,
html.mission-stack .mh-market-sticky .board-plate-host {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
left: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: auto !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
background-size: auto !important;
box-shadow: none !important;
filter: none !important;
overflow: visible !important;
/* kill plate inset vars */
--mb-inset-t: 0% !important;
--mb-inset-r: 0% !important;
--mb-inset-b: 0% !important;
--mb-inset-l: 0% !important;
--mb-aspect-w: auto !important;
--mb-aspect-h: auto !important;
}
html.mission-stack .mh-market-sticky #market-board::before,
html.mission-stack .mh-market-sticky #market-board::after,
html.mission-stack .mh-market-sticky .mod-plate-host::before,
html.mission-stack .mh-market-sticky .mod-plate-host::after,
html.mission-stack .mh-market-sticky .board-plate-host::before,
html.mission-stack .mh-market-sticky .board-plate-host::after,
html.mission-stack .mh-market-sticky .board-frame-sizer,
html.mission-stack .mh-market-sticky [class*="frame-sizer"] {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
}
html.mission-stack .mh-market-sticky .board-chrome,
html.mission-stack .mh-market-sticky .board-body,
html.mission-stack .mh-market-sticky .board-table-wrap,
html.mission-stack .mh-market-sticky .board-scroll,
html.mission-stack .mh-market-sticky .board-list {
position: static !important;
inset: auto !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
transform: none !important;
padding: 0.25rem 0.15rem !important;
margin: 0 !important;
background: transparent !important;
overflow: visible !important;
}
html.mission-stack .mh-market-sticky-body {
max-height: 32dvh !important;
overflow: auto !important;
background: var(--st-surface) !important;
}
/* Liqs / social pills full width of cell */
html.mission-stack .mh-pill {
width: 100% !important;
box-sizing: border-box !important;
}
html.mission-stack .mh-cell--standings {
min-height: 5.2rem !important;
}
/* Topbar wordmark + icons row clean */
html.mission-stack .portal-topbar-inner::before {
order: -1;
}
html.mission-stack[data-theme="light"] .mh-market-sticky,
html.mission-stack[data-theme="light"] .mh-market-sticky-body {
background: #fff !important;
}
}
@media (max-width: 1100px) {
html.mission-stack .mh-market-sticky #market-board.mh-sheet-hosted,
html.mission-stack .mh-market-sticky #market-board {
max-height: 30dvh !important;
overflow: auto !important;
}
html.mission-stack .mh-market-sticky-body {
max-height: 30dvh !important;
}
}
/* v4d polish — no nameplates, no dead gap, cleaner top icons */
@media (max-width: 1100px) {
/* Hosted module: kill every nameplate / min chrome (dock title is enough) */
html.mission-stack .mh-sheet-hosted > .mod-chrome-head,
html.mission-stack .mh-sheet-hosted > .mission-widget-head,
html.mission-stack .mh-sheet-hosted > .section-head-row,
html.mission-stack .mh-sheet-hosted > .auto-widget-head,
html.mission-stack .mh-sheet-hosted > .auto-collapse-bar,
html.mission-stack .mh-sheet-hosted > .mod-collapse-bar,
html.mission-stack .mh-sheet-hosted .widget-min-btn,
html.mission-stack .mh-dock .widget-min-btn {
display: none !important;
}
html.mission-stack .mh-sheet-hosted.auto-banner::before,
html.mission-stack .mh-sheet-hosted.auto-banner::after,
html.mission-stack #auto-banner.mh-sheet-hosted::before,
html.mission-stack #auto-banner.mh-sheet-hosted::after {
display: none !important;
content: none !important;
background: none !important;
opacity: 0 !important;
}
/* Empty dock never occupies space */
html.mission-stack .mh-dock[data-empty="1"],
html.mission-stack .mh-dock:not(.is-open) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
html.mission-stack .mh-dock.is-open {
display: flex !important;
}
/* Hero: tight stack, market pinned bottom */
html.mission-stack #mission-mobile-hero {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
}
html.mission-stack .mh-grid {
flex: 0 0 auto !important;
margin-bottom: calc(3.7rem + env(safe-area-inset-bottom, 0px)) !important;
}
html.mission-stack .mh-market-sticky {
margin-top: 0.35rem !important;
flex: 0 0 auto !important;
}
/* Liqs pill: always show label */
html.mission-stack #mh-cell-liq {
min-height: 3.4rem !important;
}
/* Better top glyphs */
html.mission-stack .portal-mission-btn::after { content: "◆"; font-size: 0.95rem; color: var(--st-accent); }
html.mission-stack .theme-toggle::after { content: "☀"; font-size: 0.95rem; }
html.mission-stack[data-theme="light"] .theme-toggle::after { content: "☾"; }
/* Autopilot sheet content spacing */
html.mission-stack .mh-sheet-hosted.auto-banner,
html.mission-stack #auto-banner.mh-sheet-hosted {
background: var(--st-surface) !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
padding: 0.85rem !important;
}
}
/* ==========================================================================
STERILE v5 — complete mobile Mission reskin (beats jarvis + mission-desk)
Load last. Scope: max-width 1100px + mission-stack.
========================================================================== */
@media (max-width: 1100px) {
/* —— Topbar: custom SVG icons, no HUD PNGs, no truncation —— */
html.mission-stack .portal-topbar img.portal-ico-hud,
html.mission-stack .portal-topbar .portal-ico-hud,
html.mission-stack .portal-topbar img.portal-end-thumb-img.portal-ico-hud {
display: none !important;
}
html.mission-stack .portal-topbar .portal-ico-sterile,
html.mission-stack .portal-topbar .portal-ico-sterile img {
display: inline-flex !important;
}
html.mission-stack .portal-topbar .portal-ico-sterile img {
display: block !important;
width: 20px !important;
height: 20px !important;
opacity: 1 !important;
visibility: visible !important;
}
html.mission-stack .portal-ico-sterile {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
color: var(--st-text, #f2f4f7) !important;
}
html.mission-stack .portal-ico-sterile img {
display: block !important;
width: 20px !important;
height: 20px !important;
filter: none !important;
opacity: 1 !important;
}
html.mission-stack .portal-link.is-on .portal-ico-sterile,
html.mission-stack .portal-link.is-on .portal-ico-sterile img {
filter: none !important;
}
/* Teal-tint active icon via CSS filter on svg img */
html.mission-stack .portal-link.is-on {
color: var(--st-accent) !important;
}
html.mission-stack .portal-link.is-on .portal-ico-sterile img {
/* approximate teal */
filter: invert(58%) sepia(72%) saturate(500%) hue-rotate(125deg) brightness(0.95) !important;
}
html.mission-stack .portal-topbar-inner::before {
content: none !important; /* use real logo if present */
}
html.mission-stack .portal-topbar-center {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
flex: 0 1 auto !important;
overflow: hidden !important;
}
html.mission-stack .portal-logo-img {
display: block !important;
height: 28px !important;
width: auto !important;
max-width: 96px !important;
object-fit: contain !important;
}
html.mission-stack .portal-topbar-left,
html.mission-stack .portal-topbar-end,
html.mission-stack .portal-actions {
flex: 0 0 auto !important;
min-width: 0 !important;
}
html.mission-stack .portal-nav {
gap: 0.3rem !important;
flex-wrap: nowrap !important;
}
html.mission-stack .portal-link,
html.mission-stack .portal-end-thumb,
html.mission-stack .portal-burger {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
flex: 0 0 40px !important;
}
/* Kill unicode ::after glyphs from earlier pass */
html.mission-stack .portal-mission-btn::after,
html.mission-stack .portal-link::after,
html.mission-stack .portal-end-thumb::after,
html.mission-stack .theme-toggle::after {
content: none !important;
display: none !important;
}
/* Clock compact, no truncation of critical icons */
html.mission-stack .mission-clock-only {
max-width: 7.5rem !important;
overflow: hidden !important;
}
html.mission-stack .mission-clock-time {
font-size: 0.7rem !important;
white-space: nowrap !important;
}
html.mission-stack .mission-clock-date {
font-size: 0.58rem !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 5.5rem !important;
}
/* —— MARKET BOARD: kill every plate source (jarvis ::before + desk bg-image + AR) —— */
html.mission-stack #market-board,
html.mission-stack #market-board.board-wrap,
html.mission-stack #market-board.board-wrap-tall,
html.mission-stack #market-board.is-rail-expanded,
html.mission-stack #market-board.mh-sheet-hosted,
html.mission-stack #market-board:not(.is-minimized),
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky #market-board.board-wrap,
html.mission-stack .mh-market-sticky #market-board.board-wrap-tall,
html.mission-stack .mh-market-sticky #market-board.is-rail-expanded {
background: var(--st-surface, #111317) !important;
background-color: var(--st-surface, #111317) !important;
background-image: none !important;
background-size: auto !important;
background-repeat: no-repeat !important;
aspect-ratio: auto !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: 32dvh !important;
min-height: 0 !important;
padding: 0.35rem 0.4rem !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
filter: none !important;
overflow: auto !important;
position: relative !important;
--mb-inset-t: 0% !important;
--mb-inset-r: 0% !important;
--mb-inset-b: 0% !important;
--mb-inset-l: 0% !important;
}
html.mission-stack #market-board::before,
html.mission-stack #market-board::after,
html.mission-stack #market-board.board-wrap::before,
html.mission-stack #market-board.board-wrap::after,
html.mission-stack #market-board.board-wrap-tall::before,
html.mission-stack #market-board.is-rail-expanded::before,
html.mission-stack #market-board.is-rail-expanded::after,
html.mission-stack .mh-market-sticky #market-board::before,
html.mission-stack .mh-market-sticky #market-board::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
opacity: 0 !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
inset: auto !important;
}
html.mission-stack .mh-market-sticky {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px 16px 0 0 !important;
max-height: 42dvh !important;
}
html.mission-stack .mh-market-sticky-body {
background: var(--st-surface) !important;
max-height: 34dvh !important;
overflow: auto !important;
}
/* Market tabs/search sterile (override cyan jarvis) */
html.mission-stack #market-board .board-tab,
html.mission-stack .mh-market-sticky .board-tab {
background: var(--st-surface-2) !important;
border: 1px solid var(--st-border) !important;
color: var(--st-muted) !important;
border-radius: 10px !important;
min-height: 36px !important;
box-shadow: none !important;
}
html.mission-stack #market-board .board-tab.is-on,
html.mission-stack .mh-market-sticky .board-tab.is-on {
background: var(--st-accent-dim) !important;
border-color: rgba(0, 184, 156, 0.45) !important;
color: var(--st-accent) !important;
}
html.mission-stack #market-board-search,
html.mission-stack .mh-market-sticky .board-search {
background: var(--st-surface-2) !important;
border: 1px solid var(--st-border) !important;
color: var(--st-text) !important;
border-radius: 10px !important;
min-height: 36px !important;
}
html.mission-stack #market-board table.board thead th {
background: var(--st-surface-2) !important;
color: var(--st-muted) !important;
border-bottom: 1px solid var(--st-border) !important;
}
html.mission-stack #market-board table.board tbody td {
color: var(--st-text) !important;
border-bottom: 1px solid var(--st-border-soft) !important;
}
html.mission-stack #market-board .market-table-scroll {
background: transparent !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
min-height: 8rem !important;
max-height: 26dvh !important;
}
/* —— ALL hosted modules: flat sterile cards, no plates —— */
html.mission-stack .mh-sheet-hosted,
html.mission-stack .mh-dock .mh-sheet-hosted,
html.mission-stack #auto-banner.mh-sheet-hosted,
html.mission-stack #assets-widget.mh-sheet-hosted,
html.mission-stack #coin-profile.mh-sheet-hosted,
html.mission-stack #arena-matchup.mh-sheet-hosted,
html.mission-stack #social-panel.mh-sheet-hosted,
html.mission-stack #trade-journal-panel.mh-sheet-hosted {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
box-shadow: none !important;
aspect-ratio: auto !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
padding: 0.85rem !important;
overflow: visible !important;
filter: none !important;
}
html.mission-stack .mh-sheet-hosted::before,
html.mission-stack .mh-sheet-hosted::after,
html.mission-stack #auto-banner.mh-sheet-hosted::before,
html.mission-stack #auto-banner.mh-sheet-hosted::after,
html.mission-stack #assets-widget.mh-sheet-hosted::before,
html.mission-stack #coin-profile.mh-sheet-hosted::before,
html.mission-stack #arena-matchup.mh-sheet-hosted::before {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
opacity: 0 !important;
}
html.mission-stack .mh-sheet-hosted .mod-plate-host,
html.mission-stack .mh-sheet-hosted .auto-plate-host,
html.mission-stack .mh-sheet-hosted .auto-frame-sizer,
html.mission-stack .mh-sheet-hosted [class*="frame-sizer"] {
background: transparent !important;
background-image: none !important;
position: static !important;
height: auto !important;
aspect-ratio: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
padding: 0 !important;
}
html.mission-stack .mh-sheet-hosted .auto-frame-sizer,
html.mission-stack .mh-sheet-hosted [class*="frame-sizer"] {
display: none !important;
}
/* Flatten absolute zones inside any hosted widget */
html.mission-stack .mh-sheet-hosted .auto-zone,
html.mission-stack .mh-sheet-hosted .auto-nest,
html.mission-stack .mh-sheet-hosted .ap-ops,
html.mission-stack .mh-sheet-hosted .ap-ops-cmd,
html.mission-stack .mh-sheet-hosted [class*="auto-zone"],
html.mission-stack .mh-sheet-hosted [class*="auto-nest"],
html.mission-stack .mh-sheet-hosted [class*="ap-ops"],
html.mission-stack .mh-sheet-hosted .cp-grid,
html.mission-stack .mh-sheet-hosted .si-zone,
html.mission-stack .mh-sheet-hosted .liq-zone {
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
}
/* —— MODALS / POPUPS sterile on phone —— */
html.mission-stack .modal,
html.mission-stack [id^="modal-"],
html.mission-stack .modal-card,
html.mission-stack .modal-panel,
html.mission-stack .modal-body,
html.mission-stack .dialog-card,
html.mission-stack .popup-card {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
box-shadow: 0 16px 48px rgba(0,0,0,0.45) !important;
color: var(--st-text) !important;
}
html.mission-stack .modal::before,
html.mission-stack [id^="modal-"]::before,
html.mission-stack .modal-card::before {
display: none !important;
background: none !important;
}
html.mission-stack .modal-backdrop,
html.mission-stack .modal-overlay {
background: rgba(0,0,0,0.55) !important;
backdrop-filter: blur(6px) !important;
}
html.mission-stack .modal .btn.primary,
html.mission-stack [id^="modal-"] .btn.primary {
background: var(--st-accent) !important;
color: #041018 !important;
border: none !important;
border-radius: 12px !important;
box-shadow: none !important;
}
/* —— Liqs / Social pills never look empty —— */
html.mission-stack #mh-cell-liq,
html.mission-stack #mh-cell-social {
min-height: 3.6rem !important;
justify-content: center !important;
}
html.mission-stack #mh-liq-main:empty::before,
html.mission-stack #mh-liq-main {
min-width: 1ch;
}
html.mission-stack #mh-cell-liq .mh-pill-sym,
html.mission-stack #mh-cell-social .mh-pill-sym {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: var(--st-text) !important;
}
html.mission-stack #mh-cell-liq .mh-pill-data,
html.mission-stack #mh-cell-social .mh-pill-data {
color: var(--st-muted) !important;
font-size: 0.72rem !important;
}
/* Light market */
html.mission-stack[data-theme="light"] #market-board,
html.mission-stack[data-theme="light"] .mh-market-sticky,
html.mission-stack[data-theme="light"] .mh-market-sticky-body {
background: #ffffff !important;
color: #0b0d0f !important;
}
}
/* v5b — icon contrast + market residual kill + topbar no NAV truncation */
@media (max-width: 1100px) {
html.mission-stack .portal-ico-sterile img {
opacity: 1 !important;
filter: none !important;
}
html.mission-stack .portal-link.is-on .portal-ico-sterile img {
filter: invert(58%) sepia(72%) saturate(500%) hue-rotate(125deg) brightness(0.95) !important;
}
/* Prefer logo, hide broken NAV text pseudo */
html.mission-stack .portal-topbar-inner::before {
content: none !important;
}
html.mission-stack .portal-logo-center {
display: flex !important;
align-items: center !important;
}
html.mission-stack .portal-logo-img {
display: block !important;
height: 26px !important;
width: auto !important;
max-width: 110px !important;
}
/* Nuclear: any element in market sticky with plate-like bg */
html.mission-stack .mh-market-sticky *,
html.mission-stack .mh-market-sticky *::before,
html.mission-stack .mh-market-sticky *::after {
background-image: none !important;
}
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky .mod-plate-host,
html.mission-stack .mh-market-sticky .board-plate-host,
html.mission-stack .mh-market-sticky .board-wrap {
background: var(--st-surface) !important;
background-image: none !important;
padding: 0.35rem !important;
aspect-ratio: auto !important;
border: none !important;
box-shadow: none !important;
}
/* Hosted modules: same nuclear bg-image kill */
html.mission-stack .mh-sheet-hosted,
html.mission-stack .mh-sheet-hosted *,
html.mission-stack .mh-sheet-hosted *::before,
html.mission-stack .mh-sheet-hosted *::after {
background-image: none !important;
}
/* Restore intentional solid fills that need no images */
html.mission-stack .mh-sheet-hosted .btn.primary,
html.mission-stack .mh-sheet-hosted .ap-ops-mode-opt.is-on,
html.mission-stack .mh-sheet-hosted button[id*="engage"] {
background-image: none !important;
background-color: var(--st-accent) !important;
color: #041018 !important;
}
html.mission-stack .mh-sheet-hosted {
background-color: var(--st-surface) !important;
}
/* Clock: drop metal plate look */
html.mission-stack .mission-clock-only-plate,
html.mission-stack .mission-clock-face {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
box-shadow: none !important;
}
html.mission-stack .mission-clock-face--time,
html.mission-stack .mission-clock-face--date {
min-width: 0 !important;
padding: 0.2rem 0.35rem !important;
}
}
@media (max-width: 1100px) {
/* section-label uses frame-module-title.png — hide in mobile sterile */
html.mission-stack .section-label,
html.mission-stack .mh-market-sticky .section-label,
html.mission-stack .mh-sheet-hosted .section-label,
html.mission-stack .mod-chrome-head .section-label {
background-image: none !important;
background: transparent !important;
}
html.mission-stack .mh-market-sticky .section-head-row,
html.mission-stack .mh-market-sticky .board-widget-head,
html.mission-stack .mh-market-sticky .mod-chrome-head {
display: none !important;
}
}
@media (max-width: 1100px) {
html.mission-stack .mh-market-sticky .section-label,
html.mission-stack .mh-market-sticky p.section-label,
html.mission-stack #market-board .section-label {
display: none !important;
background-image: none !important;
}
}
@media (max-width: 1100px) {
/* logo intentionally hidden on phone Mission (v6 density) */
html.mission-stack .portal-logo-img,
html.mission-stack .portal-logo-center img,
html.mission-stack img.portal-logo-img,
html.mission-stack .portal-topbar-center {
display: none !important;
}
}
/* ==========================================================================
STERILE v6 — complete remaining polish (topbar · modules · modals · AP)
========================================================================== */
@media (max-width: 1100px) {
/* —— Topbar density: primary strip + overflow menu —— */
html.mission-stack .portal-topbar-center,
html.mission-stack .portal-logo-center,
html.mission-stack .portal-logo-img,
html.mission-stack .mission-clock-only,
html.mission-stack .portal-topbar-clock,
html.mission-stack #btn-live-capital {
display: none !important;
}
/* Secondary destinations live in burger drawer */
html.mission-stack .portal-whats-new-btn,
html.mission-stack .portal-metrics-btn,
html.mission-stack .portal-subscription-btn,
html.mission-stack .portal-admin-btn {
display: none !important;
}
html.mission-stack .portal-topbar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.4rem !important;
min-height: 48px !important;
padding: 0 0.15rem !important;
}
html.mission-stack .portal-topbar-left,
html.mission-stack .portal-nav {
display: flex !important;
align-items: center !important;
gap: 0.3rem !important;
flex: 0 0 auto !important;
}
html.mission-stack .portal-actions {
display: flex !important;
align-items: center !important;
gap: 0.3rem !important;
margin-left: auto !important;
}
html.mission-stack .portal-topbar-end {
display: flex !important;
align-items: center !important;
gap: 0.3rem !important;
}
html.mission-stack .portal-link,
html.mission-stack .portal-end-thumb,
html.mission-stack .portal-burger {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
box-shadow: none !important;
}
html.mission-stack .portal-burger {
font-size: 0 !important; /* hide ☰ text */
position: relative !important;
}
html.mission-stack .portal-burger::before {
content: "" !important;
display: block !important;
width: 18px !important;
height: 18px !important;
background: url("/static/img/sterile/menu.svg?v=3") center / 18px 18px no-repeat !important;
}
/* —— Mobile nav drawer (sterile sheet) —— */
html.mission-stack .portal-mobile-nav,
html.mission-stack #mobile-nav {
position: fixed !important;
top: calc(56px + env(safe-area-inset-top, 0px)) !important;
left: 0.65rem !important;
right: 0.65rem !important;
z-index: 300 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
padding: 0.55rem !important;
border-radius: 16px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.45) !important;
}
html.mission-stack .portal-mobile-nav[hidden],
html.mission-stack #mobile-nav[hidden] {
display: none !important;
}
html.mission-stack .portal-mobile-nav button,
html.mission-stack #mobile-nav button {
min-height: 48px !important;
border: none !important;
border-radius: 12px !important;
background: transparent !important;
color: var(--st-text) !important;
text-align: left !important;
padding: 0.7rem 0.85rem !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
}
html.mission-stack .portal-mobile-nav button:active,
html.mission-stack #mobile-nav button:hover {
background: var(--st-accent-dim) !important;
color: var(--st-accent) !important;
}
/* —— Home tiles: no cut-off standings/social —— */
html.mission-stack .mh-grid {
grid-template-columns: 1fr 1fr !important;
gap: 0.5rem !important;
}
html.mission-stack .mh-cell,
html.mission-stack .mh-pill {
min-height: 5.6rem !important;
overflow: hidden !important;
}
html.mission-stack .mh-cell--standings,
html.mission-stack #mh-cell-standings {
min-height: 5.6rem !important;
}
html.mission-stack .mh-cell--standings .mh-cell-foot,
html.mission-stack .mh-cell--standings .mh-pill-data {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
html.mission-stack #mh-cell-social,
html.mission-stack #mh-cell-liq {
min-height: 3.5rem !important;
}
/* —— Autopilot sheet: real form layout —— */
html.mission-stack #auto-banner.mh-sheet-hosted,
html.mission-stack .mh-sheet-hosted.auto-banner {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
padding: 0.85rem !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops,
html.mission-stack .mh-sheet-hosted .auto-plate-host,
html.mission-stack .mh-sheet-hosted .mod-plate-host {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
width: 100% !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-cmd,
html.mission-stack .mh-sheet-hosted .auto-zone--head,
html.mission-stack .mh-sheet-hosted .ap-ops-status-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.55rem !important;
width: 100% !important;
border-bottom: 1px solid var(--st-border-soft) !important;
padding-bottom: 0.65rem !important;
margin-bottom: 0.15rem !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-mode-toggle,
html.mission-stack .mh-sheet-hosted #auto-mode {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
width: 100% !important;
border-radius: 999px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
padding: 0.2rem !important;
gap: 0.15rem !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-mode-opt {
border: none !important;
border-radius: 999px !important;
min-height: 44px !important;
font-weight: 700 !important;
background: transparent !important;
color: var(--st-muted) !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-mode-opt.is-on {
background: var(--st-accent) !important;
color: #041018 !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-cmd-right,
html.mission-stack .mh-sheet-hosted .auto-head-tools,
html.mission-stack .mh-sheet-hosted .ap-ops-cmd-left {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.45rem !important;
width: 100% !important;
position: static !important;
}
html.mission-stack .mh-sheet-hosted button[id*="engage"],
html.mission-stack .mh-sheet-hosted #btn-auto-engage,
html.mission-stack .mh-sheet-hosted .auto-engage,
html.mission-stack .mh-sheet-hosted .ap-ops-btn--engage {
flex: 1 1 100% !important;
width: 100% !important;
min-height: 48px !important;
border-radius: 12px !important;
background: var(--st-accent) !important;
color: #041018 !important;
font-weight: 800 !important;
border: none !important;
box-shadow: none !important;
order: 10 !important;
}
html.mission-stack .mh-sheet-hosted #btn-auto-restart,
html.mission-stack .mh-sheet-hosted button[id*="restart"] {
flex: 1 1 auto !important;
min-height: 44px !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
color: var(--st-text) !important;
}
/* Control: Style / Aggression as clean chip grids */
html.mission-stack .mh-sheet-hosted .ap-ops-control,
html.mission-stack .mh-sheet-hosted #espn-playbook,
html.mission-stack .mh-sheet-hosted .ap-ops-control-stack,
html.mission-stack .mh-sheet-hosted .ap-ops-control-body {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
width: 100% !important;
position: static !important;
height: auto !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-sec-h {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 0.5rem !important;
margin: 0.25rem 0 0.15rem !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-sec-t {
font-size: 0.78rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--st-muted) !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-line,
html.mission-stack .mh-sheet-hosted .ap-ops-field,
html.mission-stack .mh-sheet-hosted .ap-ops-seg {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.4rem !important;
width: 100% !important;
position: static !important;
height: auto !important;
min-height: 0 !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-field-lab,
html.mission-stack .mh-sheet-hosted .auto-field-lab {
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--st-dim) !important;
margin: 0 !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row,
html.mission-stack .mh-sheet-hosted #style-seg-chips,
html.mission-stack .mh-sheet-hosted #agg-seg-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.4rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
position: static !important;
height: auto !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row > li,
html.mission-stack .mh-sheet-hosted #style-seg-chips > li,
html.mission-stack .mh-sheet-hosted #agg-seg-chips > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
flex: 1 1 calc(50% - 0.25rem) !important;
min-width: 5.5rem !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row button,
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row [role="radio"],
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row label,
html.mission-stack .mh-sheet-hosted .ap-ops-chip,
html.mission-stack .mh-sheet-hosted .espn-pb-tab {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 44px !important;
padding: 0.5rem 0.65rem !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
color: var(--st-text) !important;
font-size: 0.88rem !important;
font-weight: 650 !important;
box-shadow: none !important;
position: static !important;
transform: none !important;
white-space: nowrap !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row button[aria-checked="true"],
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row [aria-checked="true"],
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row .is-on,
html.mission-stack .mh-sheet-hosted .ap-ops-chip.is-on,
html.mission-stack .mh-sheet-hosted .espn-pb-tab.is-on,
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row label:has(input:checked) {
background: var(--st-accent-dim) !important;
border-color: rgba(0, 184, 156, 0.5) !important;
color: var(--st-accent) !important;
}
/* Universe chips row */
html.mission-stack .mh-sheet-hosted .auto-universe-chips,
html.mission-stack .mh-sheet-hosted .ap-ops-uni-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
html.mission-stack .mh-sheet-hosted .auto-universe-chips li {
list-style: none !important;
margin: 0 !important;
}
html.mission-stack .mh-sheet-hosted .auto-uni-chip {
display: inline-flex !important;
align-items: center !important;
gap: 0.3rem !important;
min-height: 36px !important;
padding: 0.35rem 0.55rem !important;
border-radius: 999px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
color: var(--st-text) !important;
font-size: 0.78rem !important;
}
html.mission-stack .mh-sheet-hosted .auto-uni-chip:has(input:checked) {
border-color: var(--st-accent) !important;
background: var(--st-accent-dim) !important;
color: var(--st-accent) !important;
}
html.mission-stack .mh-sheet-hosted #btn-apply-settings,
html.mission-stack .mh-sheet-hosted .ap-ops-btn--apply-blue {
width: 100% !important;
min-height: 44px !important;
border-radius: 12px !important;
background: var(--st-surface-2) !important;
border: 1px solid var(--st-border) !important;
color: var(--st-text) !important;
}
html.mission-stack .mh-sheet-hosted #btn-apply-settings:not(:disabled) {
background: var(--st-accent) !important;
color: #041018 !important;
border: none !important;
}
/* Desk grid: single column on phone */
html.mission-stack .mh-sheet-hosted .auto-desk-grid,
html.mission-stack .mh-sheet-hosted .ap-ops-grid {
display: flex !important;
flex-direction: column !important;
gap: 0.85rem !important;
width: 100% !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-tel-grid,
html.mission-stack .mh-sheet-hosted .auto-telemetry {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* —— ALL other hosted modules: same flat card treatment —— */
html.mission-stack .mh-sheet-hosted#coin-profile,
html.mission-stack .mh-sheet-hosted#assets-widget,
html.mission-stack .mh-sheet-hosted#arena-matchup,
html.mission-stack .mh-sheet-hosted#social-panel,
html.mission-stack .mh-sheet-hosted#trade-journal-panel,
html.mission-stack .mh-sheet-hosted#liq-panel {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
padding: 0.75rem !important;
}
html.mission-stack .mh-sheet-hosted .focus-hub-tabs,
html.mission-stack .mh-sheet-hosted .am-mode-row,
html.mission-stack .mh-sheet-hosted .trades-topnav,
html.mission-stack .mh-sheet-hosted .si-feed-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
position: static !important;
}
/* —— ALL modals sterile —— */
html.mission-stack .modal,
html.mission-stack [id^="modal-"],
html.mission-stack .modal-card,
html.mission-stack .modal-panel,
html.mission-stack .modal-dialog,
html.mission-stack #msg-pop,
html.mission-stack #msg-full-modal,
html.mission-stack #msg-compose-modal,
html.mission-stack .msg-pop,
html.mission-stack .overlay-card {
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
box-shadow: 0 18px 48px rgba(0,0,0,0.5) !important;
color: var(--st-text) !important;
}
html.mission-stack .modal::before,
html.mission-stack [id^="modal-"]::before,
html.mission-stack .modal-card::before,
html.mission-stack #msg-pop::before {
display: none !important;
content: none !important;
background: none !important;
}
html.mission-stack .modal-backdrop,
html.mission-stack .modal-overlay,
html.mission-stack .overlay-backdrop {
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
}
html.mission-stack .modal input,
html.mission-stack .modal select,
html.mission-stack .modal textarea,
html.mission-stack [id^="modal-"] input,
html.mission-stack [id^="modal-"] select,
html.mission-stack [id^="modal-"] textarea {
background: var(--st-surface-2) !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
color: var(--st-text) !important;
min-height: 42px !important;
box-shadow: none !important;
}
html.mission-stack .modal .btn.primary,
html.mission-stack [id^="modal-"] .btn.primary {
background: var(--st-accent) !important;
color: #041018 !important;
border: none !important;
border-radius: 12px !important;
min-height: 44px !important;
font-weight: 700 !important;
box-shadow: none !important;
}
html.mission-stack .modal .btn.ghost,
html.mission-stack .modal .btn.secondary,
html.mission-stack [id^="modal-"] .btn.ghost {
border: 1px solid var(--st-border) !important;
background: transparent !important;
color: var(--st-text) !important;
border-radius: 12px !important;
min-height: 42px !important;
}
html.mission-stack .modal-head,
html.mission-stack .modal-title,
html.mission-stack [id^="modal-"] h2,
html.mission-stack [id^="modal-"] h3 {
color: var(--st-text) !important;
font-weight: 700 !important;
}
/* Live modal checklist */
html.mission-stack #modal-live,
html.mission-stack #modal-live .modal-card {
max-width: min(100vw - 1.25rem, 28rem) !important;
}
/* Light theme consistency */
html.mission-stack[data-theme="light"] .portal-mobile-nav,
html.mission-stack[data-theme="light"] #mobile-nav,
html.mission-stack[data-theme="light"] .modal,
html.mission-stack[data-theme="light"] [id^="modal-"] {
background: #ffffff !important;
color: #0b0d0f !important;
}
}
@media (max-width: 1100px) {
html.mission-stack .portal-mobile-nav-lab {
margin: 0.45rem 0.5rem 0.15rem !important;
font-size: 0.65rem !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--st-dim) !important;
}
}
/* v6b hard fixes — topbar compaction + style chip grid */
@media (max-width: 1100px) {
html.mission-stack .portal-topbar-center,
html.mission-stack .portal-logo-center,
html.mission-stack .portal-logo-img,
html.mission-stack a.portal-logo-center,
/* clock restored in v8 — do not hide */
html.mission-stack button.portal-whats-new-btn,
html.mission-stack button.portal-metrics-btn,
html.mission-stack button.portal-subscription-btn,
html.mission-stack #btn-portal-whats-new,
html.mission-stack #btn-portal-metrics,
html.mission-stack #btn-portal-subscription,
html.mission-stack #btn-portal-admin,
html.mission-stack button.portal-admin-btn {
display: none !important;
}
/* Style/Aggression chips: 2-column grid regardless of li wrappers */
html.mission-stack .mh-sheet-hosted #style-seg-chips,
html.mission-stack .mh-sheet-hosted #agg-seg-chips,
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
width: 100% !important;
}
html.mission-stack .mh-sheet-hosted #style-seg-chips > *,
html.mission-stack .mh-sheet-hosted #agg-seg-chips > *,
html.mission-stack .mh-sheet-hosted .ap-ops-seg-row > * {
width: 100% !important;
min-width: 0 !important;
flex: none !important;
}
html.mission-stack .mh-sheet-hosted #style-seg-chips button,
html.mission-stack .mh-sheet-hosted #agg-seg-chips button,
html.mission-stack .mh-sheet-hosted #style-seg-chips [role="radio"],
html.mission-stack .mh-sheet-hosted #agg-seg-chips [role="radio"] {
width: 100% !important;
min-height: 44px !important;
}
/* Engage = teal accent (not residual green) */
html.mission-stack .mh-sheet-hosted button[id*="engage"],
html.mission-stack .mh-sheet-hosted #btn-auto-engage {
background: #00b89c !important;
background-color: #00b89c !important;
color: #041018 !important;
}
}
/* v6c — Autopilot status cleanup + menu reliability */
@media (max-width: 1100px) {
/* Hide desktop status chrome that confuses phone sheet */
html.mission-stack .mh-sheet-hosted #auto-collapse-bar,
html.mission-stack .mh-sheet-hosted .auto-collapse-bar,
html.mission-stack .mh-sheet-hosted .auto-min-status,
html.mission-stack .mh-sheet-hosted .auto-min-mode,
html.mission-stack .mh-sheet-hosted .auto-min-engage,
html.mission-stack .mh-sheet-hosted .auto-min-phase,
html.mission-stack .mh-sheet-hosted .provision-status-chip:empty {
display: none !important;
}
/* Status line: clean single column */
html.mission-stack .mh-sheet-hosted .ap-ops-status-copy,
html.mission-stack .mh-sheet-hosted .auto-status-line,
html.mission-stack .mh-sheet-hosted .ap-ops-phase {
position: static !important;
width: 100% !important;
font-size: 0.85rem !important;
color: var(--st-muted) !important;
line-height: 1.35 !important;
}
/* Don't show tiny green ENGAGE plate badge if separate from real button */
html.mission-stack .mh-sheet-hosted .ap-ops-engage-badge,
html.mission-stack .mh-sheet-hosted .auto-engage-badge,
html.mission-stack .mh-sheet-hosted .espn-pb-engage-pill {
display: none !important;
}
/* Menu always above dock */
html.mission-stack #mobile-nav:not([hidden]) {
display: flex !important;
z-index: 400 !important;
}
}
/* v6d — force full-width AP command bar + readable controls */
@media (max-width: 1100px) {
html.mission-stack .mh-sheet-hosted #auto-cmd-bar,
html.mission-stack .mh-sheet-hosted .auto-cmd-bar,
html.mission-stack .mh-sheet-hosted .ap-ops-cmd {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.5rem !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
html.mission-stack .mh-sheet-hosted #auto-mode,
html.mission-stack .mh-sheet-hosted .ap-ops-mode-toggle {
width: 100% !important;
max-width: 100% !important;
}
html.mission-stack .mh-sheet-hosted #btn-engage,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
height: 48px !important;
padding: 0 1rem !important;
margin: 0 !important;
font-size: 1rem !important;
font-weight: 800 !important;
line-height: 1 !important;
border-radius: 12px !important;
background: #00b89c !important;
background-color: #00b89c !important;
color: #041018 !important;
border: none !important;
box-shadow: none !important;
opacity: 1 !important;
overflow: visible !important;
transform: none !important;
position: static !important;
}
html.mission-stack .mh-sheet-hosted #btn-restart-bot,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-restart-bot {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 44px !important;
height: 44px !important;
padding: 0 1rem !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
color: var(--st-text) !important;
font-size: 0.9rem !important;
font-weight: 650 !important;
position: static !important;
transform: none !important;
opacity: 1 !important;
}
html.mission-stack .mh-sheet-hosted #auto-status,
html.mission-stack .mh-sheet-hosted .auto-status {
display: block !important;
width: 100% !important;
min-height: 1.25rem !important;
height: auto !important;
max-height: none !important;
font-size: 0.85rem !important;
line-height: 1.4 !important;
color: var(--st-muted) !important;
overflow: visible !important;
white-space: normal !important;
padding: 0.15rem 0 !important;
margin: 0 !important;
}
html.mission-stack .mh-sheet-hosted #btn-apply-settings {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 44px !important;
height: 44px !important;
font-size: 0.9rem !important;
opacity: 1 !important;
}
/* Control stacks full width of card (not 42% nest) */
html.mission-stack .mh-sheet-hosted .auto-nest--control,
html.mission-stack .mh-sheet-hosted .ap-ops-control,
html.mission-stack .mh-sheet-hosted #espn-playbook,
html.mission-stack .mh-sheet-hosted .ap-ops-control-body,
html.mission-stack .mh-sheet-hosted .ap-ops-control-stack,
html.mission-stack .mh-sheet-hosted .auto-nest--status,
html.mission-stack .mh-sheet-hosted .ap-ops-nest {
flex: 1 1 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
html.mission-stack .mh-sheet-hosted #style-seg-chips,
html.mission-stack .mh-sheet-hosted #agg-seg-chips {
width: 100% !important;
max-width: 100% !important;
}
html.mission-stack .mh-sheet-hosted .ap-ops-seg-chip {
min-height: 44px !important;
height: 44px !important;
width: 100% !important;
}
/* Hide tiny Risk gear if unusable */
html.mission-stack .mh-sheet-hosted #btn-ap-settings {
min-height: 40px !important;
min-width: 40px !important;
height: 40px !important;
width: auto !important;
padding: 0 0.75rem !important;
border-radius: 10px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface-2) !important;
font-size: 0.8rem !important;
}
}
/* ==========================================================================
STERILE v7 — fill market frame · no truncated sheets · drop Liqs tile
========================================================================== */
@media (max-width: 1100px) {
/* Liqs off Mission home */
html.mission-stack #mh-cell-liq,
html.mission-stack .mh-pill--liq {
display: none !important;
}
/* Social sits beside Standings (same size as other pills) — not full-width */
/* —— Sheet content: never clip module body —— */
html.mission-stack .mh-dock.is-open,
html.mission-stack body.mh-sheet-open .mh-dock,
html.mission-stack .mh-dock:not([data-empty="1"]) {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
top: calc(52px + env(safe-area-inset-top, 0px)) !important;
left: 0 !important;
right: 0 !important;
bottom: calc(3.7rem + env(safe-area-inset-bottom, 0px)) !important;
height: auto !important;
max-height: none !important;
overflow: hidden !important;
}
html.mission-stack .mh-dock.is-open .mh-dock-active,
html.mission-stack body.mh-sheet-open .mh-dock-active {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
max-height: none !important;
overflow: hidden !important;
}
html.mission-stack .mh-dock.is-open .mh-dock-body,
html.mission-stack body.mh-sheet-open .mh-dock-body,
html.mission-stack #mh-sheet-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.65rem 0.7rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
}
/* Hosted modules: full width, natural height, scroll parent */
html.mission-stack .mh-dock-body .mh-sheet-hosted,
html.mission-stack .mh-dock-body .mission-widget,
html.mission-stack #mh-sheet-body > * {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Inner zones must not absolute-clip */
html.mission-stack .mh-sheet-hosted .mod-plate-host,
html.mission-stack .mh-sheet-hosted .auto-plate-host,
html.mission-stack .mh-sheet-hosted .ap-ops,
html.mission-stack .mh-sheet-hosted .auto-desk-grid,
html.mission-stack .mh-sheet-hosted .ap-ops-grid,
html.mission-stack .mh-sheet-hosted .cp-grid,
html.mission-stack .mh-sheet-hosted .si-body,
html.mission-stack .mh-sheet-hosted .tj-body,
html.mission-stack .mh-sheet-hosted .am-body,
html.mission-stack .mh-sheet-hosted .focus-body {
position: static !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: visible !important;
inset: auto !important;
transform: none !important;
}
/* Tables / lists inside sheets scroll naturally */
html.mission-stack .mh-sheet-hosted table,
html.mission-stack .mh-sheet-hosted .trades-list,
html.mission-stack .mh-sheet-hosted .si-feed,
html.mission-stack .mh-sheet-hosted .am-list {
width: 100% !important;
max-width: 100% !important;
}
/* —— Market board: fill sticky frame edge-to-edge —— */
html.mission-stack .mh-market-sticky {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 36dvh !important;
max-height: none !important;
height: auto !important;
margin: 0.35rem 0 0 !important;
padding: 0 !important;
border: 1px solid var(--st-border) !important;
border-radius: 16px 16px 0 0 !important;
overflow: hidden !important;
background: var(--st-surface) !important;
}
html.mission-stack .mh-market-sticky-head {
flex: 0 0 auto !important;
padding: 0.55rem 0.75rem !important;
}
html.mission-stack .mh-market-sticky-body {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
min-height: 28dvh !important;
max-height: none !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: var(--st-surface) !important;
}
html.mission-stack .mh-market-sticky-body #market-board,
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky #market-board.mh-sheet-hosted,
html.mission-stack .mh-market-sticky #market-board.board-wrap,
html.mission-stack .mh-market-sticky #market-board.board-wrap-tall,
html.mission-stack .mh-market-sticky .board-wrap,
html.mission-stack .mh-market-sticky .mod-plate-host,
html.mission-stack .mh-market-sticky .board-plate-host {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0.5rem 0.55rem 0.55rem !important;
box-sizing: border-box !important;
aspect-ratio: auto !important;
background: var(--st-surface) !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
overflow: hidden !important;
position: relative !important;
left: auto !important;
inset: auto !important;
}
html.mission-stack .mh-market-sticky .board-chrome,
html.mission-stack .mh-market-sticky .board-body,
html.mission-stack .mh-market-sticky .board-tabs,
html.mission-stack .mh-market-sticky .board-search-row {
width: 100% !important;
max-width: 100% !important;
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
html.mission-stack .mh-market-sticky .board-chrome {
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
flex: 0 0 auto !important;
padding: 0 0 0.35rem !important;
}
html.mission-stack .mh-market-sticky .market-table-scroll,
html.mission-stack .mh-market-sticky .board-table-wrap,
html.mission-stack .mh-market-sticky .board-scroll,
html.mission-stack .mh-market-sticky .board-list {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
min-height: 16rem !important;
max-height: none !important;
height: auto !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
position: static !important;
inset: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
box-sizing: border-box !important;
}
html.mission-stack .mh-market-sticky table.board {
width: 100% !important;
max-width: 100% !important;
table-layout: fixed !important;
}
html.mission-stack .mh-market-sticky .board-tabs {
display: flex !important;
width: 100% !important;
gap: 0.35rem !important;
}
html.mission-stack .mh-market-sticky .board-tab {
flex: 1 1 50% !important;
}
html.mission-stack .mh-market-sticky #market-board-search {
width: 100% !important;
box-sizing: border-box !important;
}
/* Hero: tiles top, market grows into remaining viewport */
html.mission-stack #mission-mobile-hero {
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
flex: 1 1 auto !important;
}
html.mission-stack .mh-grid {
flex: 0 0 auto !important;
}
}
/* v7b — market table full bleed; sticky sized to remaining viewport */
@media (max-width: 1100px) {
html.mission-stack #mission-mobile-hero {
overflow-y: auto !important;
}
/* Sticky: take remaining home space but cap so page doesn't explode */
html.mission-stack .mh-market-sticky {
flex: 1 1 auto !important;
min-height: min(42dvh, 360px) !important;
max-height: min(52dvh, 440px) !important;
height: min(48dvh, 400px) !important;
}
html.mission-stack .mh-market-sticky-body {
min-height: 0 !important;
max-height: none !important;
height: 100% !important;
flex: 1 1 auto !important;
}
/* Kill ALL plate insets on market children */
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky #market-board * {
--mb-inset-t: 0% !important;
--mb-inset-r: 0% !important;
--mb-inset-b: 0% !important;
--mb-inset-l: 0% !important;
}
html.mission-stack .mh-market-sticky #market-board .market-table-scroll,
html.mission-stack .mh-market-sticky #market-board .board-table-wrap,
html.mission-stack .mh-market-sticky #market-board .board-scroll,
html.mission-stack .mh-market-sticky #market-board .board-list,
html.mission-stack .mh-market-sticky #market-board .board-body,
html.mission-stack .mh-market-sticky #market-board .board-chrome,
html.mission-stack .mh-market-sticky #market-board table.board {
position: static !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: auto !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
box-sizing: border-box !important;
}
html.mission-stack .mh-market-sticky #market-board .market-table-scroll {
flex: 1 1 auto !important;
min-height: 12rem !important;
max-height: none !important;
height: 100% !important;
}
/* Sheet: force full readable content height */
html.mission-stack .mh-dock-body .mh-sheet-hosted,
html.mission-stack .mh-dock-body .mh-sheet-hosted > * {
max-height: none !important;
overflow: visible !important;
}
}
/* v7c — kill plate-host padding that shrinks market board */
@media (max-width: 1100px) {
html.mission-stack .mh-market-sticky .mod-plate-host,
html.mission-stack .mh-market-sticky .board-plate-host,
html.mission-stack .mh-market-sticky #market-board .mod-plate-host,
html.mission-stack .mh-market-sticky #market-board .board-plate-host {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
background: transparent !important;
background-image: none !important;
aspect-ratio: auto !important;
}
html.mission-stack .mh-market-sticky .board-chrome {
width: 100% !important;
max-width: 100% !important;
padding: 0 0 0.4rem 0 !important;
}
html.mission-stack .mh-market-sticky .market-table-scroll,
html.mission-stack .mh-market-sticky .board-table-wrap {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 auto !important;
}
/* Also kill plate-host padding inside dock sheets (truncation) */
html.mission-stack .mh-sheet-hosted .mod-plate-host,
html.mission-stack .mh-sheet-hosted .board-plate-host,
html.mission-stack .mh-sheet-hosted .auto-plate-host,
html.mission-stack .mh-sheet-hosted .arena-matchup-plate {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
}
@media (max-width: 1100px) {
/* Edge-to-edge market content inside sticky body */
html.mission-stack .mh-market-sticky #market-board,
html.mission-stack .mh-market-sticky #market-board.mh-sheet-hosted {
padding: 0.4rem 0.5rem 0.45rem !important;
}
html.mission-stack .mh-market-sticky .board-chrome {
padding-top: 0 !important;
}
html.mission-stack .mh-market-sticky .market-table-scroll {
border-radius: 10px !important;
}
}
/* ==========================================================================
STERILE v8 — market frame collapse · usable topbar (icons + clock + menu)
========================================================================== */
@media (max-width: 1100px) {
/* —— TOPBAR: safe layout, icons visible, clock restored —— */
html.mission-stack .portal-topbar {
padding-left: max(0.45rem, env(safe-area-inset-left, 0px)) !important;
padding-right: max(0.45rem, env(safe-area-inset-right, 0px)) !important;
box-sizing: border-box !important;
width: 100% !important;
max-width: 100vw !important;
overflow: visible !important;
}
html.mission-stack .portal-topbar-inner {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
gap: 0.25rem !important;
width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
padding: 0.2rem 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* Hide logo on phone — space for clock */
html.mission-stack .portal-topbar-center,
html.mission-stack .portal-logo-center,
html.mission-stack .portal-logo-img {
display: none !important;
}
/* Secondary destinations only in overflow menu */
html.mission-stack .portal-whats-new-btn,
html.mission-stack .portal-metrics-btn,
html.mission-stack .portal-subscription-btn,
html.mission-stack .portal-admin-btn,
html.mission-stack #btn-portal-whats-new,
html.mission-stack #btn-portal-metrics,
html.mission-stack #btn-portal-subscription,
html.mission-stack #btn-portal-admin,
html.mission-stack #btn-live-capital,
html.mission-stack #btn-portal-logout {
display: none !important;
}
/* Left cluster: Mission + Messages + User */
html.mission-stack .portal-topbar-left {
grid-column: 1 !important;
justify-self: start !important;
display: flex !important;
align-items: center !important;
min-width: 0 !important;
}
html.mission-stack .portal-nav {
display: flex !important;
align-items: center !important;
gap: 0.28rem !important;
}
/* Move end thumbs we need into right; clock is center */
html.mission-stack .portal-actions {
display: contents !important;
}
html.mission-stack .portal-topbar-end {
display: contents !important;
}
/* Clock center */
html.mission-stack .mission-clock-only,
html.mission-stack #mission-clock-only,
html.mission-stack .portal-topbar-clock {
display: flex !important;
grid-column: 2 !important;
justify-self: center !important;
align-items: center !important;
max-width: none !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
}
html.mission-stack .mission-clock-only-plate {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
padding: 0.15rem 0.45rem !important;
min-width: 4.5rem !important;
background: var(--st-surface) !important;
background-image: none !important;
border: 1px solid var(--st-border) !important;
border-radius: 12px !important;
box-shadow: none !important;
}
html.mission-stack .mission-clock-face-row {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
}
html.mission-stack .mission-clock-face,
html.mission-stack .mission-clock-face--time,
html.mission-stack .mission-clock-face--date {
display: block !important;
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
width: auto !important;
}
html.mission-stack .mission-clock-time {
display: block !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
line-height: 1.15 !important;
color: var(--st-text) !important;
white-space: nowrap !important;
margin: 0 !important;
font-variant-numeric: tabular-nums !important;
}
html.mission-stack .mission-clock-date {
display: block !important;
font-size: 0.58rem !important;
font-weight: 600 !important;
line-height: 1.15 !important;
color: var(--st-muted) !important;
white-space: nowrap !important;
margin: 0 !important;
max-width: 7rem !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Right cluster via absolute order of children with grid placement */
html.mission-stack .portal-msg-btn { grid-column: 1; }
/* Place messages+user with left nav via order on flex-like grid using absolute?
Better: restructure left nav visually by pulling messages/user left with order */
/* Right side buttons: theme + burger only */
html.mission-stack .portal-burger,
html.mission-stack #btn-nav-burger {
grid-column: 3 !important;
justify-self: end !important;
order: 99 !important;
margin-left: 0 !important;
margin-right: 0 !important;
position: relative !important;
z-index: 5 !important;
}
html.mission-stack .theme-toggle,
html.mission-stack .theme-toggle--plate {
grid-column: 3 !important;
justify-self: end !important;
margin-right: 2.85rem !important; /* sit left of burger */
}
/* margins reset in v8d */
/* Simpler approach override: flex topbar instead of grid fights */
html.mission-stack .portal-topbar-inner {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: center !important;
gap: 0.3rem !important;
}
html.mission-stack .portal-topbar-left {
display: flex !important;
flex: 0 0 auto !important;
order: 1 !important;
}
html.mission-stack .portal-actions {
display: flex !important;
flex: 1 1 auto !important;
order: 2 !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.28rem !important;
min-width: 0 !important;
margin: 0 !important;
}
html.mission-stack .portal-topbar-end {
display: flex !important;
align-items: center !important;
gap: 0.28rem !important;
flex: 0 0 auto !important;
order: 1 !important;
}
/* DOM order in portal-actions: live(hidden), burger, end(msg,user,theme,clock,logout)
Desired visual: [msg user] [clock] [theme burger]
Use flex order on children */
html.mission-stack .portal-actions > .portal-burger {
order: 40 !important;
flex: 0 0 42px !important;
}
html.mission-stack .portal-topbar-end {
order: 10 !important;
flex: 1 1 auto !important;
justify-content: flex-end !important;
min-width: 0 !important;
}
html.mission-stack .portal-msg-btn { order: 1 !important; }
html.mission-stack .portal-user-btn { order: 2 !important; }
html.mission-stack .theme-toggle { order: 30 !important; }
html.mission-stack .mission-clock-only {
order: 20 !important;
margin: 0 auto !important;
flex: 1 1 auto !important;
justify-content: center !important;
}
/* Icon buttons — visible sterile SVGs */
html.mission-stack .portal-link,
html.mission-stack .portal-end-thumb,
html.mission-stack .portal-burger {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
max-width: 40px !important;
flex: 0 0 40px !important;
border-radius: 12px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
html.mission-stack .portal-topbar img.portal-ico-hud {
display: none !important;
}
html.mission-stack .portal-ico-sterile {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 20px !important;
height: 20px !important;
}
html.mission-stack .portal-ico-sterile img,
html.mission-stack .portal-topbar img[src*="/img/sterile/"] {
display: block !important;
width: 20px !important;
height: 20px !important;
opacity: 1 !important;
visibility: visible !important;
filter: none !important;
}
html.mission-stack .portal-link.is-on {
border-color: rgba(0, 184, 156, 0.45) !important;
background: var(--st-accent-dim) !important;
}
html.mission-stack .portal-link.is-on .portal-ico-sterile img {
filter: invert(58%) sepia(72%) saturate(500%) hue-rotate(125deg) brightness(0.95) !important;
}
/* Burger icon */
html.mission-stack .portal-burger {
font-size: 0 !important;
color: transparent !important;
}
html.mission-stack .portal-burger::before {
content: "" !important;
display: block !important;
width: 18px !important;
height: 18px !important;
background: url("/static/img/sterile/menu.svg?v=3") center / 18px 18px no-repeat !important;
}
/* Kill prior absolute margin hacks if cascade remains */
html.mission-stack .portal-msg-btn,
html.mission-stack .portal-user-btn,
html.mission-stack .theme-toggle {
margin-left: 0 !important;
margin-right: 0 !important;
justify-self: auto !important;
grid-column: auto !important;
}
/* —— MARKET: collapse frame + contents —— */
html.mission-stack .mh-market-sticky.is-collapsed {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
}
html.mission-stack .mh-market-sticky.is-collapsed .mh-market-sticky-body,
html.mission-stack .mh-market-sticky.is-collapsed #mh-market-sticky-body {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
html.mission-stack .mh-market-sticky.is-collapsed #market-board,
html.mission-stack .mh-market-sticky.is-collapsed .board-wrap {
display: none !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
html.mission-stack .mh-market-sticky.is-collapsed .mh-market-sticky-head {
border-bottom: none !important;
}
/* Expanded market still fills frame */
html.mission-stack .mh-market-sticky:not(.is-collapsed) {
min-height: min(36dvh, 300px) !important;
max-height: min(52dvh, 440px) !important;
height: min(48dvh, 400px) !important;
}
}
/* v8b — hard collapse + topbar flex order fix */
@media (max-width: 1100px) {
html.mission-stack .mh-market-sticky.is-collapsed,
html.mission-stack body.mh-market-collapsed .mh-market-sticky {
height: auto !important;
min-height: 0 !important;
max-height: 56px !important;
flex: 0 0 auto !important;
}
html.mission-stack .mh-market-sticky.is-collapsed .mh-market-sticky-body,
html.mission-stack .mh-market-sticky.is-collapsed #mh-market-sticky-body,
html.mission-stack body.mh-market-collapsed .mh-market-sticky-body {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
padding: 0 !important;
flex: 0 0 0 !important;
}
html.mission-stack .mh-market-sticky.is-collapsed #market-board,
html.mission-stack body.mh-market-collapsed #market-board {
display: none !important;
height: 0 !important;
max-height: 0 !important;
visibility: hidden !important;
}
/* Topbar: Mission | Messages User | Clock | Theme Menu — all on one line, in bounds */
html.mission-stack .portal-topbar {
padding-left: max(0.5rem, env(safe-area-inset-left)) !important;
padding-right: max(0.5rem, env(safe-area-inset-right)) !important;
}
html.mission-stack .portal-topbar-inner {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.25rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
html.mission-stack .portal-topbar-left {
flex: 0 0 auto !important;
order: 1 !important;
}
html.mission-stack .portal-actions {
display: flex !important;
flex: 1 1 auto !important;
order: 2 !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.25rem !important;
min-width: 0 !important;
}
/* Reorder: end cluster (msg,user,theme,clock) then burger */
html.mission-stack .portal-actions > #btn-nav-burger {
order: 50 !important;
}
html.mission-stack .portal-actions > .portal-topbar-end {
display: flex !important;
order: 10 !important;
flex: 1 1 auto !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.25rem !important;
min-width: 0 !important;
}
html.mission-stack #btn-portal-messages { order: 1 !important; }
html.mission-stack #btn-portal-user { order: 2 !important; }
html.mission-stack #mission-clock-only {
order: 3 !important;
flex: 1 1 auto !important;
display: flex !important;
justify-content: center !important;
min-width: 4.2rem !important;
max-width: 7.5rem !important;
}
html.mission-stack .theme-toggle { order: 4 !important; }
html.mission-stack #btn-portal-logout { display: none !important; }
html.mission-stack .portal-link,
html.mission-stack .portal-end-thumb,
html.mission-stack .portal-burger {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
max-width: 38px !important;
flex: 0 0 38px !important;
}
}
/* v8c — guaranteed visible topbar icons via CSS mask */
@media (max-width: 1100px) {
html.mission-stack .portal-ico-sterile {
display: block !important;
width: 20px !important;
height: 20px !important;
background-color: #e8ecf0 !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: 20px 20px !important;
mask-size: 20px 20px !important;
}
html.mission-stack .portal-ico-sterile img {
display: none !important; /* use mask paint instead */
}
html.mission-stack .portal-mission-btn .portal-ico-sterile {
-webkit-mask-image: url("/static/img/sterile/mission.svg?v=3") !important;
mask-image: url("/static/img/sterile/mission.svg?v=3") !important;
}
html.mission-stack .portal-msg-btn .portal-ico-sterile,
html.mission-stack #btn-portal-messages .portal-ico-sterile {
-webkit-mask-image: url("/static/img/sterile/messages.svg?v=3") !important;
mask-image: url("/static/img/sterile/messages.svg?v=3") !important;
}
html.mission-stack .portal-user-btn .portal-ico-sterile,
html.mission-stack #btn-portal-user .portal-ico-sterile {
-webkit-mask-image: url("/static/img/sterile/user.svg?v=3") !important;
mask-image: url("/static/img/sterile/user.svg?v=3") !important;
}
html.mission-stack .theme-toggle .portal-ico-sterile {
-webkit-mask-image: url("/static/img/sterile/theme.svg?v=3") !important;
mask-image: url("/static/img/sterile/theme.svg?v=3") !important;
}
html.mission-stack .portal-link.is-on .portal-ico-sterile {
background-color: #00b89c !important;
}
/* Tighter topbar packing — no huge gap between icons */
html.mission-stack .portal-actions > .portal-topbar-end {
flex: 0 1 auto !important;
justify-content: flex-end !important;
gap: 0.28rem !important;
}
html.mission-stack #mission-clock-only {
flex: 0 0 auto !important;
max-width: 6.5rem !important;
margin: 0 0.15rem !important;
}
html.mission-stack .portal-actions {
gap: 0.28rem !important;
}
/* spacer pushes right cluster (clock+theme+burger) right; left keeps mission+msg+user tight */
html.mission-stack #btn-portal-messages { order: 1 !important; }
html.mission-stack #btn-portal-user { order: 2 !important; }
html.mission-stack #mission-clock-only {
order: 3 !important;
margin-left: auto !important;
}
html.mission-stack .theme-toggle { order: 4 !important; }
}
/* v8d — zero leftover topbar margins */
@media (max-width: 1100px) {
html.mission-stack .portal-msg-btn,
html.mission-stack #btn-portal-messages,
html.mission-stack .portal-user-btn,
html.mission-stack #btn-portal-user,
html.mission-stack .theme-toggle,
html.mission-stack .portal-end-thumb,
html.mission-stack .portal-link,
html.mission-stack .portal-burger {
margin: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
html.mission-stack #mission-clock-only {
margin-left: auto !important;
margin-right: 0 !important;
}
html.mission-stack .portal-topbar-end {
gap: 0.3rem !important;
}
}
/* v8e — paint icons as button backgrounds (reliable) */
@media (max-width: 1100px) {
html.mission-stack .portal-mission-btn,
html.mission-stack #btn-portal-messages,
html.mission-stack #btn-portal-user,
html.mission-stack .theme-toggle.portal-end-thumb,
html.mission-stack .portal-burger {
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
html.mission-stack .portal-mission-btn {
background-image: url("/static/img/sterile/mission.svg?v=4") !important;
}
html.mission-stack .portal-mission-btn.is-on {
background-image: url("/static/img/sterile/mission.svg?v=4") !important;
border-color: rgba(0, 184, 156, 0.5) !important;
}
html.mission-stack #btn-portal-messages {
background-image: url("/static/img/sterile/messages.svg?v=4") !important;
}
html.mission-stack #btn-portal-user {
background-image: url("/static/img/sterile/user.svg?v=4") !important;
}
html.mission-stack .theme-toggle.portal-end-thumb {
background-image: url("/static/img/sterile/theme.svg?v=4") !important;
}
html.mission-stack .portal-burger {
background-image: url("/static/img/sterile/menu.svg?v=4") !important;
}
html.mission-stack .portal-burger::before {
display: none !important;
content: none !important;
}
/* Hide nested icon layers so only button bg shows */
html.mission-stack .portal-mission-btn .portal-ico-sterile,
html.mission-stack .portal-mission-btn .portal-ico-hud,
html.mission-stack #btn-portal-messages .portal-ico-sterile,
html.mission-stack #btn-portal-messages .portal-ico-hud,
html.mission-stack #btn-portal-user .portal-ico-sterile,
html.mission-stack #btn-portal-user .portal-ico-hud,
html.mission-stack .theme-toggle .portal-ico-sterile,
html.mission-stack .theme-toggle .portal-ico-hud {
display: none !important;
}
/* Compact left: Mission Messages User together, then clock+theme+menu */
html.mission-stack .portal-topbar-inner {
display: flex !important;
gap: 0.3rem !important;
}
html.mission-stack .portal-topbar-left { order: 1; flex: 0 0 auto; }
html.mission-stack .portal-actions {
order: 2;
flex: 1 1 auto;
display: flex !important;
justify-content: flex-end !important;
gap: 0.3rem !important;
}
html.mission-stack .portal-actions > .portal-topbar-end {
display: flex !important;
flex: 1 1 auto !important;
justify-content: flex-start !important;
gap: 0.3rem !important;
order: 1 !important;
}
html.mission-stack .portal-actions > .portal-burger { order: 2 !important; }
html.mission-stack #btn-portal-messages { order: 1 !important; }
html.mission-stack #btn-portal-user { order: 2 !important; }
html.mission-stack #mission-clock-only {
order: 3 !important;
margin-left: auto !important;
margin-right: 0 !important;
}
html.mission-stack .theme-toggle { order: 4 !important; }
}
/* ==========================================================================
STERILE v8f — final topbar (definitive)
Layout: [Mission][Msg][User] .... [Clock][Theme][Menu]
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack header.portal-topbar,
html.mission-stack .portal-topbar {
padding-left: max(0.45rem, env(safe-area-inset-left, 0px)) !important;
padding-right: max(0.45rem, env(safe-area-inset-right, 0px)) !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
html.mission-stack .portal-topbar-inner.portal-topbar-mission,
html.mission-stack .portal-topbar-inner {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0.3rem !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
min-height: 48px !important;
padding: 0.15rem 0 !important;
overflow: hidden !important;
}
html.mission-stack .portal-topbar-center,
html.mission-stack .portal-logo-center,
html.mission-stack .portal-logo-img,
html.mission-stack #btn-live-capital,
html.mission-stack .portal-whats-new-btn,
html.mission-stack .portal-metrics-btn,
html.mission-stack .portal-subscription-btn,
html.mission-stack .portal-admin-btn,
html.mission-stack #btn-portal-admin,
html.mission-stack #btn-portal-logout,
html.mission-stack #btn-portal-whats-new,
html.mission-stack #btn-portal-metrics,
html.mission-stack #btn-portal-subscription {
display: none !important;
}
html.mission-stack .portal-topbar-left {
display: flex !important;
flex: 0 0 auto !important;
order: 1 !important;
margin: 0 !important;
}
html.mission-stack .portal-nav {
display: flex !important;
gap: 0.3rem !important;
margin: 0 !important;
}
html.mission-stack .portal-actions {
display: flex !important;
flex: 1 1 auto !important;
order: 2 !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0.3rem !important;
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
html.mission-stack .portal-actions > .portal-burger {
order: 99 !important;
flex: 0 0 40px !important;
margin-left: 0 !important;
}
html.mission-stack .portal-topbar-end,
html.mission-stack #mission-topbar-end {
display: flex !important;
flex: 1 1 auto !important;
order: 1 !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0.3rem !important;
min-width: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
html.mission-stack #btn-portal-messages {
order: 1 !important;
flex: 0 0 40px !important;
margin: 0 !important;
}
html.mission-stack #btn-portal-user {
order: 2 !important;
flex: 0 0 40px !important;
margin: 0 !important;
}
html.mission-stack #mission-clock-only {
order: 3 !important;
display: flex !important;
flex: 1 1 auto !important;
justify-content: center !important;
align-items: center !important;
min-width: 3.8rem !important;
max-width: none !important;
margin: 0 !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
width: auto !important;
}
html.mission-stack .theme-toggle.portal-end-thumb,
html.mission-stack .theme-toggle {
order: 4 !important;
flex: 0 0 40px !important;
margin: 0 !important;
}
/* Button chrome */
html.mission-stack .portal-topbar .portal-link,
html.mission-stack .portal-topbar .portal-end-thumb,
html.mission-stack .portal-topbar .portal-burger {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
max-width: 40px !important;
border-radius: 12px !important;
border: 1px solid #1f2327 !important;
box-shadow: none !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Background: color + icon in one declaration so image is not wiped */
html.mission-stack .portal-topbar .portal-mission-btn {
background: #111317 url("/static/img/sterile/mission.svg?v=4") center / 20px 20px no-repeat !important;
}
html.mission-stack .portal-topbar .portal-mission-btn.is-on {
background: rgba(0, 184, 156, 0.16) url("/static/img/sterile/mission.svg?v=4") center / 20px 20px no-repeat !important;
border-color: rgba(0, 184, 156, 0.45) !important;
}
html.mission-stack .portal-topbar #btn-portal-messages {
background: #111317 url("/static/img/sterile/messages.svg?v=4") center / 20px 20px no-repeat !important;
}
html.mission-stack .portal-topbar #btn-portal-user {
background: #111317 url("/static/img/sterile/user.svg?v=4") center / 20px 20px no-repeat !important;
}
html.mission-stack .portal-topbar .theme-toggle {
background: #111317 url("/static/img/sterile/theme.svg?v=4") center / 20px 20px no-repeat !important;
}
html.mission-stack .portal-topbar .portal-burger {
background: #111317 url("/static/img/sterile/menu.svg?v=4") center / 20px 20px no-repeat !important;
font-size: 0 !important;
color: transparent !important;
}
html.mission-stack .portal-topbar .portal-burger::before,
html.mission-stack .portal-topbar .portal-burger::after {
display: none !important;
content: none !important;
}
html.mission-stack .portal-topbar .portal-ico-hud,
html.mission-stack .portal-topbar .portal-ico-sterile,
html.mission-stack .portal-topbar .portal-end-thumb-img {
display: none !important;
}
/* Clock plate */
html.mission-stack #mission-clock-only .mission-clock-only-plate {
background: #111317 !important;
background-image: none !important;
border: 1px solid #1f2327 !important;
border-radius: 10px !important;
padding: 0.12rem 0.4rem !important;
box-shadow: none !important;
}
html.mission-stack #mission-clock-only .mission-clock-time {
color: #f2f4f7 !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
line-height: 1.15 !important;
margin: 0 !important;
}
html.mission-stack #mission-clock-only .mission-clock-date {
color: #8b939e !important;
font-size: 0.55rem !important;
font-weight: 600 !important;
line-height: 1.15 !important;
margin: 0 !important;
max-width: 5.5rem !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html.mission-stack #mission-clock-only .mission-clock-face {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
}
/* v8g — force left rail shrink so actions fit */
@media (max-width: 1100px) {
html.mission-stack .portal-topbar-left,
html.mission-stack .portal-topbar-inner > .portal-topbar-left {
width: auto !important;
max-width: max-content !important;
min-width: 0 !important;
flex: 0 0 auto !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
}
html.mission-stack .portal-actions,
html.mission-stack .portal-topbar-inner > .portal-actions {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: 1 1 0% !important;
overflow: visible !important;
}
html.mission-stack #mission-topbar-end {
width: auto !important;
min-width: 0 !important;
flex: 1 1 0% !important;
overflow: visible !important;
}
html.mission-stack .portal-topbar {
overflow: visible !important;
}
html.mission-stack .portal-topbar-inner {
overflow: visible !important;
}
/* Force 40px mission button (was 34) */
html.mission-stack .portal-topbar .portal-mission-btn {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
flex: 0 0 40px !important;
}
}
/* v8h — force icon images last (split properties beat shorthand wipes) */
@media (max-width: 1100px) {
html.mission-stack .portal-topbar button.portal-mission-btn {
background-color: #111317 !important;
background-image: url("/static/img/sterile/mission.svg?v=4") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
html.mission-stack .portal-topbar button.portal-mission-btn.is-on {
background-color: rgba(0, 184, 156, 0.16) !important;
background-image: url("/static/img/sterile/mission.svg?v=4") !important;
}
html.mission-stack .portal-topbar button#btn-portal-messages {
background-color: #111317 !important;
background-image: url("/static/img/sterile/messages.svg?v=4") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
html.mission-stack .portal-topbar button#btn-portal-user {
background-color: #111317 !important;
background-image: url("/static/img/sterile/user.svg?v=4") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
html.mission-stack .portal-topbar button.theme-toggle {
background-color: #111317 !important;
background-image: url("/static/img/sterile/theme.svg?v=4") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
html.mission-stack .portal-topbar button.portal-burger,
html.mission-stack .portal-topbar button#btn-nav-burger {
background-color: #111317 !important;
background-image: url("/static/img/sterile/menu.svg?v=4") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
}
/* v8i — beat portal-nav background-image:none on mission btn */
@media (max-width: 1100px) {
html.mission-stack .portal-topbar .portal-nav button.portal-link.portal-mission-btn.portal-link--icon,
html.mission-stack .portal-topbar .portal-nav .portal-mission-btn.is-on {
background-color: #111317 !important;
background-image: url("/static/img/sterile/mission.svg?v=4") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 20px 20px !important;
}
html.mission-stack .portal-topbar .portal-nav button.portal-link.portal-mission-btn.portal-link--icon.is-on {
background-color: rgba(0, 184, 156, 0.16) !important;
background-image: url("/static/img/sterile/mission.svg?v=4") !important;
}
}
/* v8j — Social tile: right of Standings, uniform pill size */
@media (max-width: 1100px) {
html.mission-stack .mh-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.5rem !important;
align-items: stretch !important;
}
html.mission-stack #mh-cell-social,
html.mission-stack .mh-cell--social,
html.mission-stack .mh-pill--social {
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
min-height: 5.6rem !important;
height: auto !important;
}
html.mission-stack #mh-cell-standings,
html.mission-stack .mh-cell--standings {
grid-column: auto !important;
min-height: 5.6rem !important;
}
/* Keep all primary pills the same footprint */
html.mission-stack .mh-grid > .mh-cell,
html.mission-stack .mh-grid > .mh-pill {
min-height: 5.6rem !important;
box-sizing: border-box !important;
}
/* Liqs stays hidden */
html.mission-stack #mh-cell-liq,
html.mission-stack .mh-pill--liq {
display: none !important;
}
}
/* v8k — Social equal tile paint next to Standings */
@media (max-width: 1100px) {
html.mission-stack #mh-cell-social,
html.mission-stack .mh-pill--social,
html.mission-stack button#mh-cell-social {
grid-column: auto !important;
grid-row: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 5.6rem !important;
height: 100% !important;
padding: 0.7rem 0.75rem !important;
border-radius: 16px !important;
border: 1px solid var(--st-border, #1f2327) !important;
background: var(--st-surface, #111317) !important;
background-image: none !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
color: var(--st-text, #f2f4f7) !important;
}
html.mission-stack #mh-cell-social .mh-pill-k,
html.mission-stack #mh-cell-social .mh-cell-lab {
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--st-muted, #8b939e) !important;
}
html.mission-stack #mh-cell-social .mh-pill-sym,
html.mission-stack #mh-cell-social .mh-cell-hero {
font-size: 1.15rem !important;
font-weight: 750 !important;
color: var(--st-text, #f2f4f7) !important;
}
html.mission-stack #mh-cell-social .mh-pill-data,
html.mission-stack #mh-cell-social .mh-cell-foot {
font-size: 0.72rem !important;
color: var(--st-muted, #8b939e) !important;
}
html.mission-stack #mh-cell-standings {
min-height: 5.6rem !important;
height: 100% !important;
}
}
/* ==========================================================================
STERILE HUB v40 — approved Mission Home list (full-width rows)
Matches design: Autopilot · Equity · Standings · Focus · Market · Journal · Social
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack {
--st-bg: #0b0d10;
--st-surface: #12151a;
--st-surface-2: #181c22;
--st-border: #22272e;
--st-text: #f2f4f7;
--st-muted: #8b939e;
--st-accent: #2dd4bf;
--st-accent-dim: rgba(45, 212, 191, 0.14);
}
html.mission-stack body,
html.mission-stack .stage,
html.mission-stack .page.is-active {
background: var(--st-bg) !important;
}
/* Hide desk chrome / old grid tiles look */
html.mission-stack .mission-rail-mid,
html.mission-stack .mission-stage-frame,
html.mission-stack .mission-stage-void:not(:empty),
html.mission-stack .mission-rotate-gate {
display: none !important;
}
html.mission-stack #mission-mobile-hero.mh-hub,
html.mission-stack #mission-mobile-hero {
display: flex !important;
flex-direction: column !important;
gap: 0.65rem !important;
padding: 0.75rem 0.9rem calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
min-height: calc(100dvh - 52px) !important;
background: var(--st-bg) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* —— Header —— */
html.mission-stack .mh-hub-head {
display: flex !important;
flex-direction: column !important;
gap: 0.35rem !important;
margin: 0.15rem 0 0.35rem !important;
}
html.mission-stack .mh-hub-kicker {
margin: 0 !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--st-accent) !important;
}
html.mission-stack .mh-hub-title-row {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 0.6rem !important;
}
html.mission-stack .mh-hub-title {
margin: 0 !important;
font-size: 1.55rem !important;
font-weight: 750 !important;
letter-spacing: -0.02em !important;
color: var(--st-text) !important;
line-height: 1.15 !important;
}
html.mission-stack .mh-hub-badge {
flex: 0 0 auto !important;
margin-top: 0.2rem !important;
padding: 0.28rem 0.5rem !important;
border-radius: 8px !important;
border: 1px solid rgba(45, 212, 191, 0.35) !important;
background: var(--st-accent-dim) !important;
color: var(--st-accent) !important;
font-size: 0.55rem !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
html.mission-stack .mh-hub-sub-row {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 0.75rem !important;
}
html.mission-stack .mh-hub-theme-tag {
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--st-muted) !important;
}
html.mission-stack .mh-hub-note {
margin: 0 !important;
max-width: 11rem !important;
text-align: right !important;
font-size: 0.68rem !important;
line-height: 1.35 !important;
color: var(--st-muted) !important;
}
/* —— List of full-width rows —— */
html.mission-stack .mh-list,
html.mission-stack #mh-grid {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
html.mission-stack .mh-list > .mh-row,
html.mission-stack #mh-grid > .mh-row,
html.mission-stack #mh-grid > .mh-cell {
display: grid !important;
grid-template-columns: 1fr auto auto !important;
align-items: center !important;
gap: 0.55rem !important;
width: 100% !important;
min-height: 4.5rem !important;
margin: 0 !important;
padding: 0.85rem 0.9rem !important;
border-radius: 14px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
background-image: none !important;
box-shadow: none !important;
color: var(--st-text) !important;
text-align: left !important;
cursor: pointer !important;
-webkit-tap-highlight-color: transparent !important;
}
html.mission-stack .mh-row-main {
display: flex !important;
flex-direction: column !important;
gap: 0.22rem !important;
min-width: 0 !important;
}
html.mission-stack .mh-row-title {
font-size: 0.98rem !important;
font-weight: 650 !important;
color: var(--st-text) !important;
line-height: 1.2 !important;
}
html.mission-stack .mh-row-meta {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 0.35rem 0.45rem !important;
min-width: 0 !important;
}
html.mission-stack .mh-row-value {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: var(--st-accent) !important;
font-variant-numeric: tabular-nums !important;
}
html.mission-stack .mh-row-accent {
font-size: 0.82rem !important;
font-weight: 650 !important;
color: var(--st-accent) !important;
}
html.mission-stack .mh-row-delta {
font-size: 0.78rem !important;
font-weight: 600 !important;
color: var(--st-accent) !important;
}
html.mission-stack .mh-row-sub,
html.mission-stack .mh-row-sep {
font-size: 0.74rem !important;
color: var(--st-muted) !important;
line-height: 1.3 !important;
}
html.mission-stack .mh-row-status {
font-size: 0.74rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--st-accent) !important;
}
html.mission-stack .mh-status-dot,
html.mission-stack #mh-auto-light {
width: 0.5rem !important;
height: 0.5rem !important;
border-radius: 999px !important;
background: #ef4444 !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
flex: 0 0 auto !important;
}
html.mission-stack #mh-auto-light[data-tone="green"],
html.mission-stack #mh-auto-light[data-tone="ok"] {
background: #22c55e !important;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}
html.mission-stack #mh-auto-light[data-tone="amber"] {
background: #f59e0b !important;
}
html.mission-stack .mh-row-chips {
display: none !important; /* keep paint hooks; hide dense chips on hub */
}
/* Right visuals */
html.mission-stack .mh-row-viz {
width: 3.4rem !important;
height: 2rem !important;
flex: 0 0 auto !important;
opacity: 0.9 !important;
}
html.mission-stack .mh-row-viz--spark canvas,
html.mission-stack .mh-hb-canvas {
width: 3.4rem !important;
height: 2rem !important;
display: block !important;
}
html.mission-stack .mh-row-viz--bars {
background: linear-gradient(90deg,
transparent 0 6%, var(--st-accent) 6% 12%, transparent 12% 20%,
var(--st-accent) 20% 28%, transparent 28% 36%,
var(--st-accent) 36% 48%, transparent 48% 56%,
var(--st-accent) 56% 62%, transparent 62% 70%,
var(--st-accent) 70% 82%, transparent 82% 88%,
var(--st-accent) 88% 94%, transparent 94% 100%);
opacity: 0.75 !important;
border-radius: 2px !important;
mask-image: linear-gradient(#000, #000) !important;
height: 1.6rem !important;
}
html.mission-stack .mh-row-viz--ring {
width: 1.75rem !important;
height: 1.75rem !important;
border-radius: 999px !important;
border: 3px solid rgba(45, 212, 191, 0.25) !important;
border-top-color: var(--st-accent) !important;
border-right-color: var(--st-accent) !important;
}
html.mission-stack .mh-row-viz--wave {
background: url("data:image/svg+xml;utf8,") center / contain no-repeat !important;
}
html.mission-stack .mh-row-viz--doc {
background: url("data:image/svg+xml;utf8,") center / 1.4rem no-repeat !important;
}
html.mission-stack .mh-row-viz--social {
background: url("data:image/svg+xml;utf8,") center / 1.5rem no-repeat !important;
}
html.mission-stack .mh-row-viz--auto,
html.mission-stack .mh-row-viz--seats {
width: 0.5rem !important;
height: 0.5rem !important;
opacity: 0 !important;
}
html.mission-stack .mh-row-chev {
width: 0.55rem !important;
height: 0.55rem !important;
border-right: 2px solid var(--st-muted) !important;
border-bottom: 2px solid var(--st-muted) !important;
transform: rotate(-45deg) !important;
opacity: 0.7 !important;
margin-right: 0.1rem !important;
}
html.mission-stack .mh-hub-footer-note {
display: flex !important;
align-items: flex-start !important;
gap: 0.45rem !important;
margin: 0.35rem 0.15rem 0.5rem !important;
font-size: 0.74rem !important;
line-height: 1.4 !important;
color: var(--st-muted) !important;
}
html.mission-stack .mh-hub-info {
flex: 0 0 auto !important;
width: 1rem !important;
height: 1rem !important;
border-radius: 999px !important;
border: 1px solid var(--st-border) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
color: var(--st-muted) !important;
}
/* Market sticky only when opened (not on hub) */
html.mission-stack .mh-market-sticky:not(.is-open) {
display: none !important;
}
html.mission-stack .mh-market-sticky.is-open {
display: flex !important;
position: fixed !important;
inset: calc(52px + env(safe-area-inset-top, 0px)) 0 0 0 !important;
z-index: 85 !important;
max-height: none !important;
height: auto !important;
min-height: 0 !important;
border-radius: 0 !important;
background: var(--st-bg) !important;
flex-direction: column !important;
}
/* Bottom tab bar (Mission Metrics · Account) */
html.mission-stack .mh-hub-tabbar {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 70 !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
padding: 0.45rem 0.75rem calc(0.45rem + env(safe-area-inset-bottom, 0px)) !important;
background: rgba(11, 13, 16, 0.94) !important;
border-top: 1px solid var(--st-border) !important;
backdrop-filter: blur(12px) !important;
}
html.mission-stack .mh-hub-tab {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.2rem !important;
min-height: 3rem !important;
border: none !important;
background: transparent !important;
color: var(--st-muted) !important;
font-size: 0.68rem !important;
font-weight: 650 !important;
}
html.mission-stack .mh-hub-tab.is-on {
color: var(--st-accent) !important;
}
html.mission-stack .mh-hub-tab-ico {
width: 1.35rem !important;
height: 1.35rem !important;
opacity: 0.95 !important;
}
/* Topbar closer to approved: wordmark + essential actions */
html.mission-stack .portal-topbar {
background: var(--st-bg) !important;
border-bottom: 1px solid var(--st-border) !important;
}
/* Kill old 2-col grid / tall tiles */
html.mission-stack #mh-grid {
grid-template-columns: none !important;
}
html.mission-stack #mh-cell-social {
grid-column: auto !important;
min-height: 4.5rem !important;
}
}
/* v40b — approved row order */
@media (max-width: 1100px) {
html.mission-stack #mh-cell-auto { order: 1 !important; }
html.mission-stack #mh-cell-hb { order: 2 !important; }
html.mission-stack #mh-cell-standings { order: 3 !important; }
html.mission-stack #mh-cell-focus { order: 4 !important; }
html.mission-stack #mh-cell-market { order: 5 !important; }
html.mission-stack #mh-cell-closed { order: 6 !important; }
html.mission-stack #mh-cell-social { order: 7 !important; }
html.mission-stack #mh-cell-orders { order: 8 !important; display: none !important; } /* seats via Equity/assets */
html.mission-stack #mh-grid {
display: flex !important;
flex-direction: column !important;
}
/* taller rows closer to mock */
html.mission-stack #mh-grid > .mh-row {
min-height: 4.85rem !important;
padding: 0.95rem 1rem !important;
}
}
@media (max-width: 1100px) {
html.mission-stack #mh-cell-orders,
html.mission-stack button#mh-cell-orders {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
overflow: hidden !important;
}
}
@media (max-width: 1100px) {
html.mission-stack #mh-grid.mh-list,
html.mission-stack #mh-grid {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
}
html.mission-stack #mh-cell-orders[hidden] { display: none !important; }
}
/* v51 — Market board: bottom list row + expand beneath (no list overlay) */
@media (max-width: 1100px) {
/* Focus social never on Mission hub (lives inside Focus) */
html.mission-stack #mh-cell-social,
html.mission-stack .mh-pill--social {
display: none !important;
}
html.mission-stack #mh-grid {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
}
/* Market row always last among visible rows */
html.mission-stack #mh-cell-market {
order: 90 !important;
}
html.mission-stack #mh-market-sticky,
html.mission-stack .mh-market-inline {
order: 91 !important;
}
/* Inline bottom panel — not fixed fullscreen overlay */
html.mission-stack #mh-market-sticky,
html.mission-stack .mh-market-inline,
html.mission-stack .mh-market-sticky {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
z-index: 2 !important;
display: none !important;
width: 100% !important;
max-height: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--st-border, #22272e) !important;
border-radius: 14px !important;
background: var(--st-surface, #12151a) !important;
box-shadow: none !important;
overflow: hidden !important;
flex-direction: column !important;
}
html.mission-stack #mh-market-sticky.is-open,
html.mission-stack .mh-market-inline.is-open,
html.mission-stack body.mh-market-open #mh-market-sticky {
display: flex !important;
}
html.mission-stack #mh-market-sticky-body,
html.mission-stack .mh-market-sticky-body {
display: block !important;
max-height: min(46vh, 380px) !important;
min-height: 12rem !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.35rem 0.4rem 0.5rem !important;
}
html.mission-stack #mh-market-sticky .mh-sheet-hosted,
html.mission-stack #mh-market-sticky-body .mh-sheet-hosted,
html.mission-stack #mh-market-sticky-body #market-board {
position: relative !important;
width: 100% !important;
min-height: 12rem !important;
max-height: none !important;
}
/* Market title row: expand affordance */
html.mission-stack #mh-cell-market[aria-expanded="true"] {
border-color: rgba(45, 212, 191, 0.45) !important;
}
html.mission-stack #mh-cell-market[aria-expanded="true"] .mh-row-chev {
transform: rotate(45deg) !important; /* points down-ish */
}
/* Hide old sticky header chrome if present */
html.mission-stack .mh-market-sticky-head {
display: none !important;
}
/* Hub list must remain scrollable; market does not cover it */
html.mission-stack #mission-mobile-hero.mh-hub {
overflow-y: auto !important;
}
/* When market open, keep rows above fully visible (no fixed cover) */
html.mission-stack body.mh-market-open #mh-grid > .mh-row:not(#mh-cell-market) {
opacity: 1 !important;
pointer-events: auto !important;
}
}
/* v51b — hub market closed by default; clean row heights */
@media (max-width: 1100px) {
html.mission-stack #mh-cell-hb,
html.mission-stack #mh-cell-hb.mh-cell--hb-locked {
position: static !important;
top: auto !important;
}
html.mission-stack #mh-cell-standings {
min-height: 4.5rem !important;
height: auto !important;
max-height: none !important;
}
/* Closed market: fully out of flow */
html.mission-stack #mh-market-sticky:not(.is-open) {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
visibility: hidden !important;
}
html.mission-stack #mh-market-sticky.is-open {
display: flex !important;
visibility: visible !important;
height: auto !important;
max-height: none !important;
min-height: 12rem !important;
visibility: visible !important;
}
}
/* v53b — hard row order: Equity under Autopilot; Market last */
@media (max-width: 1100px) {
html.mission-stack #mh-grid {
display: flex !important;
flex-direction: column !important;
}
html.mission-stack #mh-cell-auto { order: 1 !important; }
html.mission-stack #mh-cell-hb { order: 2 !important; position: static !important; }
html.mission-stack #mh-cell-standings { order: 3 !important; }
html.mission-stack #mh-cell-focus { order: 4 !important; }
html.mission-stack #mh-cell-closed { order: 5 !important; }
html.mission-stack #mh-cell-market { order: 90 !important; }
html.mission-stack #mh-market-sticky { order: 91 !important; }
html.mission-stack #mh-cell-orders,
html.mission-stack #mh-cell-social { order: 99 !important; display: none !important; }
}
/* ==========================================================================
v55 — readable topbar clock · full-page modules (no Back popup) · sticky in-page nav
========================================================================== */
@media (max-width: 1100px) {
/* —— CLOCK / DATE: readable, not clipped —— */
html.mission-stack #mission-clock-only,
html.mission-stack .mission-clock-only,
html.mission-stack .portal-topbar-clock {
display: flex !important;
flex: 1 1 auto !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
overflow: visible !important;
margin: 0 0.25rem !important;
order: 3 !important;
}
html.mission-stack #mission-clock-only .mission-clock-only-plate,
html.mission-stack .mission-clock-only-plate {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.1rem !important;
min-width: 7.5rem !important;
max-width: min(52vw, 12rem) !important;
width: auto !important;
height: auto !important;
min-height: 2.55rem !important;
padding: 0.28rem 0.55rem !important;
border-radius: 10px !important;
border: 1px solid var(--st-border, #1f2327) !important;
background: var(--st-surface, #111317) !important;
background-image: none !important;
overflow: visible !important;
}
html.mission-stack #mission-clock-only .mission-clock-only-plate::before,
html.mission-stack .mission-clock-only-plate::before {
display: none !important;
}
html.mission-stack #mission-clock-only .mission-clock-face-row,
html.mission-stack .mission-clock-face-row {
position: static !important;
inset: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.05rem !important;
width: 100% !important;
min-width: 0 !important;
}
html.mission-stack #mission-clock-only .mission-clock-face,
html.mission-stack #mission-clock-only .mission-clock-face--time,
html.mission-stack #mission-clock-only .mission-clock-face--date {
position: static !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
overflow: visible !important;
}
html.mission-stack #ms-clock-time,
html.mission-stack #mission-clock-only .mission-clock-time {
display: block !important;
margin: 0 !important;
font-size: 0.95rem !important;
font-weight: 750 !important;
line-height: 1.15 !important;
letter-spacing: 0.01em !important;
color: var(--st-text, #f2f4f7) !important;
white-space: nowrap !important;
text-align: center !important;
overflow: visible !important;
max-width: none !important;
}
html.mission-stack #ms-clock-date,
html.mission-stack #mission-clock-only .mission-clock-date {
display: block !important;
margin: 0 !important;
font-size: 0.68rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: var(--st-muted, #8b939e) !important;
white-space: nowrap !important;
text-align: center !important;
overflow: visible !important;
text-overflow: clip !important;
max-width: none !important;
}
/* —— FULL PAGE modules (not popup + Back) —— */
html.mission-stack .mh-dock:not([data-empty="1"]),
html.mission-stack .mh-dock.is-open,
html.mission-stack body.mh-sheet-open .mh-dock {
position: fixed !important;
inset: calc(52px + env(safe-area-inset-top, 0px)) 0 0 0 !important;
z-index: 90 !important;
width: 100% !important;
max-width: 100vw !important;
height: auto !important;
min-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px)) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
background: var(--st-bg, #0b0d10) !important;
box-shadow: none !important;
display: flex !important;
flex-direction: column !important;
}
/* Hide popup chrome (title + Back) */
html.mission-stack .mh-dock-head,
html.mission-stack .mh-dock-close,
html.mission-stack .mh-dock-title,
html.mission-stack .mh-dock-empty {
display: none !important;
}
html.mission-stack .mh-dock-active {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
html.mission-stack .mh-dock-body {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0 !important;
margin: 0 !important;
}
html.mission-stack .mh-dock-body .mh-sheet-hosted,
html.mission-stack .mh-dock-body .mission-widget.mh-sheet-hosted,
html.mission-stack .mh-dock-body > * {
width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
border-radius: 0 !important;
margin: 0 !important;
}
/* Bottom hub tabs stay available to return to Mission Metrics */
html.mission-stack body.mh-sheet-open .mh-hub-tabbar {
display: grid !important;
z-index: 95 !important;
}
/* Hide hub list while a module page is open */
html.mission-stack body.mh-sheet-open #mh-grid,
html.mission-stack body.mh-sheet-open .mh-hub-head,
html.mission-stack body.mh-sheet-open .mh-hub-footer-note {
visibility: hidden !important;
pointer-events: none !important;
}
/* —— Sticky in-module nav (Standings AI/Trainers/Users, Focus tabs, etc.) —— */
html.mission-stack .mh-sheet-hosted .am-mode-seg,
html.mission-stack #arena-matchup .am-mode-seg,
html.mission-stack .mh-dock-body .am-mode-seg {
position: sticky !important;
top: 0 !important;
z-index: 40 !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.35rem !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0.55rem 0.6rem !important;
background: rgba(11, 13, 16, 0.96) !important;
border-bottom: 1px solid var(--st-border, #22272e) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
html.mission-stack .mh-sheet-hosted .am-mode,
html.mission-stack #arena-matchup .am-mode {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 2.35rem !important;
padding: 0.4rem 0.5rem !important;
border-radius: 10px !important;
border: 1px solid var(--st-border, #22272e) !important;
background: var(--st-surface, #12151a) !important;
color: var(--st-muted, #8b939e) !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
html.mission-stack .mh-sheet-hosted .am-mode.is-on,
html.mission-stack #arena-matchup .am-mode.is-on {
color: var(--st-accent, #2dd4bf) !important;
border-color: rgba(45, 212, 191, 0.45) !important;
background: rgba(45, 212, 191, 0.12) !important;
}
/* Same pattern for other in-page menus when hosted full-page */
html.mission-stack .mh-sheet-hosted .focus-hub-tabs,
html.mission-stack .mh-sheet-hosted .trades-topnav,
html.mission-stack .mh-sheet-hosted .board-tabs,
html.mission-stack .mh-sheet-hosted [role="tablist"] {
position: sticky !important;
top: 0 !important;
z-index: 40 !important;
background: rgba(11, 13, 16, 0.96) !important;
border-bottom: 1px solid var(--st-border, #22272e) !important;
backdrop-filter: blur(10px) !important;
}
}
/* v56b — full-page module leaves bottom tabbar + topbar mission return */
@media (max-width: 1100px) {
html.mission-stack .mh-dock:not([data-empty="1"]),
html.mission-stack .mh-dock.is-open,
html.mission-stack body.mh-sheet-open .mh-dock {
inset: calc(52px + env(safe-area-inset-top, 0px)) 0 calc(3.65rem + env(safe-area-inset-bottom, 0px)) 0 !important;
z-index: 80 !important;
}
html.mission-stack .mh-hub-tabbar,
html.mission-stack body.mh-sheet-open .mh-hub-tabbar,
html.mission-stack body.mh-fullpage .mh-hub-tabbar {
display: grid !important;
z-index: 120 !important;
pointer-events: auto !important;
}
/* Topbar always above module page so Mission icon returns home */
html.mission-stack #portal-topbar,
html.mission-stack body.mh-sheet-open #portal-topbar {
z-index: 130 !important;
}
}
/* v57c — force clock readable + dock under topbar/tabbar */
@media (max-width: 1100px) {
html.mission-stack #portal-topbar {
height: 56px !important;
min-height: 56px !important;
overflow: visible !important;
z-index: 70 !important;
}
html.mission-stack #portal-topbar .portal-topbar-inner {
height: 56px !important;
min-height: 56px !important;
align-items: center !important;
overflow: visible !important;
}
html.mission-stack #mission-clock-only {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 56px !important;
max-width: none !important;
min-width: 8.5rem !important;
overflow: visible !important;
flex: 1 1 auto !important;
}
html.mission-stack #mission-clock-only .mission-clock-only-plate {
position: relative !important;
top: 0 !important;
left: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.12rem !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
min-width: 8.2rem !important;
max-width: 11rem !important;
padding: 0.25rem 0.6rem !important;
margin: 0 auto !important;
border-radius: 10px !important;
border: 1px solid #1f2327 !important;
background: #111317 !important;
background-image: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
html.mission-stack #mission-clock-only .mission-clock-only-plate::before {
content: none !important;
display: none !important;
}
html.mission-stack #mission-clock-only .mission-clock-face-row {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0.1rem !important;
width: 100% !important;
height: auto !important;
}
html.mission-stack #ms-clock-face-btn,
html.mission-stack #ms-clock-date-btn {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
line-height: 1 !important;
}
html.mission-stack #ms-clock-time {
position: static !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.95rem !important;
font-weight: 750 !important;
line-height: 1.1 !important;
color: #f2f4f7 !important;
white-space: nowrap !important;
text-align: center !important;
max-width: none !important;
overflow: visible !important;
}
html.mission-stack #ms-clock-date {
position: static !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
line-height: 1.1 !important;
color: #8b939e !important;
white-space: nowrap !important;
text-align: center !important;
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Module page under topbar, above tabbar; never cover either */
html.mission-stack body.mh-sheet-open .mh-dock,
html.mission-stack body.mh-fullpage .mh-dock,
html.mission-stack .mh-dock.is-open,
html.mission-stack .mh-dock:not([data-empty="1"]) {
position: fixed !important;
top: calc(52px + env(safe-area-inset-top, 0px)) !important;
left: 0 !important;
right: 0 !important;
bottom: calc(3.7rem + env(safe-area-inset-bottom, 0px)) !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
z-index: 70 !important;
border: none !important;
border-radius: 0 !important;
}
html.mission-stack #mh-hub-tabbar {
z-index: 140 !important;
}
html.mission-stack #portal-topbar {
z-index: 150 !important;
}
}
/* v58 FINAL — dock layering (must be last) */
@media (max-width: 1100px) {
html.mission-stack body.mh-sheet-open #mh-dock,
html.mission-stack body.mh-fullpage #mh-dock,
html.mission-stack #mh-dock.is-open,
html.mission-stack #mh-dock:not([data-empty="1"]) {
z-index: 70 !important;
top: calc(52px + env(safe-area-inset-top, 0px)) !important;
bottom: calc(3.7rem + env(safe-area-inset-bottom, 0px)) !important;
left: 0 !important;
right: 0 !important;
border-radius: 0 !important;
}
html.mission-stack #mh-hub-tabbar { z-index: 140 !important; }
html.mission-stack #portal-topbar { z-index: 150 !important; }
/* clock fonts in px so they never shrink with rem quirks */
html.mission-stack #ms-clock-time { font-size: 15px !important; line-height: 16px !important; }
html.mission-stack #ms-clock-date { font-size: 11px !important; line-height: 12px !important; }
}
/* ==========================================================================
v61 — topbar logo · hub clock · full-page calendar (no popup)
========================================================================== */
@media (max-width: 1100px) {
/* Topbar: logo where clock was */
html.mission-stack #mission-clock-only {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 7rem !important;
max-width: 9.5rem !important;
height: 48px !important;
overflow: visible !important;
}
html.mission-stack #mission-topbar-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 36px !important;
max-width: 9rem !important;
}
html.mission-stack #mission-topbar-logo img {
display: block !important;
height: 28px !important;
width: auto !important;
max-width: 8.5rem !important;
object-fit: contain !important;
}
html.mission-stack #mission-clock-plate,
html.mission-stack #mission-clock-only .mission-clock-only-plate {
display: none !important; /* time/date live in hub, not topbar */
}
html.mission-stack #ms-clock-settings {
position: fixed !important;
/* if opened from elsewhere, still full-ish */
}
/* Hub header: clean + live clock */
html.mission-stack .mh-hub-head {
display: flex !important;
flex-direction: column !important;
gap: 0.35rem !important;
padding: 0.55rem 0.15rem 0.35rem !important;
}
html.mission-stack .mh-hub-kicker,
html.mission-stack .mh-hub-badge,
html.mission-stack .mh-hub-theme-tag,
html.mission-stack .mh-hub-note {
display: none !important;
}
html.mission-stack .mh-hub-title-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.65rem !important;
}
html.mission-stack .mh-hub-title {
margin: 0 !important;
font-size: 1.15rem !important;
font-weight: 750 !important;
letter-spacing: -0.02em !important;
color: var(--st-text, #f2f4f7) !important;
}
html.mission-stack .mh-hub-clock {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 0.05rem !important;
padding: 0.35rem 0.55rem !important;
border-radius: 10px !important;
border: 1px solid var(--st-border, #22272e) !important;
background: var(--st-surface, #12151a) !important;
color: inherit !important;
cursor: pointer !important;
min-width: 5.5rem !important;
}
html.mission-stack .mh-hub-clock-time {
font-size: 0.95rem !important;
font-weight: 750 !important;
line-height: 1.1 !important;
color: var(--st-text, #f2f4f7) !important;
white-space: nowrap !important;
}
html.mission-stack .mh-hub-clock-date {
font-size: 0.7rem !important;
font-weight: 600 !important;
color: var(--st-muted, #8b939e) !important;
white-space: nowrap !important;
}
html.mission-stack .mh-hub-status {
margin: 0 !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
color: var(--st-muted, #8b939e) !important;
}
/* Calendar = full page (not popup) */
html.mission-stack body.mh-cal-open #mission-cal-portal,
html.mission-stack #mission-cal-portal:not([hidden]) {
position: fixed !important;
inset: calc(52px + env(safe-area-inset-top, 0px)) 0 calc(3.7rem + env(safe-area-inset-bottom, 0px)) 0 !important;
z-index: 100 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100vw !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: var(--st-bg, #0b0d10) !important;
border: none !important;
border-radius: 0 !important;
}
html.mission-stack #mission-cal-portal[hidden] {
display: none !important;
}
html.mission-stack #ms-cal-portal-backdrop {
display: none !important;
}
html.mission-stack #mission-cal-portal .mission-cal-portal-plate,
html.mission-stack #mission-cal-portal .mission-cal-portal-void {
position: relative !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent !important;
background-image: none !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
html.mission-stack #mission-cal-portal .cal-portal-toolbar {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.75rem !important;
padding: 0.7rem 0.85rem !important;
border-bottom: 1px solid var(--st-border, #22272e) !important;
background: var(--st-surface, #12151a) !important;
}
html.mission-stack #mission-cal-portal .cal-portal-kicker {
margin: 0 !important;
font-size: 1rem !important;
font-weight: 750 !important;
color: var(--st-text) !important;
}
html.mission-stack #mission-cal-portal .cal-portal-sub {
margin: 0.15rem 0 0 !important;
font-size: 0.72rem !important;
color: var(--st-muted) !important;
}
html.mission-stack #mission-cal-portal .cal-portal-body {
flex: 1 1 auto !important;
min-height: 0 !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.65rem 0.75rem 1.25rem !important;
}
html.mission-stack #mission-cal-portal .mission-mini-cal-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
margin-bottom: 0.45rem !important;
}
html.mission-stack #mission-cal-portal .mission-mini-cal-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 0.25rem !important;
}
html.mission-stack #mission-cal-portal .mission-mini-cal-day {
min-height: 2.35rem !important;
border-radius: 8px !important;
border: 1px solid var(--st-border) !important;
background: var(--st-surface) !important;
color: var(--st-text) !important;
}
html.mission-stack .mission-cal-key-block,
html.mission-stack .mission-cal-day-panel,
html.mission-stack .mission-cal-upcoming,
html.mission-stack .mission-cal-scheduler {
margin-top: 0.85rem !important;
padding: 0.7rem 0.75rem !important;
border: 1px solid var(--st-border, #22272e) !important;
border-radius: 12px !important;
background: var(--st-surface, #12151a) !important;
}
html.mission-stack .mission-cal-key-title {
margin: 0 0 0.45rem !important;
font-size: 0.78rem !important;
font-weight: 750 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: var(--st-muted) !important;
}
html.mission-stack #ms-cal-legend,
html.mission-stack .mission-cal-legend {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.4rem 0.65rem !important;
}
html.mission-stack .mission-cal-legend-item {
display: inline-flex !important;
align-items: center !important;
gap: 0.3rem !important;
font-size: 0.72rem !important;
color: var(--st-text) !important;
}
html.mission-stack .mission-cal-legend-dot {
width: 0.55rem !important;
height: 0.55rem !important;
border-radius: 999px !important;
display: inline-block !important;
}
html.mission-stack .mission-cal-day-list,
html.mission-stack .mission-cal-upcoming-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
}
html.mission-stack .mission-cal-day-item {
display: flex !important;
align-items: flex-start !important;
gap: 0.45rem !important;
font-size: 0.8rem !important;
}
html.mission-stack .mission-cal-day-item-dot {
width: 0.5rem !important;
height: 0.5rem !important;
border-radius: 999px !important;
margin-top: 0.35rem !important;
flex: 0 0 auto !important;
}
html.mission-stack .mission-cal-day-item-kind {
display: block !important;
font-size: 0.65rem !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: var(--st-muted) !important;
}
html.mission-stack .mission-cal-day-item-label {
display: block !important;
color: var(--st-text) !important;
}
html.mission-stack .mission-cal-sched-form {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
}
html.mission-stack .mission-cal-sched-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.45rem !important;
}
html.mission-stack .mission-cal-field {
display: flex !important;
flex-direction: column !important;
gap: 0.2rem !important;
font-size: 0.72rem !important;
color: var(--st-muted) !important;
}
html.mission-stack .mission-cal-field input,
html.mission-stack .mission-cal-field select,
html.mission-stack .mission-cal-field textarea {
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
background: #0b0d10 !important;
color: var(--st-text) !important;
padding: 0.5rem 0.55rem !important;
font-size: 0.85rem !important;
}
html.mission-stack .mission-cal-sched-msg {
margin: 0 !important;
font-size: 0.75rem !important;
color: var(--st-accent, #2dd4bf) !important;
}
html.mission-stack .mission-cal-sched-msg.is-err {
color: #f87171 !important;
}
/* Hide hub under calendar page */
html.mission-stack body.mh-cal-open #mission-mobile-hero {
visibility: hidden !important;
pointer-events: none !important;
}
html.mission-stack body.mh-cal-open #mh-hub-tabbar {
display: grid !important;
z-index: 140 !important;
}
}
/* v61b — topbar only logo (hide residual clock plate fully) */
@media (max-width: 1100px) {
html.mission-stack #mission-clock-only .mission-clock-only-plate,
html.mission-stack #mission-clock-plate,
html.mission-stack #ms-clock-face-btn,
html.mission-stack #ms-clock-date-btn,
html.mission-stack #ms-clock-time,
html.mission-stack #ms-clock-date {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important;
}
html.mission-stack #mission-topbar-logo {
display: flex !important;
visibility: visible !important;
width: auto !important;
height: 36px !important;
position: relative !important;
pointer-events: auto !important;
}
}
/* v62b — readable NavStak mark on dark topbar */
@media (max-width: 1100px) {
html.mission-stack #mission-topbar-logo img {
filter: brightness(0) invert(1) !important;
opacity: 0.95 !important;
height: 26px !important;
}
}
/* v63 — calendar must cover dock; hide dock while calendar open */
@media (max-width: 1100px) {
html.mission-stack body.mh-cal-open #mh-dock,
html.mission-stack body.mh-cal-open .mh-dock {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
z-index: 0 !important;
}
html.mission-stack body.mh-cal-open #mission-cal-portal {
z-index: 160 !important;
background: #0b0d10 !important;
}
html.mission-stack body.mh-cal-open #mission-mobile-hero {
visibility: hidden !important;
pointer-events: none !important;
}
}
/* v65 final row order */
@media (max-width: 1100px) {
html.mission-stack #mh-grid { display:flex !important; flex-direction:column !important; }
html.mission-stack #mh-cell-auto { order: 1 !important; }
html.mission-stack #mh-cell-hb { order: 2 !important; position: static !important; }
html.mission-stack #mh-cell-standings { order: 3 !important; }
html.mission-stack #mh-cell-focus { order: 4 !important; }
html.mission-stack #mh-cell-closed { order: 5 !important; }
html.mission-stack #mh-cell-market { order: 90 !important; }
html.mission-stack #mh-market-sticky { order: 91 !important; }
}
/* ==========================================================================
v67 — clean topbar wordmark · split clock / calendar lines · long date + TZ
========================================================================== */
@media (max-width: 1100px) {
/* Logo: wordmark readable on dark; hide dark PNG blob */
html.mission-stack #mission-topbar-logo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.35rem !important;
height: 40px !important;
max-width: 10rem !important;
padding: 0 0.25rem !important;
text-decoration: none !important;
}
html.mission-stack #mission-topbar-logo .mission-topbar-logo-img {
display: none !important; /* dark asset unreadable on sterile bar */
}
html.mission-stack #mission-topbar-logo .mission-topbar-wordmark {
display: inline-block !important;
font-size: 1.05rem !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
color: #f2f4f7 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* Hub datetime: two separate lines */
html.mission-stack .mh-hub-head {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.45rem !important;
padding: 0.55rem 0.1rem 0.4rem !important;
}
html.mission-stack .mh-hub-title {
margin: 0 !important;
font-size: 1.2rem !important;
font-weight: 750 !important;
color: var(--st-text, #f2f4f7) !important;
}
html.mission-stack .mh-hub-datetime {
display: flex !important;
flex-direction: column !important;
gap: 0.35rem !important;
width: 100% !important;
}
html.mission-stack .mh-hub-clock-line,
html.mission-stack .mh-hub-date-line {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.5rem !important;
width: 100% !important;
margin: 0 !important;
padding: 0.55rem 0.7rem !important;
border-radius: 12px !important;
border: 1px solid var(--st-border, #22272e) !important;
background: var(--st-surface, #12151a) !important;
color: inherit !important;
text-align: left !important;
cursor: pointer !important;
min-height: 2.6rem !important;
}
html.mission-stack .mh-hub-clock-line {
flex-wrap: wrap !important;
}
html.mission-stack .mh-hub-clock-time {
font-size: 1.05rem !important;
font-weight: 750 !important;
color: var(--st-text, #f2f4f7) !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
html.mission-stack .mh-hub-clock-tz {
font-size: 0.72rem !important;
font-weight: 650 !important;
color: var(--st-muted, #8b939e) !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
max-width: 55% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html.mission-stack .mh-hub-date-line {
justify-content: flex-start !important;
}
html.mission-stack .mh-hub-clock-date {
font-size: 0.88rem !important;
font-weight: 650 !important;
color: var(--st-text, #e8eaed) !important;
line-height: 1.25 !important;
white-space: normal !important;
text-align: left !important;
}
html.mission-stack .mh-hub-status {
margin: 0 !important;
font-size: 0.72rem !important;
color: var(--st-muted) !important;
}
/* Clock settings panel: usable full sheet when opened from hub */
html.mission-stack body.mh-clock-settings-open #ms-clock-settings,
html.mission-stack #ms-clock-settings:not([hidden]) {
position: fixed !important;
left: 0.75rem !important;
right: 0.75rem !important;
top: calc(60px + env(safe-area-inset-top, 0px)) !important;
z-index: 200 !important;
display: block !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0.85rem 0.9rem !important;
border-radius: 14px !important;
border: 1px solid var(--st-border, #22272e) !important;
background: #12151a !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important;
}
html.mission-stack #ms-clock-settings[hidden] {
display: none !important;
}
}
/* v67b — settings panel on body · clearer wordmark */
@media (max-width: 1100px) {
html.mission-stack #mission-topbar-logo {
max-width: 11rem !important;
}
html.mission-stack #mission-topbar-logo .mission-topbar-wordmark {
font-size: 1.12rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
html.mission-stack body.mh-clock-settings-open #ms-clock-settings,
html.mission-stack #ms-clock-settings.mission-clock-settings:not([hidden]) {
position: fixed !important;
left: 0.65rem !important;
right: 0.65rem !important;
top: calc(64px + env(safe-area-inset-top, 0px)) !important;
z-index: 300 !important;
display: block !important;
width: auto !important;
max-height: min(70vh, 28rem) !important;
overflow: auto !important;
border-radius: 14px !important;
border: 1px solid #2a3038 !important;
background: #12151a !important;
color: #f2f4f7 !important;
box-shadow: 0 18px 48px rgba(0,0,0,0.6) !important;
}
}
/* v69 — hub: title + clock only (no date line, no paper-ready) */
@media (max-width: 1100px) {
html.mission-stack .mh-hub-date-line,
html.mission-stack #mh-hub-date-btn,
html.mission-stack #mh-hub-clock-date,
html.mission-stack .mh-hub-status,
html.mission-stack #mh-hub-status {
display: none !important;
}
html.mission-stack .mh-hub-datetime {
gap: 0 !important;
}
}
/* v70 — hub title only; no clock / date / status in head */
@media (max-width: 1100px) {
html.mission-stack .mh-hub-datetime,
html.mission-stack .mh-hub-clock-line,
html.mission-stack .mh-hub-date-line,
html.mission-stack #mh-hub-time-btn,
html.mission-stack #mh-hub-date-btn,
html.mission-stack #mh-hub-clock-time,
html.mission-stack #mh-hub-clock-tz,
html.mission-stack #mh-hub-clock-date,
html.mission-stack .mh-hub-status,
html.mission-stack #mh-hub-status {
display: none !important;
}
html.mission-stack .mh-hub-head {
padding: 0.45rem 0.1rem 0.25rem !important;
}
}
/* ==========================================================================
v71 — Mission hub: no page scroll · market fills remaining · assets scroll
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack,
html.mission-stack body {
height: 100% !important;
max-height: 100dvh !important;
overflow: hidden !important;
overscroll-behavior: none !important;
}
/* Main app shell under topbar */
html.mission-stack #app.shell,
html.mission-stack .shell.mission-desk-mode,
html.mission-stack body.has-portal-topbar #app {
height: 100% !important;
max-height: 100dvh !important;
overflow: hidden !important;
}
/* Mission page / stage: no outer scroll when hub home */
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .page[data-page="mission"],
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) #mission-rail-mid,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .mission-stage-shell {
height: 100% !important;
max-height: 100% !important;
overflow: hidden !important;
}
/* Hero fills space between topbar and tab bar */
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) #mission-mobile-hero.mh-hub,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) #mission-mobile-hero {
position: fixed !important;
top: calc(52px + env(safe-area-inset-top, 0px)) !important;
left: 0 !important;
right: 0 !important;
bottom: calc(3.7rem + env(safe-area-inset-bottom, 0px)) !important;
width: 100% !important;
max-width: 100vw !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0.4rem 0.65rem 0.35rem !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
z-index: 20 !important;
}
html.mission-stack .mh-hub-head {
flex: 0 0 auto !important;
margin: 0 0 0.25rem !important;
padding: 0.15rem 0.05rem 0.2rem !important;
}
/* Module list + market: fill remaining height */
html.mission-stack body:not(.mh-sheet-open) #mh-grid {
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* Rows stay compact; do not scroll the list */
html.mission-stack body:not(.mh-sheet-open) #mh-grid > .mh-row {
flex: 0 0 auto !important;
overflow: hidden !important;
}
/* Market panel: claim ALL remaining space under the rows */
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky,
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky.is-open,
html.mission-stack body:not(.mh-sheet-open).mh-market-open #mh-market-sticky {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--st-border, #22272e) !important;
border-radius: 12px !important;
background: var(--st-surface, #12151a) !important;
overflow: hidden !important;
order: 95 !important;
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
}
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky-body,
html.mission-stack body:not(.mh-sheet-open) .mh-market-sticky-body {
flex: 1 1 auto !important;
min-height: 0 !important;
max-height: none !important;
height: 100% !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
-webkit-overflow-scrolling: touch !important;
}
/* Hosted market-board fills panel */
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky #market-board,
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky .mission-widget[data-widget="market-board"] {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
max-height: 100% !important;
margin: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
overflow: hidden !important;
}
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky .board-plate-host,
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky .mod-plate-host {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky .board-chrome {
flex: 0 0 auto !important;
}
/* ONLY the asset table scrolls */
html.mission-stack body:not(.mh-sheet-open) #market-table-scroll,
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky .market-table-scroll {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
touch-action: pan-y !important;
}
/* Hide empty placeholder when board is hosted */
html.mission-stack body.mh-market-open #mh-market-sticky-empty {
display: none !important;
}
/* Market row is just a compact label above the board panel */
html.mission-stack #mh-cell-market {
order: 94 !important;
}
/* Dock hidden when empty so it doesn't steal flex space */
html.mission-stack body:not(.mh-sheet-open) #mh-dock[data-empty="1"] {
display: none !important;
}
}
/* v72b — hub-only viewport: hide desktop rails/stage so page cannot scroll under */
@media (max-width: 1100px) {
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) aside.left,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .left,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .right,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) aside.right,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .center > .chrome,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .mission-stage-head,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .mission-stage-shell > :not(#mission-mobile-hero):not(.mh-hub) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Keep only hub hero as the mission surface */
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .center,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .stage,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .page[data-page="mission"],
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) #mission-rail-mid,
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) .mission-stage-shell {
display: block !important;
position: relative !important;
height: 100% !important;
max-height: 100dvh !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure hosted widgets that remain in rails don't expand page height */
html.mission-stack body:not(.mh-sheet-open) .mission-widget:not(.mh-sheet-hosted) {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky .mission-widget.mh-sheet-hosted,
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky #market-board {
position: relative !important;
left: auto !important;
width: 100% !important;
height: 100% !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Tab bar clearance for market bottom */
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) #mission-mobile-hero {
bottom: calc(3.85rem + env(safe-area-inset-bottom, 0px)) !important;
}
/* Market fills remaining: stronger flex */
html.mission-stack body:not(.mh-sheet-open) #mh-grid {
flex: 1 1 auto !important;
min-height: 0 !important;
}
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky {
flex: 1 1 0 !important;
min-height: 10rem !important;
}
}
/* v73 final — contain market paint; tab bar clearance; row order */
@media (max-width: 1100px) {
html.mission-stack body:not(.mh-sheet-open):not(.mh-cal-open) #mission-mobile-hero {
top: calc(52px + env(safe-area-inset-top, 0px)) !important;
bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px)) !important;
height: auto !important;
max-height: none !important;
overflow: hidden !important;
background: #0b0d10 !important;
z-index: 40 !important;
}
html.mission-stack #portal-topbar {
z-index: 120 !important;
}
html.mission-stack #mh-hub-tabbar {
z-index: 130 !important;
}
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky,
html.mission-stack body:not(.mh-sheet-open) #mh-market-sticky-body,
html.mission-stack body:not(.mh-sheet-open) #market-board,
html.mission-stack body:not(.mh-sheet-open) #market-table-scroll {
contain: layout paint size !important;
overflow: hidden !important;
}
html.mission-stack body:not(.mh-sheet-open) #market-table-scroll {
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* rows compact */
html.mission-stack body:not(.mh-sheet-open) #mh-grid > .mh-row {
flex: 0 0 auto !important;
max-height: 3.5rem !important;
}
html.mission-stack #mh-grid { display:flex !important; flex-direction:column !important; }
html.mission-stack #mh-cell-auto { order: 1 !important; }
html.mission-stack #mh-cell-hb { order: 2 !important; position: static !important; }
html.mission-stack #mh-cell-standings { order: 3 !important; }
html.mission-stack #mh-cell-focus { order: 4 !important; }
html.mission-stack #mh-cell-closed { order: 5 !important; }
html.mission-stack #mh-cell-market { order: 94 !important; }
html.mission-stack #mh-market-sticky { order: 95 !important; }
}
/* ==========================================================================
v80 — Mobile Autopilot sheet: hybrid B command + A setup/seats
========================================================================== */
@media (max-width: 1100px) {
/* Hosted autopilot in dock */
html.mission-stack body.mh-sheet-open #mh-sheet-body #auto-banner.mh-sheet-hosted,
html.mission-stack #mh-dock #auto-banner.mh-sheet-hosted {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0.15rem 0.15rem 0.75rem !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Hide desktop plate chrome */
html.mission-stack #auto-banner.mh-sheet-hosted > .mission-widget-head,
html.mission-stack #auto-banner.mh-sheet-hosted > .auto-widget-head,
html.mission-stack #auto-banner.mh-sheet-hosted > .auto-collapse-bar,
html.mission-stack #auto-banner.mh-sheet-hosted .widget-min-btn,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-frame-sizer,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--body::before,
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host::before,
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host::after,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-status-sep {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-plate-host {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: 100% !important;
gap: 0.55rem !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
overflow: hidden !important;
position: relative !important;
}
/* Kill absolute plate zones */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-stack,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest {
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
transform: none !important;
background-image: none !important;
}
/* —— COMMAND card (Option B energy) —— sticky */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
order: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
flex: 0 0 auto !important;
padding: 0.75rem 0.8rem 0.7rem !important;
border: 1px solid #22272e !important;
border-radius: 12px !important;
background: #12151a !important;
z-index: 3 !important;
}
/* Status lives visually inside command: pull stack status above engage via grid on plate */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-stack.auto-zone--body {
order: 2 !important;
display: contents !important; /* children become plate flex items */
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status {
order: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.35rem !important;
flex: 0 0 auto !important;
padding: 0.75rem 0.8rem 0.55rem !important;
border: 1px solid #22272e !important;
border-radius: 12px 12px 0 0 !important;
border-bottom: none !important;
background: #12151a !important;
margin: 0 !important;
}
/* Merge command: status + tools share one card look */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
border-radius: 0 0 12px 12px !important;
border-top: 1px solid #1a1f26 !important;
margin-top: -0.55rem !important; /* sit flush under status if gap from parent */
padding-top: 0.55rem !important;
}
/* Better: wrap feel — put status order before tools with same card continuous */
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host {
display: flex !important;
flex-direction: column !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--seats-strip::before {
content: attr(data-auto-card);
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b7280;
margin: 0 0 0.45rem;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-identity.auto-status-line {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 0.4rem 0.55rem !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-mode.auto-mode-chip {
flex: 0 0 auto !important;
padding: 0.28rem 0.65rem !important;
border-radius: 999px !important;
border: 1px solid #3a4250 !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-kicker {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
margin-left: auto !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-status {
margin: 0 !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-title,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-decision {
flex: 1 1 100% !important;
margin: 0 !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
color: #d1d5db !important;
line-height: 1.3 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-decision {
font-size: 0.78rem !important;
font-weight: 500 !important;
color: #9ca3af !important;
}
/* Engage full width (B) */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-left,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-right {
width: 100% !important;
display: block !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage {
width: 100% !important;
min-height: 3rem !important;
border-radius: 10px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage.is-disarmed,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage:not(.is-armed) {
background: #2d6a4f !important;
border-color: #2d6a4f !important;
color: #fff !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage.is-armed {
background: transparent !important;
border: 1.5px solid #b91c1c !important;
color: #f87171 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 0.4rem !important;
width: 100% !important;
margin-top: 0.45rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-tool-btn {
min-height: 2.5rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
}
/* —— SETUP card (Option A) —— */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control {
order: 3 !important;
flex: 0 0 auto !important;
padding: 0.75rem 0.8rem 0.8rem !important;
border: 1px solid #22272e !important;
border-radius: 12px !important;
background: #12151a !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-row {
display: flex !important;
flex-direction: column !important;
gap: 0.65rem !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field {
display: grid !important;
grid-template-columns: 6.5rem 1fr !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field-lab,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest-label {
font-size: 0.82rem !important;
font-weight: 600 !important;
color: #9ca3af !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-select,
html.mission-stack #auto-banner.mh-sheet-hosted #style-select,
html.mission-stack #auto-banner.mh-sheet-hosted #agg-select {
width: 100% !important;
min-height: 2.55rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #f3f4f6 !important;
padding: 0.4rem 0.65rem !important;
font-size: 0.88rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.4rem !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-universe-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip {
display: inline-flex !important;
align-items: center !important;
min-height: 2.2rem !important;
padding: 0.3rem 0.7rem !important;
border-radius: 999px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #d1d5db !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip:has(input:checked),
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip.is-on {
background: #2a3340 !important;
border-color: #4b5563 !important;
color: #fff !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip input {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-actions {
width: 100% !important;
margin-top: 0.15rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-apply-settings {
width: 100% !important;
min-height: 2.6rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: transparent !important;
color: #e5e7eb !important;
font-weight: 650 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-apply-settings:not(:disabled) {
border-color: #3b82f6 !important;
color: #93c5fd !important;
}
/* —— HEALTH card (B-style grid) —— */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics {
order: 4 !important;
flex: 0 0 auto !important;
padding: 0.75rem 0.8rem 0.8rem !important;
border: 1px solid #22272e !important;
border-radius: 12px !important;
background: #12151a !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.45rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry > li {
display: flex !important;
flex-direction: column !important;
gap: 0.15rem !important;
padding: 0.55rem 0.6rem !important;
border-radius: 10px !important;
border: 1px solid #1f242c !important;
background: #0b0d10 !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry .k {
font-size: 0.65rem !important;
font-weight: 650 !important;
color: #6b7280 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry .v {
font-size: 0.95rem !important;
font-weight: 750 !important;
color: #f3f4f6 !important;
}
/* —— SEATS strip (Option A) —— */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--seats-strip {
order: 5 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
flex: 0 0 auto !important;
padding: 0.65rem 0.35rem 0.35rem !important;
border: 1px solid #22272e !important;
border-radius: 12px !important;
background: #12151a !important;
margin: 0 0 0.5rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip[hidden] {
display: flex !important; /* show on mobile hosted */
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-card-lab {
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #6b7280 !important;
margin: 0 0.45rem 0.35rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-seats-link {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 2.75rem !important;
padding: 0.55rem 0.65rem !important;
border: none !important;
border-top: 1px solid #1c2128 !important;
background: transparent !important;
color: #e5e7eb !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
text-align: left !important;
border-radius: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-seats-link-meta {
color: #6b7280 !important;
font-weight: 600 !important;
}
/* Scrollable body under sticky command block */
html.mission-stack body.mh-sheet-open #mh-dock-body,
html.mission-stack body.mh-sheet-open #mh-sheet-body {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
}
/* Desktop: keep seats strip hidden */
html.mission-stack:not(.mission-portrait-first) #auto-seats-strip {
display: none !important;
}
}
/* Desktop always hide seats strip */
@media (min-width: 1101px) {
#auto-seats-strip { display: none !important; }
}
/* v80b — Autopilot sheet full-bleed; hide hub/market under sheet */
@media (max-width: 1100px) {
html.mission-stack body.mh-sheet-open #mh-grid,
html.mission-stack body.mh-sheet-open #mh-market-sticky,
html.mission-stack body.mh-sheet-open .mh-hub-head,
html.mission-stack body.mh-sheet-open body.mh-market-open #mh-market-sticky {
display: none !important;
}
html.mission-stack body.mh-sheet-open #mission-mobile-hero {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
html.mission-stack body.mh-sheet-open #mh-dock,
html.mission-stack body.mh-sheet-open #mh-dock.is-open {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
min-height: 0 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: #0b0d10 !important;
overflow: hidden !important;
position: relative !important;
z-index: 50 !important;
}
html.mission-stack body.mh-sheet-open #mh-dock-active,
html.mission-stack body.mh-sheet-open .mh-dock-active {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
width: 100% !important;
overflow: hidden !important;
}
html.mission-stack body.mh-sheet-open .mh-dock-head {
flex: 0 0 auto !important;
width: 100% !important;
}
html.mission-stack body.mh-sheet-open #mh-sheet-body,
html.mission-stack body.mh-sheet-open #mh-dock-body,
html.mission-stack body.mh-sheet-open .mh-dock-body {
display: block !important;
flex: 1 1 auto !important;
min-height: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.35rem 0.55rem 0.85rem !important;
box-sizing: border-box !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host {
width: 100% !important;
max-width: 100% !important;
}
/* Unified COMMAND card: status + engage + tools as one visual unit */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status {
order: 1 !important;
border-radius: 12px 12px 0 0 !important;
border: 1px solid #22272e !important;
border-bottom: none !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
order: 2 !important;
border-radius: 0 0 12px 12px !important;
border: 1px solid #22272e !important;
border-top: 1px solid #1a1f26 !important;
margin: 0 0 0.55rem !important;
padding: 0.55rem 0.8rem 0.75rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control { order: 3 !important; margin-bottom: 0.55rem !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics { order: 4 !important; margin-bottom: 0.55rem !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--seats-strip { order: 5 !important; }
/* head tools should not use display:contents parent issues */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools .auto-head-left,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools .auto-head-right {
width: 100% !important;
}
}
/* v81c — nuclear: when sheet open, only dock content is visible in hero */
@media (max-width: 1100px) {
html.mission-stack body.mh-sheet-open #mh-grid,
html.mission-stack body.mh-sheet-open #mh-grid.mh-list,
html.mission-stack body.mh-sheet-open #mh-market-sticky,
html.mission-stack body.mh-sheet-open #mh-market-sticky.is-open,
html.mission-stack body.mh-sheet-open.mh-market-open #mh-market-sticky,
html.mission-stack body.mh-sheet-open.mh-market-user-open #mh-market-sticky,
html.mission-stack body.mh-sheet-open #mh-market-sticky-body,
html.mission-stack body.mh-sheet-open #market-board,
html.mission-stack body.mh-sheet-open #market-table-scroll,
html.mission-stack body.mh-sheet-open .mh-hub-head {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
}
html.mission-stack body.mh-sheet-open #mh-dock {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
flex: 1 1 auto !important;
width: 100% !important;
}
html.mission-stack body.mh-sheet-open #auto-banner.mh-sheet-hosted,
html.mission-stack body.mh-sheet-open #auto-banner.mh-sheet-hosted * {
max-width: 100% !important;
}
html.mission-stack body.mh-sheet-open #auto-banner.mh-sheet-hosted {
width: 100% !important;
}
/* Prevent any leftover absolute market paint */
html.mission-stack body.mh-sheet-open .market-table-scroll,
html.mission-stack body.mh-sheet-open #rank-board {
display: none !important;
}
html.mission-stack body.mh-sheet-open #auto-banner #auto-telemetry,
html.mission-stack body.mh-sheet-open #auto-banner .auto-nest--metrics {
display: grid !important; /* telemetry is ul grid - reset */
}
html.mission-stack body.mh-sheet-open #auto-banner .auto-nest--metrics {
display: block !important;
}
html.mission-stack body.mh-sheet-open #auto-banner #auto-telemetry {
display: grid !important;
}
}
/* v82d — Autopilot order + Option A setup fields (kill plate control columns) */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host.auto-plate-host {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
}
/* Explicit order: Command(status+tools) → Setup → Health → Seats */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-frame-sizer { order: 0 !important; display: none !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status { order: 10 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools { order: 11 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-stack { order: 12 !important; display: contents !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control { order: 20 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics { order: 30 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--seats-strip,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip { order: 40 !important; }
/* Merge status+tools into one command surface */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status {
border-radius: 12px 12px 0 0 !important;
border: 1px solid #22272e !important;
border-bottom: 0 !important;
padding: 0.7rem 0.8rem 0.45rem !important;
background: #12151a !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
border-radius: 0 0 12px 12px !important;
border: 1px solid #22272e !important;
border-top: 1px solid #1c2128 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0.5rem 0.8rem 0.75rem !important;
background: #12151a !important;
}
/* Setup: destroy plate multi-column option lists */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-row,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--style,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--agg,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe {
position: static !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
transform: none !important;
background-image: none !important;
float: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-row {
display: flex !important;
flex-direction: column !important;
gap: 0.7rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--style,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--agg {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.75rem !important;
min-height: 2.75rem !important;
padding: 0.15rem 0 !important;
border-bottom: 1px solid #1c2128 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field-lab {
flex: 0 0 auto !important;
width: auto !important;
font-size: 0.88rem !important;
color: #9ca3af !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #style-select,
html.mission-stack #auto-banner.mh-sheet-hosted #agg-select,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-select {
flex: 1 1 auto !important;
display: block !important;
appearance: auto !important;
-webkit-appearance: menulist !important;
width: auto !important;
min-width: 9rem !important;
max-width: 60% !important;
min-height: 2.4rem !important;
height: 2.4rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #f3f4f6 !important;
padding: 0 0.55rem !important;
font-size: 0.88rem !important;
}
/* Hide any decorative plate labels that look like STYLE/AGGRESSION columns */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--style::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--agg::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe::before {
content: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
padding-top: 0.25rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-universe-chips {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-universe-chips > li {
display: inline-flex !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-actions {
display: block !important;
width: 100% !important;
position: static !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-apply-settings {
width: 100% !important;
}
/* Status line: mode left, engage state right, phase below */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-identity {
display: grid !important;
grid-template-columns: auto 1fr !important;
grid-template-areas:
"mode kicker"
"title title"
"decision decision" !important;
gap: 0.35rem 0.6rem !important;
align-items: center !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-mode { grid-area: mode !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-kicker { grid-area: kicker !important; justify-self: end !important; margin-left: 0 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted #auto-title { grid-area: title !important; }
html.mission-stack #auto-banner.mh-sheet-hosted #auto-decision { grid-area: decision !important; }
}
/* v83e — force full-width tall engage + tool row */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
min-height: 7rem !important;
height: auto !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-left {
display: block !important;
width: 100% !important;
height: auto !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted button#btn-engage.auto-engage-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 3.1rem !important;
height: 3.1rem !important;
padding: 0.75rem 1rem !important;
font-size: 0.95rem !important;
line-height: 1 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
width: 100% !important;
height: auto !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools .auto-tool-btn {
width: 100% !important;
min-height: 2.55rem !important;
height: 2.55rem !important;
}
/* Hide market completely when any module sheet is open */
html.mission-stack body.mh-sheet-open #mh-market-sticky,
html.mission-stack body.mh-sheet-open #mh-market-sticky * {
display: none !important;
}
}
/* ==========================================================================
v90 — Autopilot correction: layout lock + config + expandable seats
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.mh-sheet-hosted {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
overflow: visible !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted > .mission-widget-head,
html.mission-stack #auto-banner.mh-sheet-hosted > .auto-collapse-bar,
html.mission-stack #auto-banner.mh-sheet-hosted .widget-min-btn,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-frame-sizer {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-plate-host {
display: flex !important;
flex-direction: column !important;
gap: 0.55rem !important;
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
border: none !important;
overflow: visible !important;
}
/* Kill every absolute plate zone */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-stack,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-left,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-right,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-row,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-actions {
position: static !important;
inset: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
float: none !important;
background-image: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-stack {
display: contents !important;
}
/* Card shell helper */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--config,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--seats-strip {
display: flex !important;
flex-direction: column !important;
gap: 0.45rem !important;
box-sizing: border-box !important;
padding: 0.75rem 0.8rem !important;
border: 1px solid #22272e !important;
border-radius: 12px !important;
background: #12151a !important;
margin: 0 !important;
}
/* Order */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status { order: 10 !important; border-radius: 12px 12px 0 0 !important; border-bottom: none !important; padding-bottom: 0.45rem !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools { order: 11 !important; border-radius: 0 0 12px 12px !important; border-top: 1px solid #1c2128 !important; margin-bottom: 0.1rem !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control { order: 20 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--config { order: 25 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics { order: 30 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--seats-strip { order: 40 !important; }
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status::before {
content: "Command";
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control::before {
content: "Setup";
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics::before {
content: "Health";
font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7280;
}
/* Status */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-identity {
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 0.35rem 0.6rem !important;
align-items: center !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-status-sep { display: none !important; }
html.mission-stack #auto-banner.mh-sheet-hosted #auto-mode {
justify-self: stretch !important;
grid-column: 1 / -1 !important;
text-align: center !important;
padding: 0.45rem 0.75rem !important;
border-radius: 999px !important;
border: 1px solid #3a4250 !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-kicker {
grid-column: 1 / -1 !important;
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-status {
margin: 0 !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-title,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-decision {
grid-column: 1 / -1 !important;
margin: 0 !important;
color: #d1d5db !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-decision { color: #9ca3af !important; font-size: 0.8rem !important; }
/* Command tools */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-left,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-right {
display: block !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted button#btn-engage {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 3.1rem !important;
border-radius: 10px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted button#btn-engage.is-armed {
background: transparent !important;
border: 1.5px solid #b91c1c !important;
color: #f87171 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted button#btn-engage:not(.is-armed) {
background: #2d6a4f !important;
border-color: #2d6a4f !important;
color: #fff !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 0.4rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-tool-btn {
position: static !important;
width: 100% !important;
min-height: 2.55rem !important;
height: 2.55rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-size: 0.72rem !important;
font-weight: 650 !important;
box-shadow: none !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-tool-btn--restart {
background: #1a3a2a !important;
border-color: #2d6a4f !important;
color: #86efac !important;
}
/* Setup */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-row {
display: flex !important;
flex-direction: column !important;
gap: 0.65rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--style,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--agg {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 0.75rem !important;
border-bottom: 1px solid #1c2128 !important;
padding: 0.2rem 0 0.55rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field-lab {
color: #9ca3af !important;
font-size: 0.82rem !important;
font-weight: 650 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #style-select,
html.mission-stack #auto-banner.mh-sheet-hosted #agg-select {
flex: 1 1 auto !important;
max-width: 62% !important;
min-height: 2.4rem !important;
border-radius: 999px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #f3f4f6 !important;
appearance: auto !important;
-webkit-appearance: menulist !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe {
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-universe-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-universe-chips > li {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip {
display: inline-flex !important;
align-items: center !important;
min-height: 2.15rem !important;
padding: 0.28rem 0.7rem !important;
border-radius: 999px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #d1d5db !important;
font-size: 0.78rem !important;
font-weight: 650 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip:has(input:checked) {
background: #2a3340 !important;
border-color: #4b5563 !important;
color: #fff !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip input {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-apply-settings {
width: 100% !important;
min-height: 2.6rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: transparent !important;
color: #e5e7eb !important;
}
/* Config accordion */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card[hidden] {
display: flex !important; /* shown when hosted */
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc-head {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
min-height: 2.7rem !important;
padding: 0.35rem 0.15rem !important;
border: none !important;
background: transparent !important;
color: #e5e7eb !important;
text-align: left !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc-title {
font-size: 0.9rem !important;
font-weight: 700 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc-meta {
margin-left: auto !important;
color: #6b7280 !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc-chev {
color: #6b7280 !important;
transition: transform 0.15s ease;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc-head[aria-expanded="true"] .auto-acc-chev {
transform: rotate(90deg);
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc-body {
padding: 0.35rem 0 0.25rem !important;
border-top: 1px solid #1c2128 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-settings-mount {
max-height: min(62vh, 520px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-settings-mount .ap-studio,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-settings-mount .ap-agg-console {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0.25rem 0 !important;
}
/* Health */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry > li {
display: flex !important;
flex-direction: column !important;
gap: 0.15rem !important;
padding: 0.55rem 0.6rem !important;
border-radius: 10px !important;
border: 1px solid #1f242c !important;
background: #0b0d10 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry .k {
font-size: 0.62rem !important;
font-weight: 700 !important;
color: #6b7280 !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry .v {
font-size: 0.95rem !important;
font-weight: 750 !important;
color: #f3f4f6 !important;
}
/* Seats */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip[hidden] {
display: flex !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-card-lab {
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #6b7280 !important;
margin: 0 0 0.15rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc {
border-top: 1px solid #1c2128 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-seats-empty {
margin: 0.35rem 0 !important;
color: #6b7280 !important;
font-size: 0.82rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-open-body .order-card,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-closed-body .order-card {
background: #0b0d10 !important;
border: 1px solid #1f242c !important;
border-radius: 10px !important;
margin: 0.35rem 0 !important;
padding: 0.55rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-full-log {
width: 100% !important;
margin-top: 0.35rem !important;
}
/* Sheet scroll */
html.mission-stack body.mh-sheet-open #mh-sheet-body,
html.mission-stack body.mh-sheet-open #mh-dock-body {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html.mission-stack body.mh-sheet-open #mh-grid,
html.mission-stack body.mh-sheet-open #mh-market-sticky,
html.mission-stack body.mh-sheet-open #mh-market-sticky * {
display: none !important;
}
}
/* Desktop: hide mobile-only config/seats strip in banner */
@media (min-width: 1101px) {
#auto-config-card,
#auto-seats-strip { display: none !important; }
}
/* v90b — force equal Autopilot tool row (kill oval/bubble absolute styles) */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.45rem !important;
width: 100% !important;
position: static !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools .auto-tool-btn,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools .auto-tool-btn--oval,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools .auto-tool-btn--bubble,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools .auto-tool-btn--restart,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools .auto-tool-btn--refresh,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools .auto-tool-btn--gear,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-restart-bot,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-refresh,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-ap-settings {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 2.65rem !important;
min-height: 2.65rem !important;
max-height: none !important;
margin: 0 !important;
padding: 0 0.35rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-size: 0.75rem !important;
font-weight: 650 !important;
line-height: 1.1 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: auto !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-restart-bot {
background: #1a3a2a !important;
border-color: #2d6a4f !important;
color: #86efac !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-ap-settings {
font-size: 1rem !important;
}
}
/* v91c — Universe visible + tool heights equal */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe-chips {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
position: static !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe-chips {
flex-wrap: wrap !important;
min-height: 2.2rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-restart-bot,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-refresh,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-ap-settings {
height: 2.75rem !important;
min-height: 2.75rem !important;
max-height: 2.75rem !important;
line-height: 2.75rem !important;
padding: 0 !important;
}
}
/* ==========================================================================
v100 — Autopilot card shell lock (approved correction)
Solid stacked cards · Setup A · Config in-flow · Seats chrome
========================================================================== */
@media (max-width: 1100px) {
/* ----- Host ----- */
html.mission-stack body.mh-sheet-open #mh-sheet-body,
html.mission-stack body.mh-sheet-open #mh-dock-body {
display: block !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.4rem 0.6rem 1rem !important;
box-sizing: border-box !important;
}
html.mission-stack body.mh-sheet-open #mh-grid,
html.mission-stack body.mh-sheet-open #mh-market-sticky {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
position: relative !important;
z-index: 1 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted > .mission-widget-head,
html.mission-stack #auto-banner.mh-sheet-hosted > .auto-widget-head,
html.mission-stack #auto-banner.mh-sheet-hosted > .auto-collapse-bar,
html.mission-stack #auto-banner.mh-sheet-hosted .widget-min-btn,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-frame-sizer,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-status-sep {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .mod-plate-host,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-plate-host {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.65rem !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
background-image: none !important;
position: relative !important;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
box-shadow: none !important;
}
/* Nuke plate absolute layout */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-stack,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-left,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-right,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-row,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-actions,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-identity {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
inset: auto !important;
transform: none !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
background-image: none !important;
z-index: auto !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-stack.auto-zone--body {
display: contents !important;
}
/* ----- Shared card surface ----- */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
box-sizing: border-box !important;
width: 100% !important;
padding: 0.8rem 0.85rem !important;
border: 1px solid #22272e !important;
border-radius: 12px !important;
background: #12151a !important;
background-image: none !important;
box-shadow: none !important;
position: relative !important;
z-index: 1 !important;
overflow: hidden !important;
opacity: 1 !important;
isolation: isolate !important;
}
/* Command = status + tools as one visual unit (two halves) */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status {
order: 10 !important;
border-radius: 12px 12px 0 0 !important;
border-bottom: none !important;
padding-bottom: 0.4rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
order: 11 !important;
border-radius: 0 0 12px 12px !important;
border-top: 1px solid #1c2128 !important;
margin-top: 0 !important;
padding-top: 0.55rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control {
order: 20 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card {
order: 25 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics {
order: 30 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip {
order: 40 !important;
}
/* Section labels */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--status::before {
content: "Command";
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b7280;
margin: 0 0 0.35rem;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--control::before {
content: "Setup";
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b7280;
margin: 0 0 0.45rem;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--metrics::before {
content: "Health";
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6b7280;
margin: 0 0 0.45rem;
}
/* kill any other ::before from data-auto-card */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card::before,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--config::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-nest--seats-strip::before {
content: none !important;
display: none !important;
}
/* Show mobile-only cards when hosted */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card[hidden],
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip[hidden] {
display: flex !important;
}
/* ----- COMMAND content ----- */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-identity {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.35rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-mode {
width: 100% !important;
text-align: center !important;
padding: 0.45rem 0.75rem !important;
border-radius: 999px !important;
border: 1px solid #3a4250 !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-kicker {
display: flex !important;
align-items: center !important;
gap: 0.4rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-status {
margin: 0 !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-title,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-decision {
margin: 0 !important;
color: #d1d5db !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-decision {
color: #9ca3af !important;
font-size: 0.8rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-zone--head-tools {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-left,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-right {
display: block !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 3.1rem !important;
border-radius: 10px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage.is-armed {
background: transparent !important;
border: 1.5px solid #b91c1c !important;
color: #f87171 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-engage:not(.is-armed) {
background: #2d6a4f !important;
border-color: #2d6a4f !important;
color: #fff !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-head-tools,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-head-tools {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0.45rem !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-restart-bot,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-refresh,
html.mission-stack #auto-banner.mh-sheet-hosted #btn-ap-settings {
position: static !important;
width: 100% !important;
min-width: 0 !important;
height: 2.75rem !important;
min-height: 2.75rem !important;
max-height: 2.75rem !important;
margin: 0 !important;
padding: 0 0.25rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-size: 0.75rem !important;
font-weight: 650 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
aspect-ratio: auto !important;
transform: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-restart-bot {
background: #1a3a2a !important;
border-color: #2d6a4f !important;
color: #86efac !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-ap-settings {
font-size: 1rem !important;
}
/* ----- SETUP (Option A) ----- */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-row {
display: flex !important;
flex-direction: column !important;
gap: 0.7rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--style,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--agg {
display: grid !important;
grid-template-columns: 6.75rem minmax(0, 1fr) !important;
align-items: center !important;
column-gap: 0.65rem !important;
row-gap: 0 !important;
width: 100% !important;
padding: 0.15rem 0 0.55rem !important;
border-bottom: 1px solid #1c2128 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field-lab {
display: block !important;
width: auto !important;
margin: 0 !important;
font-size: 0.82rem !important;
font-weight: 650 !important;
color: #9ca3af !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* hide plate decorative labels that duplicate STYLE etc */
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--style::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-field--agg::before,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe::before {
content: none !important;
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #style-select,
html.mission-stack #auto-banner.mh-sheet-hosted #agg-select {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-height: 2.45rem !important;
height: 2.45rem !important;
border-radius: 999px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #f3f4f6 !important;
padding: 0 0.75rem !important;
font-size: 0.88rem !important;
appearance: auto !important;
-webkit-appearance: menulist !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.4rem !important;
width: 100% !important;
visibility: visible !important;
opacity: 1 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe > .auto-field-lab,
html.mission-stack #auto-banner.mh-sheet-hosted .auto-control-universe > .auto-nest-label {
display: block !important;
font-size: 0.82rem !important;
font-weight: 650 !important;
color: #9ca3af !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe-chips {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: auto !important;
min-height: 2.2rem !important;
visibility: visible !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-universe-chips > li {
display: inline-flex !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip {
display: inline-flex !important;
align-items: center !important;
min-height: 2.15rem !important;
padding: 0.28rem 0.7rem !important;
border-radius: 999px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #d1d5db !important;
font-size: 0.78rem !important;
font-weight: 650 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip:has(input:checked) {
background: #2a3340 !important;
border-color: #4b5563 !important;
color: #fff !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-uni-chip input {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-actions {
display: block !important;
width: 100% !important;
margin-top: 0.15rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #btn-apply-settings {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 2.65rem !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: transparent !important;
color: #e5e7eb !important;
font-weight: 650 !important;
}
/* ----- CONFIG ----- */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card {
gap: 0 !important;
padding: 0.35rem 0.85rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card .auto-acc-head {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
min-height: 2.75rem !important;
padding: 0.25rem 0 !important;
border: none !important;
background: transparent !important;
color: #e5e7eb !important;
text-align: left !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card .auto-acc-title {
font-size: 0.88rem !important;
font-weight: 700 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card .auto-acc-meta {
margin-left: auto !important;
color: #6b7280 !important;
font-size: 0.75rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-card .auto-acc-chev {
color: #6b7280 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-body {
border-top: 1px solid #1c2128 !important;
padding: 0.55rem 0 0.65rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-config-body[hidden],
html.mission-stack #auto-banner.mh-sheet-hosted #auto-open-body[hidden],
html.mission-stack #auto-banner.mh-sheet-hosted #auto-closed-body[hidden] {
display: none !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
visibility: hidden !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-settings-mount {
max-height: min(58vh, 480px) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* ----- HEALTH ----- */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry > li {
display: flex !important;
flex-direction: column !important;
gap: 0.15rem !important;
padding: 0.55rem 0.6rem !important;
border-radius: 10px !important;
border: 1px solid #1f242c !important;
background: #0b0d10 !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry .k {
font-size: 0.62rem !important;
font-weight: 700 !important;
color: #6b7280 !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-telemetry .v {
font-size: 0.95rem !important;
font-weight: 750 !important;
color: #f3f4f6 !important;
}
/* ----- SEATS ----- */
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip .auto-card-lab {
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #6b7280 !important;
margin: 0 0 0.1rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip .auto-acc {
border-top: 1px solid #1c2128 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip .auto-acc-head {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
min-height: 2.75rem !important;
padding: 0.2rem 0 !important;
border: none !important;
background: transparent !important;
color: #e5e7eb !important;
text-align: left !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip .auto-acc-title {
font-size: 0.9rem !important;
font-weight: 700 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip .auto-acc-meta {
margin-left: auto !important;
color: #6b7280 !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-seats-strip .auto-acc-body:not([hidden]) {
display: block !important;
padding: 0.25rem 0 0.5rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-seats-empty {
margin: 0.25rem 0 !important;
color: #6b7280 !important;
font-size: 0.82rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-open-body .order-card,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-closed-body .order-card {
background: #0b0d10 !important;
border: 1px solid #1f242c !important;
border-radius: 10px !important;
margin: 0.4rem 0 !important;
padding: 0.55rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-full-log {
width: 100% !important;
margin: 0.25rem 0 0.35rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-full-log[hidden] {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .auto-acc-head[aria-expanded="true"] .auto-acc-chev {
transform: rotate(90deg);
}
}
@media (min-width: 1101px) {
#auto-config-card,
#auto-seats-strip {
display: none !important;
}
}
/* ==========================================================================
v110 — Clean mobile Autopilot shell (plate chrome off)
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.mh-sheet-hosted {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
overflow: visible !important;
}
/* Hide ALL plate chrome when shell is active */
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on > .mission-widget-head,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on > .auto-widget-head,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on > .auto-collapse-bar,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .auto-frame-sizer,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .widget-min-btn,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .auto-stack,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .auto-zone,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .auto-nest,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on #auto-config-card,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on #auto-seats-strip {
/* nests reparented; hide leftovers still in plate */
}
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .mod-plate-host > :not(#auto-mobile-shell),
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .auto-plate-host > :not(#auto-mobile-shell) {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #auto-mobile-shell,
html.mission-stack #auto-banner.mh-sheet-hosted #auto-mobile-shell[hidden] {
display: flex !important;
flex-direction: column !important;
gap: 0.6rem !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .am-card {
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 0.85rem 0.9rem !important;
border: 1px solid #22272e !important;
border-radius: 14px !important;
background: #12151a !important;
position: relative !important;
overflow: visible !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted .am-kicker {
margin: 0 0 0.15rem !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #6b7280 !important;
}
/* Command */
html.mission-stack #auto-banner.mh-sheet-hosted #am-mode-slot #auto-mode,
html.mission-stack #auto-banner.mh-sheet-hosted #am-mode-slot > * {
display: flex !important;
width: 100% !important;
justify-content: center !important;
align-items: center !important;
min-height: 2.5rem !important;
border-radius: 999px !important;
border: 1px solid #3a4250 !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-status-slot {
display: flex !important;
flex-direction: column !important;
gap: 0.25rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-status-slot .auto-kicker,
html.mission-stack #auto-banner.mh-sheet-hosted #am-status-slot #auto-status {
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
margin: 0 !important;
font-size: 0.8rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-status-slot #auto-title {
display: block !important;
margin: 0 !important;
color: #e5e7eb !important;
font-size: 0.92rem !important;
font-weight: 650 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-status-slot #auto-decision {
display: block !important;
margin: 0 !important;
color: #9ca3af !important;
font-size: 0.8rem !important;
line-height: 1.35 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-engage-slot #btn-engage {
display: flex !important;
width: 100% !important;
min-height: 3.05rem !important;
border-radius: 12px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
align-items: center !important;
justify-content: center !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 0.4rem !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot .auto-tool-btn,
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot #btn-restart-bot,
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot #btn-refresh,
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot #btn-ap-settings {
position: static !important;
width: 100% !important;
height: 2.7rem !important;
min-height: 2.7rem !important;
margin: 0 !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #e5e7eb !important;
transform: none !important;
inset: auto !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot #btn-restart-bot {
background: #1a3a2a !important;
border-color: #2d6a4f !important;
color: #86efac !important;
}
/* Setup rows */
html.mission-stack #auto-banner.mh-sheet-hosted #am-style-slot,
html.mission-stack #auto-banner.mh-sheet-hosted #am-agg-slot {
display: grid !important;
grid-template-columns: 5.75rem minmax(0, 1fr) !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
padding-bottom: 0.55rem !important;
border-bottom: 1px solid #1c2128 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-style-slot .auto-field-lab,
html.mission-stack #auto-banner.mh-sheet-hosted #am-agg-slot .auto-field-lab {
margin: 0 !important;
color: #9ca3af !important;
font-size: 0.85rem !important;
font-weight: 650 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-style-slot select,
html.mission-stack #auto-banner.mh-sheet-hosted #am-agg-slot select {
width: 100% !important;
min-height: 2.5rem !important;
border-radius: 999px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #f3f4f6 !important;
padding: 0 0.8rem !important;
appearance: auto !important;
-webkit-appearance: menulist !important;
}
/* unwrap field wrappers */
html.mission-stack #auto-banner.mh-sheet-hosted #am-style-slot .auto-field,
html.mission-stack #auto-banner.mh-sheet-hosted #am-agg-slot .auto-field {
display: contents !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot {
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot .auto-field-lab,
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot .auto-nest-label {
color: #9ca3af !important;
font-size: 0.85rem !important;
font-weight: 650 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot #auto-universe,
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot .auto-control-universe {
display: flex !important;
flex-direction: column !important;
gap: 0.4rem !important;
width: 100% !important;
position: static !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot #auto-universe-chips {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.35rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
justify-content: flex-start !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot .auto-uni-chip {
display: inline-flex !important;
align-items: center !important;
min-height: 2.15rem !important;
padding: 0.3rem 0.7rem !important;
border-radius: 999px !important;
border: 1px solid #2a313c !important;
background: #0b0d10 !important;
color: #d1d5db !important;
font-size: 0.78rem !important;
font-weight: 650 !important;
white-space: nowrap !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot .auto-uni-chip:has(input:checked) {
background: #2a3340 !important;
border-color: #4b5563 !important;
color: #fff !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-uni-slot .auto-uni-chip input {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-apply-slot,
html.mission-stack #auto-banner.mh-sheet-hosted #am-apply-slot .auto-actions {
display: block !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-apply-slot #btn-apply-settings {
display: flex !important;
width: 100% !important;
min-height: 2.65rem !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
border: 1px solid #2a313c !important;
background: transparent !important;
color: #e5e7eb !important;
font-weight: 650 !important;
}
/* Config slot */
html.mission-stack #auto-banner.mh-sheet-hosted #am-card-config {
padding: 0.35rem 0.9rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-config-slot #auto-config-card {
display: flex !important;
flex-direction: column !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-config-slot .auto-acc-head {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
min-height: 2.75rem !important;
border: none !important;
background: transparent !important;
color: #e5e7eb !important;
padding: 0.2rem 0 !important;
outline: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-config-slot .auto-acc-meta {
margin-left: auto !important;
color: #6b7280 !important;
font-size: 0.75rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-config-slot #auto-config-body[hidden] {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-config-slot #auto-config-body:not([hidden]) {
display: block !important;
border-top: 1px solid #1c2128 !important;
padding-top: 0.55rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-config-slot #auto-settings-mount {
max-height: min(50vh, 400px) !important;
overflow-y: auto !important;
}
/* Health */
html.mission-stack #auto-banner.mh-sheet-hosted #am-health-slot #auto-telemetry {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0.4rem !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-health-slot #auto-telemetry > li {
display: flex !important;
flex-direction: column !important;
gap: 0.15rem !important;
padding: 0.55rem 0.6rem !important;
border-radius: 10px !important;
border: 1px solid #1f242c !important;
background: #0b0d10 !important;
margin: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-health-slot .k {
font-size: 0.62rem !important;
font-weight: 700 !important;
color: #6b7280 !important;
text-transform: uppercase !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-health-slot .v {
font-size: 0.95rem !important;
font-weight: 750 !important;
color: #f3f4f6 !important;
}
/* hide metrics nest kicker duplicate if metrics section has its own */
html.mission-stack #auto-banner.mh-sheet-hosted #am-health-slot .auto-nest--metrics {
display: contents !important;
border: none !important;
padding: 0 !important;
background: transparent !important;
}
/* Seats */
html.mission-stack #auto-banner.mh-sheet-hosted #am-seats-slot #auto-seats-strip {
display: flex !important;
flex-direction: column !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-seats-slot .auto-card-lab {
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #6b7280 !important;
margin: 0 0 0.25rem !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-seats-slot .auto-acc-head {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
width: 100% !important;
min-height: 2.7rem !important;
border: none !important;
background: transparent !important;
color: #e5e7eb !important;
border-top: 1px solid #1c2128 !important;
outline: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-seats-slot .auto-acc-meta {
margin-left: auto !important;
color: #6b7280 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-seats-slot .auto-acc-body[hidden] {
display: none !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-seats-slot .auto-acc-body:not([hidden]) {
display: block !important;
padding: 0.35rem 0 0.5rem !important;
}
html.mission-stack body.mh-sheet-open #mh-sheet-body {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 0.45rem 0.65rem 1rem !important;
}
html.mission-stack body.mh-sheet-open #mh-grid,
html.mission-stack body.mh-sheet-open #mh-market-sticky {
display: none !important;
}
}
@media (min-width: 1101px) {
#auto-mobile-shell { display: none !important; }
}
/* AUTO_SHELL_TOOLS_V112 */
@media (max-width: 1100px) {
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 0.4rem !important;
width: 100% !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot > #btn-restart-bot,
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot > #btn-refresh,
html.mission-stack #auto-banner.mh-sheet-hosted #am-tools-slot > #btn-ap-settings {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 2.75rem !important;
min-height: 2.75rem !important;
aspect-ratio: auto !important;
position: static !important;
margin: 0 !important;
flex: 1 1 0 !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-style-slot select,
html.mission-stack #auto-banner.mh-sheet-hosted #am-agg-slot select,
html.mission-stack #auto-banner.mh-sheet-hosted #am-style-slot #style-select,
html.mission-stack #auto-banner.mh-sheet-hosted #am-agg-slot #agg-select {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: 1 1 auto !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-style-slot .auto-field,
html.mission-stack #auto-banner.mh-sheet-hosted #am-agg-slot .auto-field {
display: contents !important;
}
html.mission-stack #auto-banner.mh-sheet-hosted #am-engage-slot,
html.mission-stack #auto-banner.mh-sheet-hosted #am-engage-slot #btn-engage {
width: 100% !important;
max-width: none !important;
}
/* kill plate-visible metrics outside shell */
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .mod-plate-host > .auto-nest--metrics,
html.mission-stack #auto-banner.mh-sheet-hosted.auto-shell-on .auto-plate-host > .auto-nest--metrics {
display: none !important;
}
}
/* ==========================================================================
MOBILE_WIDTH_FIX_V117 — kill desktop left-dock grid on phone
Desk rules (mission-left-board-expand + 273px rail) out-spec sterile shell.
Result on real devices: page too wide / left-edge letter clipping.
========================================================================== */
@media (max-width: 1100px) {
html.mission-stack,
html.mission-stack body,
html.mission-desk-v2,
html.mission-desk-v2 body {
overflow-x: hidden !important;
max-width: 100% !important;
width: 100% !important;
}
/* Beat: html.mission-desk-v2 body.mission-desk-mode.mission-left-board-expand #app.shell */
html.mission-stack body.mission-desk-mode #app.shell,
html.mission-stack body.mission-desk-mode.mission-left-board-expand #app.shell,
html.mission-stack body.mission-desk-mode.mission-left-board-expand.has-portal-topbar #app.shell,
html.mission-desk-v2.mission-stack body.mission-desk-mode #app.shell,
html.mission-desk-v2.mission-stack body.mission-desk-mode.mission-left-board-expand #app.shell,
html.mission-desk-v2.mission-stack body.mission-desk-mode.mission-left-board-expand.has-portal-topbar .shell#app,
html.mission-desk-v2.mission-stack body.mission-desk-mode.mission-left-board-expand #app.shell,
html.mission-stack #app.shell {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden !important;
box-sizing: border-box !important;
--desk-dock-left: 0px !important;
--left-w: 0px !important;
--right-w: 0px !important;
--desk-dock: 0px !important;
--rail-w: 0px !important;
--mb-frame-w: 0px !important;
}
/* Rails must not reserve space or paint off-screen */
html.mission-stack body.mission-desk-mode #rail-left,
html.mission-stack body.mission-desk-mode #rail-right,
html.mission-stack body.mission-desk-mode #rail-right-social,
html.mission-stack body.mission-desk-mode.mission-left-board-expand #rail-left,
html.mission-stack body.mission-desk-mode.mission-left-board-expand .rail-left,
html.mission-desk-v2.mission-stack body.mission-desk-mode.mission-left-board-expand #rail-left,
html.mission-desk-v2.mission-stack body.mission-desk-mode.mission-left-board-expand .rail-left,
html.mission-stack #rail-left,
html.mission-stack #rail-right,
html.mission-stack #rail-right-social,
html.mission-stack .rail-left,
html.mission-stack .rail-right {
display: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
overflow: hidden !important;
position: absolute !important;
left: -9999px !important;
pointer-events: none !important;
}
/* Center / stage full width */
html.mission-stack body.mission-desk-mode #app.shell > .center,
html.mission-stack body.mission-desk-mode #app.shell > .stage,
html.mission-stack body.mission-desk-mode .center,
html.mission-stack body.mission-desk-mode .stage,
html.mission-stack .center,
html.mission-stack .stage,
html.mission-stack .page[data-page="mission"],
html.mission-stack .mission-mobile-hero {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: max(0.65rem, env(safe-area-inset-left, 0px)) !important;
padding-right: max(0.65rem, env(safe-area-inset-right, 0px)) !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
position: relative !important;
left: auto !important;
right: auto !important;
transform: none !important;
grid-column: auto !important;
}
/* Home cells / titles never bleed past viewport */
html.mission-stack .mh-grid,
html.mission-stack .mh-cell,
html.mission-stack .mh-market-sticky,
html.mission-stack .mission-mobile-hero,
html.mission-stack .mh-home-title,
html.mission-stack .portal-topbar {
max-width: 100% !important;
box-sizing: border-box !important;
}
html.mission-stack .mh-cell,
html.mission-stack .mh-home-title,
html.mission-stack .mh-cell-title,
html.mission-stack .mh-cell-hero {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 100vw is a known iOS horizontal overflow source — use 100% */
html.mission-stack .mh-dock:not([data-empty="1"]),
html.mission-stack .mh-dock-body,
html.mission-stack .mh-market-sticky,
html.mission-stack .mh-market-sticky-body,
html.mission-stack #mh-sheet,
html.mission-stack #mh-sheet-body {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
right: 0 !important;
box-sizing: border-box !important;
}
/* Market board table must scroll inside, not widen page */
html.mission-stack .board-wrap,
html.mission-stack #market-board,
html.mission-stack .board-table,
html.mission-stack .mh-market-sticky-body {
max-width: 100% !important;
overflow-x: auto !important;
}
html.mission-stack .board-table {
width: 100% !important;
}
}