/* =====================================================================
   STF MISSION CONTROL — shell styles (ported from the original helmet),
   scoped under .stf-mc so they never leak into the rest of the hub.
   ===================================================================== */
/* full-bleed host that fills the hub content area and scales its stage */
.stf-mc-host {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: radial-gradient(circle at 50% 26%, #0d100f 0%, #070908 62%, #050606 100%);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* the hub content area becomes the positioning context + fixed frame for MC */
.tb-content.is-mission { overflow: hidden; }

/* ---------------------------------------------------------------------
   SIDEBAR AS OVERLAY (Mission Control only)
   On every other page the sidebar lives in the grid and the main column
   reflows around it. In Mission Control the canvas is full-bleed, so the
   side menu must float OVER it as a drawer instead of squeezing it. We pin
   the grid to a zero first track (main stays full width) and lift the
   sidebar out of flow as a fixed, slide-in drawer — independent of the
   compact-density / viewport breakpoints. Loaded last, so these win.
   --------------------------------------------------------------------- */
.tb-app.is-mission,
.tb-app.is-mission.is-collapsed { grid-template-columns: 0 1fr; }
/* Snap to full-width instantly when entering Mission Control — never animate the
   grid column from 244px→0, which would reflow the canvas as the menu collapses.
   The sidebar's own slide-out is a transform (out of flow), so it still animates. */
.tb-app.is-mission { transition: none; }

.tb-app.is-mission .tb-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: 244px; z-index: 120;
  transform: translateX(-110%);
  transition: transform var(--dur-base) var(--ease-glide);
  box-shadow: var(--shadow-lg);
  opacity: 1; pointer-events: none;
  padding-left: 18px; padding-right: 14px; border-right-color: var(--border-1);
}
.tb-app.is-mission .tb-side.is-open { transform: none; pointer-events: auto; }

.tb-app.is-mission .tb-scrim {
  display: block; position: fixed; inset: 0; z-index: 110;
  background: rgba(8, 8, 8, 0.42); backdrop-filter: blur(2px);
}
.stf-mc, .stf-mc * { box-sizing: border-box; }
.stf-mc { -webkit-user-select: none; user-select: none; }
.stf-mc [data-rail], .stf-mc [data-rail-view] { min-width: 0; }
.stf-mc [data-rail-view] { scrollbar-width: none; -ms-overflow-style: none; }
.stf-mc [data-rail-view]::-webkit-scrollbar { display: none; }
.stf-mc [data-stef-scroll]::-webkit-scrollbar { width: 14px; }
.stf-mc [data-stef-scroll]::-webkit-scrollbar-track { background: transparent; }
.stf-mc [data-stef-scroll]::-webkit-scrollbar-thumb { background: #26302f; border-radius: 999px; border: 4px solid transparent; background-clip: padding-box; }
.stf-mc [data-stef-scroll]::-webkit-scrollbar-thumb:hover { background: #3a4a48; border: 4px solid transparent; background-clip: padding-box; }
.stf-mc [data-team-scroll]::-webkit-scrollbar { height: 6px; }
.stf-mc [data-team-scroll]::-webkit-scrollbar-thumb { background: #26302f; border-radius: 999px; }
.stf-mc [data-team-scroll]::-webkit-scrollbar-track { background: transparent; }
.stf-mc [data-task-label] { word-break: break-word; white-space: normal; }

/* range inputs (zoom) */
.stf-mc input[type=range] { -webkit-appearance: none; appearance: none; height: 3px; border-radius: 999px; background: #2a3a39; outline: none; }
.stf-mc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 999px; background: #62D2D8; cursor: pointer; box-shadow: 0 0 8px rgba(98,210,216,.6); }
.stf-mc input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 999px; background: #62D2D8; cursor: pointer; }

/* animations */
@keyframes stf-ring { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .95; transform: scale(1.12); } }
@keyframes stf-dash { to { stroke-dashoffset: -32; } }
@keyframes stf-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes stf-feed { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .stf-mc * { animation: none !important; } }

/* Perf: drop backdrop-blur on the always-on panels (each frosted panel is a
   continuous compositing cost). Blur is kept only on fixed overlays — modals,
   tooltips, toasts — which are transient. */
.stf-mc [style*="backdrop-filter"]:not([style*="position: fixed"]) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* rail scrollbar restyle (ported helmet overrides) */
.stf-mc [data-rail-bar] { height: 10px !important; margin-top: 5px !important; background: linear-gradient(to bottom, transparent 30%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.05) 70%, transparent 70%) !important; }
.stf-mc [data-rail-thumb] { top: 0 !important; bottom: 0 !important; padding: 3px 0 !important; background-clip: content-box !important; box-sizing: border-box !important; }
.stf-mc [data-team-grip] { transition: background .15s, height .15s; }
.stf-mc [data-team-handle]:hover [data-team-grip] { background: #56807d; height: 4px; }

/* hover affordances (replacing the DC style-hover attributes) */
.stf-mc [data-mgmt-panel]:hover [data-mgmt-add] { opacity: 1 !important; }
.stf-mc [data-lm-col]:hover [data-lm-add] { opacity: 1 !important; }
.stf-mc [data-tool-wrap]:hover [data-tip] { opacity: 1 !important; pointer-events: auto !important; }
.stf-mc [data-drop-member]:hover { background: rgba(98,210,216,.03); }
.stf-mc [data-lm-task]:hover { border-color: #34423f !important; background: rgba(255,255,255,.045) !important; }
.stf-mc [data-eye-btn]:hover { filter: brightness(1.12); }
.stf-mc [data-hb]:hover { background: rgba(255,255,255,.14) !important; }
.stf-mc [data-hb-danger]:hover { background: rgba(203,90,77,.16) !important; }
.stf-mc [data-session-empty]:hover { border-color: #2e3533 !important; background: rgba(255,255,255,.025) !important; }
.stf-mc-session-date,
.stf-mc-session-date .tb-datepicker,
.stf-mc-session-date .tb-datepicker-btn {
  width: 100%;
  box-sizing: border-box;
}

.stf-mc-session-date .tb-datepicker-btn {
  justify-content: flex-start;
  min-height: 31px;
  border-color: #2e3533;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 11px;
}

.stf-mc-session-date .tb-datepicker-btn .chev {
  margin-left: auto;
}