._brand_lcc39_1 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font);
  font-size: var(--font-size-base);
  font-weight: var(--weight-semibold);
  color: var(--text-h);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
}

._brand_lcc39_1:hover {
  color: var(--text-accent);
}

._brandMark_lcc39_17 {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--text-accent);
  flex-shrink: 0;
}
._card_1ozme_1 {
  display: flex;
  align-items: center;
  padding: var(--space-md);
  min-height: calc(36px + 2rem);
  box-sizing: border-box;
}

._content_1ozme_9 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-width: 0;
  padding: var(--space-2xs);
  margin: -0.25rem;/* deliberate display literal */
  border-radius: var(--radius-default);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  animation: _cardEnter_1ozme_1 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

._content_1ozme_9:hover {
  background: var(--surface-accent-tint);
}

._content_1ozme_9:focus-visible {
  outline: var(--border-emphasis) solid var(--text-accent);
  outline-offset: var(--border-emphasis);
}

._details_1ozme_34 {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

._name_1ozme_40 {
  font-size: var(--font-size-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._role_1ozme_49 {
  font-size: var(--font-size-xs);
  color: var(--text-accent);
}

@keyframes _cardEnter_1ozme_1 {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._content_1ozme_9 {
    animation: none;
  }
}
._brandRow_1bhq2_1 {
  display: flex;
  align-items: center;
  min-height: var(--header-height-app);
  padding: 0 var(--space-md);
}

._nav_1bhq2_8 {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) var(--space-xs);
}

._section_1bhq2_14 {
  margin-top: var(--space-lg);
}

._section_1bhq2_14:first-of-type {
  margin-top: 0;
}

._sectionLabel_1bhq2_22 {
  font-family: var(--font);
  font-size: var(--font-size-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-disabled);
  margin: 0 0 var(--space-xs) var(--space-sm);
}

._footer_1bhq2_32 {
  margin-top: auto;
  padding-top: var(--space-xs);
  border-top: var(--border-hairline) solid var(--section-border-faint);
}

._list_1bhq2_38 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

._link_1bhq2_47 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-default);
  font-family: var(--font);
  font-size: var(--font-size-base);
  font-weight: var(--weight-medium);
  color: rgb(from var(--text-h) r g b / 0.85);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

._link_1bhq2_47 span {
  cursor: inherit;
}

._link_1bhq2_47:hover {
  background: rgb(from var(--text-h) r g b / 0.06);
  color: var(--text-h);
}

._link_1bhq2_47:focus-visible {
  outline: var(--border-emphasis) solid var(--text-accent);
  outline-offset: var(--border-emphasis);
}

._linkActive_1bhq2_76 {
  background: var(--surface-accent-tint);
  color: var(--text-h);
  font-weight: var(--weight-semibold);
}

._linkActive_1bhq2_76:hover {
  background: rgb(from var(--text-accent) r g b / 0.16);
}

._icon_1bhq2_86 {
  width: 1rem;
  color: var(--text-accent);
  flex-shrink: 0;
}

._linkActive_1bhq2_76 ._icon_1bhq2_86 {
  color: var(--text-accent);
}

._label_1bhq2_96 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Trailing affordance — used on the Settings row when the user is on a
 * /settings/* route but the default sidebar is showing. Sits flush
 * right, muted, slightly smaller than the leading icon so it reads as
 * an indicator rather than a second nav target. */
._trailingIcon_1bhq2_107 {
  width: 0.7rem;
  margin-left: auto;
  color: rgb(from var(--text-h) r g b / 0.45);
  flex-shrink: 0;
}

._link_1bhq2_47:hover ._trailingIcon_1bhq2_107,
._linkActive_1bhq2_76 ._trailingIcon_1bhq2_107 {
  color: var(--text-accent);
}
._sidebar_1xxhv_1 {
  grid-area: sidebar;
  background: var(--surface-elevated);
  border-right: var(--border-hairline) solid var(--section-border-faint);
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Below z-header (20); above default content. */
  z-index: 10;
  display: flex;
  flex-direction: column;
}

._backdrop_1xxhv_17 {
  display: none;
}

/* Drawer treatment — applied either via the .sidebarDrawer / .backdropDrawer
 * classes (route-driven, e.g. /mission-map) or via the small-viewport media
 * query below (responsive-driven). Keeps the same visual contract in both
 * cases: fixed slide-in panel, dimmed backdrop, no box-shadow. */
._sidebarDrawer_1xxhv_21 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(var(--left-sidebar-width), 88vw);
  transform: translateX(-100%);
  transition: transform 220ms ease-out;
  z-index: var(--z-drawer);
  /* Let the drawer's own vertical scroll happen natively; horizontal
   * drags are handled by the drag-to-close pointer handlers. */
  touch-action: pan-y;
}

/* Specificity bump (`.sidebar.sidebarDrawerOpen`) — the responsive
 * `@media (max-width: 1279.98px)` block below redefines `.sidebar` with
 * `transform: translateX(-100%)`. With a single-class selector here, the
 * later media-query rule wins and the drawer stays offscreen on
 * drawer-mode routes (e.g. /mission-map, /matches) at ≤1279.98px. */
._sidebar_1xxhv_1._sidebarDrawerOpen_1xxhv_39 {
  transform: translateX(0);
}

._backdropDrawer_1xxhv_21 {
  display: block;
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
  z-index: var(--z-drawer-backdrop);
}

/* Specificity bump — see `.sidebar.sidebarDrawerOpen` above. */
._backdrop_1xxhv_17._backdropDrawerOpen_1xxhv_60 {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1279.98px) /* BP_TABLET */ {
  ._sidebar_1xxhv_1 {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(var(--left-sidebar-width), 88vw);
    transform: translateX(-100%);
    transition: transform 220ms ease-out;
    z-index: var(--z-drawer);
    /* See .sidebarDrawer — native vertical scroll, horizontal = drag. */
    touch-action: pan-y;
  }

  ._sidebarOpen_1xxhv_79 {
    transform: translateX(0);
  }

  ._backdrop_1xxhv_17 {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease-out;
    z-index: var(--z-drawer-backdrop);
  }

  ._backdropOpen_1xxhv_94 {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  ._sidebar_1xxhv_1,
  ._sidebarDrawer_1xxhv_21,
  ._backdrop_1xxhv_17,
  ._backdropDrawer_1xxhv_21 {
    transition: none;
  }
}
._layer_1mov0_1 {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
}

._layer_1mov0_1[data-modal='true'] {
  pointer-events: auto;
}

._backdrop_1mov0_12 {
  position: absolute;
  inset: 0;
  /* Use --modal-backdrop — properly themed for both light + dark. */
  background: var(--modal-backdrop);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  /* Exit easing: slightly faster, ease-in so it fades out decisively. */
  transition: opacity 320ms cubic-bezier(0.4, 0, 1, 1);
  z-index: var(--z-drawer-backdrop);
}

._layerOpen_1mov0_25 ._backdrop_1mov0_12 {
  opacity: 1;
  /* Enter easing: a touch longer than exit, with a soft ease-out arrival. */
  transition: opacity 440ms cubic-bezier(0.22, 1, 0.36, 1);
}

._panel_1mov0_31 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(clamp(420px, 36vw, 720px), 92vw);
  background: var(--section-bg);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  /* Exit easing: accelerate away so close feels decisive, not sluggish.
     380ms is paired with EXIT_DURATION_MS in RightPanel.tsx. */
  transition: transform 380ms cubic-bezier(0.55, 0, 1, 0.45);
  pointer-events: auto;
  z-index: var(--z-drawer);
  outline: none;
}

._panelOpen_1mov0_50 {
  transform: translateX(0);
  /* Enter easing: long, smooth ease-out-expo. The drawer glides into place
     instead of snapping — this is the single biggest factor in "pro" feel. */
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}

._panel_1mov0_31._widthSm_1mov0_57 {
  width: min(320px, 92vw);
}

/* Default `.panel` width already scales with viewport: 420px floor on
 * narrow windows so content doesn't compress, 36vw on typical desktops,
 * 720px ceiling on ultrawides. `.widthMd` keeps that baseline; no
 * override needed. */

._panel_1mov0_31._widthLg_1mov0_66 {
  width: min(560px, 92vw);
}

/* Full-bleed on phones. The widths above cap at 92vw, and since the panel
 * is right-anchored that leftover ~8vw reads as a gap on the left. On a
 * phone the detail panel should own the whole viewport width. Covers every
 * width variant so the override wins regardless of which is applied. */
@media (max-width: 599.98px) /* BP_MOBILE */ {
  ._panel_1mov0_31,
  ._panel_1mov0_31._widthSm_1mov0_57,
  ._panel_1mov0_31._widthLg_1mov0_66 {
    width: 100%;
  }
}

._header_1mov0_82 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-elevated);
  border-bottom: var(--border-emphasis) solid rgb(from var(--text-accent) r g b / 0.35);
  min-height: var(--header-height-app);
  flex-shrink: 0;
}

._titleWrap_1mov0_94 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

._title_1mov0_94 {
  font-family: var(--font);
  font-size: 1.45rem; /* deliberate display literal */
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-h);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._subtitle_1mov0_115 {
  font-family: var(--mono);
  font-size: var(--font-size-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: rgb(from var(--text-primary) r g b / 0.55);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._close_1mov0_127 {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-primary);
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

._close_1mov0_127:hover {
  background: var(--surface-overlay);
}

._close_1mov0_127:focus-visible {
  outline: var(--border-emphasis) solid var(--text-accent);
  outline-offset: var(--border-emphasis);
}

._body_1mov0_153 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* No padding-top so sticky section labels inside the body can pin
   * flush against the panel header's bottom edge. Consumers that need
   * top spacing provide it via their own first-child margin/padding
   * (MissionDetail's `.hero` already does this). */
  padding: 0 var(--space-md) var(--space-md) var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
  ._backdrop_1mov0_12,
  ._panel_1mov0_31,
  ._panelOpen_1mov0_50 {
    transition: none;
  }
}
._shell_1xi8b_1 {
  /* Document scroll, not internal scroll. The sidebar pins itself
     (LeftSidebar.module.css uses position: sticky; top: 0; height: 100svh)
     so it stays put as the window scrolls — the same behavior the
     reference HTML achieves with position: fixed on the sidebar. */
  min-height: 100svh;
  display: grid;
  grid-template-areas:
    'sidebar header'
    'sidebar main'
    'sidebar footer';
  grid-template-columns: var(--left-sidebar-width) 1fr;
  grid-template-rows: auto 1fr auto;
  background: var(--section-bg-alt);
  color: var(--text-primary);
  font-family: var(--font);
}

._shell_1xi8b_1[data-has-sidebar='false'] {
  grid-template-columns: 1fr;
  grid-template-areas:
    'header'
    'main'
    'footer';
}

._skipLink_1xi8b_27 {
  position: absolute;
  top: -100px;
  left: 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--text-accent);
  color: var(--text-light);
  font-family: var(--font);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  z-index: 1000;
  transition: top 0.15s ease;
}

._skipLink_1xi8b_27:focus {
  top: 0;
  outline: var(--border-emphasis) solid var(--text-accent);
  outline-offset: var(--border-emphasis);
}

._header_1xi8b_47 {
  grid-area: header;
  display: flex;
  align-items: stretch;
  min-height: var(--header-height-app);
  padding: 0;
  background: var(--section-bg);
  border-bottom: var(--border-hairline) solid var(--section-border-faint);
  z-index: var(--z-header);
  /* Grid item: without this, the header's min-content (menu + title +
   * actions) forces the shell's single-column track wider than the
   * viewport at 320px, dragging every page's content into horizontal
   * overflow. min-width:0 lets it shrink (title ellipsis absorbs the
   * squeeze) so the track stays = viewport width. */
  min-width: 0;
}

._headerSticky_1xi8b_64 {
  position: sticky;
  top: 0;
}

._headerInner_1xi8b_69 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  /* Horizontal padding matches the contextual left sidebar / drawer gutter
     (`.sidebar` in SettingsPage.module.css uses var(--space-lg)), so the
     header's "Main" back-button lines up with the sidebar's back-button
     (e.g. "Admin") stacked directly beneath it. Applies to every page that
     renders a header. No max-width — the page is full-width, so is the header. */
  padding: 0 var(--space-lg);
  min-width: 0;
}

._headerContent_1xi8b_84 {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

._headerLead_1xi8b_92 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

._headerLead_1xi8b_92:empty {
  display: none;
}

._headerSlot_1xi8b_104 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

._headerSlot_1xi8b_104:empty {
  display: none;
}

._menuButton_1xi8b_115 {
  appearance: none;
  background: transparent;
  border: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-default);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-h);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

._menuButton_1xi8b_115:hover {
  background: rgb(from var(--text-h) r g b / 0.06);
}

._menuButton_1xi8b_115:focus-visible {
  outline: var(--border-emphasis) solid var(--text-accent);
  outline-offset: var(--border-emphasis);
}

._main_1xi8b_141 {
  grid-area: main;
  min-width: 0;
  outline: none;
  display: flex;
  flex-direction: column;
  /* No internal scroll — the document is the scroll container, so
     position: sticky inside any page engages against the viewport. */
}

._footer_1xi8b_151 {
  grid-area: footer;
  padding: var(--space-sm) var(--space-md);
  background: var(--section-bg);
  border-top: var(--border-hairline) solid var(--section-border-faint);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  z-index: var(--z-header);
}

._footerSticky_1xi8b_161 {
  position: sticky;
  bottom: 0;
}

@media (max-width: 1279.98px) /* BP_TABLET */ {
  ._shell_1xi8b_1 {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'main'
      'footer';
  }

  ._menuButton_1xi8b_115 {
    display: inline-flex;
  }
}

/* Phones: tighten the header gutters so the hamburger doesn't float far
 * from the edge. The desktop clamp floors at 1rem, which — plus the menu
 * button's own centering box — reads as too much dead space at phone
 * widths. Tablet/desktop keep the roomier clamp above. */
@media (max-width: 599.98px) /* BP_MOBILE */ {
  ._headerInner_1xi8b_69 {
    padding: 0 var(--space-sm);
  }
}
/* Silent in-shell route fallback — reserves the main-content area
 * so the surrounding chrome doesn't collapse while a lazy route
 * chunk resolves, but renders no visible content. The only progress
 * indicator anywhere in the app is the sign-in form's pending line. */

._host_qg2wa_6 {
  flex: 1;
  min-height: 0;
}