@sigmela/router 0.3.6 → 0.4.0

package/lib/module/styles.css

@@ -1,1111 +0,0 @@
-.screen-stack {
-  min-width: 100%;
-  width: 100%;
-  display: flex;
-  position: relative;
-  height: 100vh;
-  height: 100dvh;
-  overflow: hidden;
-}
-
-.screen-stack > .screen-stack-item {
-  position: absolute;
-  inset: 0;
-  font-size: 24px;
-  overflow: hidden;
-  display: none;
-  /* z-index is set inline in ScreenStack.web.tsx */
-
-  /* Base transition for opening screen */
-  transition:
-    transform var(--stack-transition-time, 300ms)
-      cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-/* will-change hint for animating stacks */
-.screen-stack[data-animation="true"] > .screen-stack-item {
-  will-change: transform;
-}
-
-/* Inner container for regular screen */
-.stack-screen-container {
-  display: flex;
-  flex: 1;
-  height: 100%;
-}
-
-/* Inner container for modal (NOT flex: 1, to avoid stretching to full width) */
-.stack-modal-container {
-  display: flex;
-  height: 100%;
-}
-
-/* Overlay inside ScreenStackItem — always full-screen, only opacity animation */
-.stack-modal-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0);
-  opacity: 0;
-  pointer-events: none;
-  z-index: 1;
-  will-change: opacity;
-  transition: opacity var(--stack-transition-time, 300ms)
-    cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-/* Show overlay only for modal-like presentations.
-   IMPORTANT: use direct child (>) to avoid collapsing overlay from nested stacks,
-   when modal ScreenStackItem is inside push ScreenStackItem container. */
-.screen-stack-item:not(.modal):not(.modal-right):not(.contained-modal):not(.fullscreen-modal):not(.formsheet):not(.pagesheet):not(.sheet)
-  > .stack-modal-overlay {
-  display: none;
-}
-
-/* Overlay in initial state — transparent */
-.screen-stack-item.modal.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.modal-right.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.contained-modal.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.formsheet.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.pagesheet.transition-preEnter > .stack-modal-overlay,
-.screen-stack-item.sheet.transition-preEnter > .stack-modal-overlay {
-  opacity: 0;
-  background: rgba(0, 0, 0, 0.5);
-  pointer-events: none;
-}
-
-/* Overlay on enter — fade in via transition */
-.screen-stack-item.modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.modal-right.transition-entering > .stack-modal-overlay,
-.screen-stack-item.contained-modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.transition-entering > .stack-modal-overlay,
-.screen-stack-item.formsheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.pagesheet.transition-entering > .stack-modal-overlay,
-.screen-stack-item.sheet.transition-entering > .stack-modal-overlay {
-  background: rgba(0, 0, 0, 0.5);
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-/* For modal-like in active / entered states — fully visible */
-.screen-stack-item.modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.modal-right.transition-entered > .stack-modal-overlay,
-.screen-stack-item.contained-modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.transition-entered > .stack-modal-overlay,
-.screen-stack-item.formsheet.transition-entered > .stack-modal-overlay,
-.screen-stack-item.pagesheet.transition-entered > .stack-modal-overlay,
-.screen-stack-item.sheet.transition-entered > .stack-modal-overlay {
-  opacity: 0.5;
-  background: rgba(0, 0, 0, 0.5);
-  pointer-events: auto;
-}
-
-/* Overlay on modal-like close — fade out via transition */
-.screen-stack-item.modal.phase-exiting > .stack-modal-overlay,
-.screen-stack-item.modal.transition-exiting > .stack-modal-overlay,
-.screen-stack-item.modal-right.phase-exiting > .stack-modal-overlay,
-.screen-stack-item.modal-right.transition-exiting > .stack-modal-overlay,
-.screen-stack-item.contained-modal.phase-exiting > .stack-modal-overlay,
-.screen-stack-item.contained-modal.transition-exiting > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.phase-exiting > .stack-modal-overlay,
-.screen-stack-item.fullscreen-modal.transition-exiting > .stack-modal-overlay,
-.screen-stack-item.formsheet.phase-exiting > .stack-modal-overlay,
-.screen-stack-item.formsheet.transition-exiting > .stack-modal-overlay,
-.screen-stack-item.pagesheet.phase-exiting > .stack-modal-overlay,
-.screen-stack-item.pagesheet.transition-exiting > .stack-modal-overlay,
-.screen-stack-item.sheet.phase-exiting > .stack-modal-overlay,
-.screen-stack-item.sheet.transition-exiting > .stack-modal-overlay {
-  background: rgba(0, 0, 0, 0.5);
-  pointer-events: none;
-  opacity: 0;
-}
-
-/* Overlay for transparent-modal — transparent */
-.screen-stack-item.transparent-modal > .stack-modal-overlay {
-  opacity: 0 !important;
-  pointer-events: none !important;
-}
-
-/* Overlay for contained-transparent-modal — transparent */
-.screen-stack-item.contained-transparent-modal > .stack-modal-overlay {
-  opacity: 0 !important;
-  pointer-events: none !important;
-}
-
-/* Modal-like content container always above overlay */
-.screen-stack-item.modal .stack-modal-container,
-.screen-stack-item.modal-right .stack-modal-container,
-.screen-stack-item.contained-modal .stack-modal-container,
-.screen-stack-item.fullscreen-modal .stack-modal-container,
-.screen-stack-item.formsheet .stack-modal-container,
-.screen-stack-item.pagesheet .stack-modal-container,
-.screen-stack-item.sheet .stack-modal-container {
-  position: relative;
-  z-index: 2;
-}
-
-/* Show active / entering elements */
-.screen-stack > .screen-stack-item.phase-active,
-.screen-stack > .screen-stack-item.transition-entered,
-.screen-stack > .screen-stack-item.transition-entering,
-.screen-stack > .screen-stack-item.transition-preEnter {
-  display: flex;
-}
-
-/* Base state for active elements after entry */
-/* Overridden via animation classes (push-enter, pop-enter, etc.) */
-.screen-stack > .screen-stack-item.phase-active.transition-entered:not(.push-enter):not(.pop-enter):not(.modal):not(.sheet) {
-  transform: translateX(0);
-}
-
-/* Background (inactive) — visible, but without interactions */
-.screen-stack > .screen-stack-item.phase-inactive {
-  display: flex;
-  pointer-events: none; /* Don't intercept clicks */
-}
-
-/* Exiting elements are also shown during animation */
-/* Important: also show elements with pop-exit, even if they are still in transition-entered */
-.screen-stack > .screen-stack-item.phase-exiting,
-.screen-stack > .screen-stack-item.transition-exiting,
-.screen-stack > .screen-stack-item.transition-preExit,
-.screen-stack > .screen-stack-item.pop-exit {
-  display: flex;
-}
-
-/* Fully exited — hide */
-.screen-stack > .screen-stack-item.transition-exited,
-.screen-stack > .screen-stack-item.transition-unmounted {
-  display: none;
-}
-
-/* ==================== MODALS: base transform neutralization ==================== */
-
-/* IMPORTANT: modal elements should not move like regular screens */
-.screen-stack > .screen-stack-item.modal,
-.screen-stack > .screen-stack-item.modal-right,
-.screen-stack > .screen-stack-item.sheet {
-  transform: translate3d(0, 0, 0) !important;
-}
-
-/* ==================== COMMON STYLES BY SCREEN TYPE ==================== */
-
-/* ==================== PUSH ANIMATIONS ==================== */
-
-/* Forward navigation (push) — opening screen */
-.screen-stack-item.push.push-enter {
-  transition:
-    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-/* PUSH ENTER - regular screen enters from right */
-.screen-stack-item.push.push-enter.transition-preEnter {
-  transform: translateX(100%);
-}
-
-.screen-stack-item.push.push-enter.transition-entering,
-.screen-stack-item.push.push-enter.transition-entered {
-  transform: translateX(0);
-}
-
-/* PUSH BACKGROUND - background screen shifts left */
-/* Important: use !important to override general rules for inactive */
-.screen-stack-item.push.push-background,
-.screen-stack-item.modal.push-background,
-.screen-stack-item.modal-right.push-background,
-.screen-stack-item.sheet.push-background,
-.screen-stack-item.formsheet.push-background,
-.screen-stack-item.pagesheet.push-background {
-  transform: translateX(-25%) !important;
-  transition:
-    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-/* POP BACKGROUND - background screen on pop stays at -25% */
-/* Background elements on pop get pop-background instead of none, to preserve -25% position */
-.screen-stack-item.push.pop-background,
-.screen-stack-item.modal.pop-background,
-.screen-stack-item.modal-right.pop-background,
-.screen-stack-item.sheet.pop-background,
-.screen-stack-item.formsheet.pop-background,
-.screen-stack-item.pagesheet.pop-background {
-  transform: translateX(-25%) !important;
-  /* Don't set transition, so element stays in place without animation */
-}
-
-/* Backward navigation (pop) — closing screen */
-/* IMPORTANT: transition is set on element with pop-exit */
-.screen-stack-item.push.pop-exit {
-  transition:
-    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-/* POP EXIT - top screen exits to right */
-/* Key difference from old version: in old version selector .phase-exiting was applied WITHOUT dependency on transition-exiting */
-/* Here we do the same: if element has pop-exit and phase-exiting, it should exit to right */
-.screen-stack-item.push.pop-exit.phase-exiting,
-.screen-stack-item.push.pop-exit.transition-exiting {
-  transform: translateX(100%);
-}
-
-/* POP ENTER - screen returns to center from -25% */
-/* Applied only to active (top) element on pop */
-/* In old version: element was at -25% (as background), then on pop becomes active and goes to 0 */
-/* Simplified approach as in old version: phase-active simply becomes 0 */
-.screen-stack-item.push.pop-enter {
-  transition:
-    transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-/* Active element on pop simply in center (0) - final state */
-/* As in old version: .phase-active on pop -> transform: translateX(0) */
-.screen-stack-item.push.pop-enter.phase-active,
-.screen-stack-item.push.pop-enter.phase-active.transition-entered {
-  transform: translateX(0);
-}
-
-/* ==================== MODAL STACK: don't move background ==================== */
-
-/* If there's a modal on top — don't move previous screen and don't dim it,
-   overlay is responsible for dimming. */
-.screen-stack[data-has-active-modal="true"]
-  > .screen-stack-item.push.phase-inactive,
-.screen-stack[data-has-active-modal="true"]
-  > .screen-stack-item.push.phase-inactive.transition-entered {
-  transform: translate3d(0, 0, 0) !important;
-}
-
-/* ==================== MOBILE MODAL (<= 639px) — bottom sheet ==================== */
-@media (max-width: 639px) {
-  /* Inner container for modal — bottom sheet full width with top border radius */
-  .screen-stack-item.modal .stack-modal-container,
-  .screen-stack-item.modal-right .stack-modal-container {
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-    border-top-left-radius: 38px;
-    border-top-right-radius: 38px;
-    align-self: flex-end; /* align to bottom edge of parent */
-    overflow: hidden;
-    background: var(--modal-bg, #fff);
-
-    transform: translateY(0);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* MODAL ENTER - modal enters (bottom to top) */
-  .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container,
-  .screen-stack-item.modal-right.modal-right-enter.transition-preEnter .stack-modal-container {
-    transform: translateY(100%);
-  }
-
-  .screen-stack-item.modal.modal-enter.transition-entering .stack-modal-container,
-  .screen-stack-item.modal.modal-enter.transition-entered .stack-modal-container,
-  .screen-stack-item.modal-right.modal-right-enter.transition-entering .stack-modal-container,
-  .screen-stack-item.modal-right.modal-right-enter.transition-entered .stack-modal-container {
-    transform: translateY(0);
-  }
-
-  /* MODAL EXIT - modal closes (exits downward) */
-  .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container,
-  .screen-stack-item.modal-right.modal-right-exit.transition-exiting .stack-modal-container {
-    transform: translateY(100%);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* SHEET - sheet styles for mobile version */
-  .screen-stack-item.sheet .stack-modal-container {
-    width: 100%;
-    margin: 0;
-    border-radius: 0;
-    border-top-left-radius: 38px;
-    border-top-right-radius: 38px;
-    align-self: flex-end;
-    overflow: hidden;
-    background: var(--modal-bg, #fff);
-
-    transform: translateY(0);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* SHEET ENTER - sheet enters (bottom to top) */
-  .screen-stack-item.sheet.sheet-enter.transition-preEnter .stack-modal-container {
-    transform: translateY(100%);
-  }
-
-  .screen-stack-item.sheet.sheet-enter.transition-entering .stack-modal-container,
-  .screen-stack-item.sheet.sheet-enter.transition-entered .stack-modal-container {
-    transform: translateY(0);
-  }
-
-  /* SHEET EXIT - sheet closes */
-  .screen-stack-item.sheet.sheet-exit.transition-exiting .stack-modal-container {
-    transform: translateY(100%);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-}
-
-/* ==================== DESKTOP MODAL (>= 640px) — centered card ==================== */
-@media (min-width: 640px) {
-  /* Inner container for modal — centered card 600px width, 75% height */
-  .screen-stack-item.modal .stack-modal-container {
-    width: 600px;
-    max-width: calc(100% - 48px);
-    height: 75vh;
-    max-height: calc(100% - 48px);
-    margin: auto; /* center in parent */
-    border-radius: 38px;
-    overflow: hidden;
-    background: var(--modal-bg, #fff);
-
-    transform: translateY(0);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* Center the modal container using flexbox on parent */
-  .screen-stack-item.modal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* MODAL ENTER - modal enters (bottom to center) */
-  .screen-stack-item.modal.modal-enter.transition-preEnter .stack-modal-container {
-    transform: translateY(100vh);
-  }
-
-  .screen-stack-item.modal.modal-enter.transition-entering .stack-modal-container,
-  .screen-stack-item.modal.modal-enter.transition-entered .stack-modal-container {
-    transform: translateY(0);
-  }
-
-  /* MODAL EXIT - modal closes (exits downward) */
-  .screen-stack-item.modal.modal-exit.transition-exiting .stack-modal-container {
-    transform: translateY(100vh);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* ==================== MODAL-RIGHT — slide from right (previous modal behavior) ==================== */
-
-  /* Inner container for modal-right — right sheet 393px */
-  .screen-stack-item.modal-right .stack-modal-container {
-    width: 393px;
-    max-width: calc(100% - 36px);
-    height: calc(100% - 36px);
-    margin: 18px;
-    margin-left: auto; /* align to right edge */
-    border-radius: 16px;
-    overflow: hidden;
-    background: var(--modal-bg, #fff);
-
-    transform: translateX(0);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* MODAL-RIGHT ENTER - modal enters (right to left) */
-  .screen-stack-item.modal-right.modal-right-enter.transition-preEnter .stack-modal-container {
-    transform: translateX(100%);
-  }
-
-  .screen-stack-item.modal-right.modal-right-enter.transition-entering .stack-modal-container,
-  .screen-stack-item.modal-right.modal-right-enter.transition-entered .stack-modal-container {
-    transform: translateX(0);
-  }
-
-  /* MODAL-RIGHT EXIT - modal closes (exits to right) */
-  .screen-stack-item.modal-right.modal-right-exit.transition-exiting .stack-modal-container {
-    transform: translateX(100%);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* SHEET ENTER - sheet enters (right to left) */
-  .screen-stack-item.sheet.sheet-enter.transition-preEnter
-    .stack-modal-container {
-    transform: translateX(100%);
-  }
-
-  .screen-stack-item.sheet.sheet-enter.transition-entering
-    .stack-modal-container,
-  .screen-stack-item.sheet.sheet-enter.transition-entered
-    .stack-modal-container {
-    transform: translateX(0);
-  }
-
-  /* SHEET EXIT - sheet closes */
-  .screen-stack-item.sheet.sheet-exit.transition-exiting
-    .stack-modal-container {
-    transform: translateX(100%);
-    transition:
-      transform var(--stack-transition-time, 300ms) cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  /* Background screens under modal — don't move, don't dim (overlay does this) */
-  .screen-stack[data-has-active-modal="true"]
-    > .screen-stack-item.push.phase-inactive,
-  .screen-stack[data-has-active-modal="true"]
-    > .screen-stack-item.push.phase-inactive.transition-entered {
-    transform: translate3d(0, 0, 0) !important;
-  }
-}
-
-/* ==================== INACTIVE SCREENS (common settings) ==================== */
-
-/* Inactive screens (background stack elements)
-   Background elements on pop get animationType: pop-background and stay at -25%
-   (except modal case, there we override via data-has-active-modal) */
-.screen-stack > .screen-stack-item.phase-inactive:not(.push-background):not(.pop-background):not(.pop-enter):not(.pop-exit):not(.modal):not(.sheet) {
-  /* Don't set transform explicitly - element will preserve previous position */
-}
-
-/* ==================== SPECIAL CASES ==================== */
-
-/* NO-ANIMATE - no animation (screenOptions.animated === false) */
-/* IMPORTANT: this rule should override all other animation rules */
-.screen-stack-item.no-animate,
-.screen-stack-item.no-animate.push-enter,
-.screen-stack-item.no-animate.push-exit,
-.screen-stack-item.no-animate.push-background,
-.screen-stack-item.no-animate.pop-enter,
-.screen-stack-item.no-animate.pop-exit,
-.screen-stack-item.no-animate.pop-background {
-  transform: translate3d(0, 0, 0) !important;
-  transition: none !important;
-}
-
-/* NONE - no animation (initial mount) */
-/* IMPORTANT: this rule should NOT be applied to pop-background elements */
-.screen-stack-item.none:not(.pop-background) {
-  transform: translate3d(0, 0, 0) !important;
-  transition: none !important;
-}
-
-
-
-.tab-stacks-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 100vh;
-  min-height: 100dvh;
-  position: relative;
-}
-
-.tab-stacks-container > .screen-stack,
-.tab-stacks-container > .split-view-container {
-  padding-bottom: calc(73px + env(safe-area-inset-bottom));
-}
-
-.tab-bar {
-  /* CSS variables for theming / behavior */
-  --tabbar-bg: #ffffff;
-  --tabbar-gap: 4px;
-  --tabbar-radius: 9999px;
-  --tabbar-padding: 6px;
-  --tabbar-item-radius: 9999px;
-  --tabbar-height: 56px;
-
-  /* Used by active indicator (set inline in RenderTabBar.web.tsx) */
-  --tabbar-tabs-count: 1;
-  --tabbar-active-index: 0;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 10px 12px;
-  padding-bottom: max(12px, env(safe-area-inset-bottom));
-  background: transparent;
-  z-index: 100;
-}
-
-.tab-bar-blur-overlay {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: calc(73px + 16px + env(safe-area-inset-bottom));
-  backdrop-filter: blur(20px) saturate(180%);
-  background-color: rgba(255, 255, 255, 0.05);
-  /* -webkit-backdrop-filter: blur(20px) saturate(180%); */
-  pointer-events: none;
-  z-index: 99;
-}
-
-.tab-bar-inner {
-  position: relative;
-  display: flex;
-  width: 100%;
-  max-width: 100%;
-  border-radius: var(--tabbar-radius);
-  overflow: hidden;
-  isolation: isolate;
-}
-
-.tab-bar-glass {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.tab-bar-content {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  max-width: 100%;
-  gap: var(--tabbar-gap);
-  padding: var(--tabbar-padding);
-}
-
-.tab-bar-active-indicator {
-  position: absolute;
-  top: var(--tabbar-padding);
-  bottom: var(--tabbar-padding);
-  left: var(--tabbar-padding);
-  border-radius: var(--tabbar-item-radius);
-  z-index: 0;
-  pointer-events: none;
-  opacity: 0;
-  transition:
-    transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-.tab-bar[data-tabs-count]:not([data-tabs-count="0"]) .tab-bar-active-indicator {
-  opacity: 1;
-  width: calc(
-    (
-        100% -
-          (var(--tabbar-padding) * 2) -
-          (var(--tabbar-gap) * (var(--tabbar-tabs-count) - 1))
-      ) / var(--tabbar-tabs-count)
-  );
-  transform: translateX(
-    calc((var(--tabbar-active-index) * (100% + var(--tabbar-gap))))
-  );
-}
-
-.tab-item {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  margin: 0;
-  padding: 6px 10px;
-  height: var(--tabbar-height);
-  color: inherit;
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  position: relative;
-  cursor: pointer;
-  border-radius: var(--tabbar-item-radius);
-  transition:
-    transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1),
-    color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-.tab-item.active {
-  background: transparent;
-}
-
-.tab-item:hover:not(.active) {
-  background: rgba(10, 10, 10, 0.06);
-  background: color-mix(in srgb, #0a0a0a 6%, transparent);
-}
-
-.tab-item:active {
-  transform: scale(0.98);
-}
-
-.tab-item:focus:not(:focus-visible) {
-  outline: none;
-}
-
-.tab-item:focus-visible {
-  box-shadow:
-    0 0 0 2px rgba(0, 0, 0, 0.4),
-    0 0 0 2px color-mix(in srgb, currentColor 40%, transparent),
-    0 10px 28px rgba(0, 0, 0, 0.12);
-}
-
-.tab-item-icon {
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.tab-item-icon > * {
-  width: 24px;
-  height: 24px;
-  display: block;
-  object-fit: contain;
-}
-
-.tab-item-label {
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
-  text-align: center;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.tab-item-label-badge {
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 6px;
-  border-radius: 9999px;
-  background-color: #dc3545;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-}
-
-/* ==================== MOBILE TAB BAR (<= 639px) — iOS-like floating glass pill ==================== */
-@media (max-width: 639px) {
-  .tab-bar-inner {
-    max-width: 560px;
-    margin: 0 auto;
-  }
-
-  .tab-bar-glass {
-    /* Fallbacks first (in case color-mix isn't supported) */
-    background-color: rgba(255, 255, 255, 0.72);
-    background: rgba(255, 255, 255, 0.72);
-    /* Preferred (overrides when supported) */
-    background: color-mix(in srgb, var(--tabbar-bg, #ffffff) 76%, transparent);
-    backdrop-filter: blur(28px) saturate(180%);
-    -webkit-backdrop-filter: blur(28px) saturate(180%);
-    border: 1px solid rgba(255, 255, 255, 0.35);
-    border: 0.5px solid color-mix(in srgb, #ffffff 55%, transparent);
-    box-shadow:
-      0 8px 26px rgba(0, 0, 0, 0.18),
-      0 1px 0 rgba(255, 255, 255, 0.4) inset;
-  }
-
-  .tab-bar-active-indicator {
-    background-color: rgba(255, 255, 255, 0.60);
-    background: color-mix(in srgb, #ffffff 62%, transparent);
-    box-shadow:
-      0 1px 0 rgba(255, 255, 255, 0.5) inset,
-      0 8px 20px rgba(0, 0, 0, 0.10);
-  }
-
-  .tab-item:hover:not(.active) {
-    background: rgba(255, 255, 255, 0.22);
-    background: color-mix(in srgb, #ffffff 22%, transparent);
-  }
-}
-
-/* ==================== DESKTOP TAB BAR (>= 640px) ==================== */
-@media (min-width: 640px) {
-  .tab-stacks-container {
-    flex-direction: row;
-  }
-
-  .tab-stacks-container > .screen-stack,
-  .tab-stacks-container > .split-view-container {
-    padding-bottom: 0;
-    margin-left: 260px;
-    min-width: 0;
-    width: calc(100% - 260px);
-  }
-
-  .tab-bar-blur-overlay {
-    display: none;
-  }
-
-  .tab-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 260px;
-    height: 100%;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    padding: 0;
-    flex-shrink: 0;
-    order: 1;
-    background: transparent;
-    z-index: auto;
-  }
-
-  .tab-bar-inner {
-    height: 100%;
-    width: 100%;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    border-radius: 0;
-    padding: 12px 0 0 0;
-    gap: 0;
-    background: var(--tabbar-bg, #ffffff);
-    box-shadow: none;
-  }
-
-  .tab-bar-glass {
-    display: none;
-  }
-
-  .tab-bar-content {
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    padding: 0;
-    gap: 0;
-  }
-
-  .tab-bar-active-indicator {
-    display: none;
-  }
-
-  .tab-item {
-    margin: 0 12px;
-    margin-bottom: 4px;
-    height: 44px;
-    flex: 0 0 auto;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 12px;
-    width: auto;
-    border-radius: 10px;
-    transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
-  }
-
-  .tab-item.active {
-    background: var(--backgroundTertiaryTrans, rgba(201, 204, 209, 0.32));
-  }
-
-  .tab-item:active {
-    transform: none;
-  }
-
-  .tab-item-icon {
-    width: 24px;
-    height: 24px;
-    padding-right: 12px;
-    flex-shrink: 0;
-  }
-
-  .tab-item-label {
-    flex: 1;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-    text-align: left;
-    padding-right: 3px;
-    white-space: nowrap;
-  }
-
-  .tab-item-label-badge {
-    position: static;
-    transform: none;
-    margin-left: auto;
-  }
-}
-
-/* ==================== SPLIT VIEW (web) ==================== */
-
-.split-view-container {
-  position: relative;
-  display: block; /* narrow by default; wide enabled via injected @media rule */
-  height: 100vh;
-  height: 100dvh;
-  min-height: 100vh;
-  min-height: 100dvh;
-  width: 100%;
-  overflow: hidden;
-}
-
-.split-view-container .screen-stack {
-  /* ScreenStack has min-width: 100%, which breaks side-by-side layouts */
-  min-width: 0;
-}
-
-.split-view-primary {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-}
-
-.split-view-secondary {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-}
-
-/* In narrow mode, hide secondary completely if it has no active screen */
-.split-view-secondary:not(:has(.screen-stack-item.phase-active)):not(:has(.screen-stack-item.phase-exiting)):not(:has(.screen-stack-item.transition-entering)):not(:has(.screen-stack-item.transition-entered)):not(:has(.screen-stack-item.transition-preEnter)):not(:has(.screen-stack-item.transition-exiting)):not(:has(.screen-stack-item.transition-preExit)):not(:has(.screen-stack-item.pop-exit)) {
-  display: none;
-}
-
-
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.phase-active)) .split-view-primary,
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.phase-exiting)) .split-view-primary,
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.transition-entering)) .split-view-primary,
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.transition-entered)) .split-view-primary,
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.transition-preEnter)) .split-view-primary,
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.transition-exiting)) .split-view-primary,
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.transition-preExit)) .split-view-primary,
-.split-view-container:has(.split-view-secondary:has(.screen-stack-item.pop-exit)) .split-view-primary {
-  pointer-events: none;
-}
-
-/* Split view wide layout - applied when viewport width >= 640px */
-@media (min-width: 640px) {
-  .split-view-container {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .split-view-primary {
-    position: relative;
-    flex: 0 0 auto;
-    max-width: var(--split-view-primary-max-width, 390px);
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-  }
-
-  .split-view-secondary {
-    display: flex;
-    position: relative;
-    inset: auto;
-    z-index: auto;
-    flex: 1 1 auto;
-  }
-}
-
-/* ==================== DRAWER ==================== */
-
-.drawer-container {
-  --drawer-bg: #ffffff;
-  --drawer-width: 280px;
-  --drawer-transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
-
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 auto;
-  min-height: 100dvh;
-  position: relative;
-  overflow: hidden;
-}
-
-.drawer-sidebar {
-  display: flex;
-  flex-direction: column;
-  width: var(--drawer-width);
-  flex-shrink: 0;
-  background: var(--drawer-bg);
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 12px 0 0 0;
-}
-
-.drawer-sidebar-content {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0;
-}
-
-.drawer-main {
-  flex: 1 1 auto;
-  min-width: 0;
-  position: relative;
-}
-
-.drawer-overlay {
-  display: none;
-}
-
-/* Drawer item — identical to desktop TabBar .tab-item */
-.drawer-item {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  margin: 0 12px;
-  margin-bottom: 4px;
-  padding: 0 12px;
-  height: 44px;
-  color: inherit;
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  cursor: pointer;
-  border-radius: 10px;
-  transition: background-color 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
-}
-
-.drawer-item.active {
-  background: var(--backgroundTertiaryTrans, rgba(201, 204, 209, 0.32));
-}
-
-.drawer-item:hover:not(.active) {
-  background: color-mix(in srgb, #0a0a0a 6%, transparent);
-}
-
-.drawer-item:active {
-  transform: none;
-}
-
-.drawer-item:focus {
-  outline: none;
-}
-
-.drawer-item:focus-visible {
-  box-shadow:
-    0 0 0 2px color-mix(in srgb, currentColor 40%, transparent),
-    0 10px 28px rgba(0, 0, 0, 0.12);
-}
-
-.drawer-item-icon {
-  width: 24px;
-  height: 24px;
-  padding-right: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.drawer-item-icon > * {
-  width: 24px;
-  height: 24px;
-  display: block;
-  object-fit: contain;
-}
-
-.drawer-item-label {
-  flex: 1;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 600;
-  text-align: left;
-  padding-right: 3px;
-  white-space: nowrap;
-}
-
-.drawer-item-badge {
-  position: static;
-  transform: none;
-  margin-left: auto;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 6px;
-  border-radius: 9999px;
-  background-color: #dc3545;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-}
-
-/* ==================== MOBILE DRAWER (<= 640px) ==================== */
-@media (max-width: 640px) {
-  .drawer-container {
-    overflow: hidden;
-  }
-
-  .drawer-sidebar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    z-index: 101;
-    transform: translateX(calc(-1 * var(--drawer-width)));
-    transition: transform var(--drawer-transition);
-  }
-
-  .drawer-main {
-    width: 100%;
-    transition: transform var(--drawer-transition);
-  }
-
-  .drawer-overlay {
-    display: block;
-    position: absolute;
-    inset: 0;
-    z-index: 100;
-    background: rgba(0, 0, 0, 0);
-    opacity: 0;
-    pointer-events: none;
-    transition:
-      opacity var(--drawer-transition),
-      background var(--drawer-transition);
-  }
-
-  /* Open state */
-  .drawer-container[data-drawer-open='true'] .drawer-sidebar {
-    transform: translateX(0);
-  }
-
-  .drawer-container[data-drawer-open='true'] .drawer-main {
-    transform: translateX(var(--drawer-width));
-  }
-
-  .drawer-container[data-drawer-open='true'] .drawer-overlay {
-    opacity: 1;
-    background: rgba(0, 0, 0, 0.3);
-    pointer-events: auto;
-  }
-}
-
-/* ==================== DESKTOP DRAWER (>= 641px) ==================== */
-/* Inverted logic: sidebar is visible by default, data-drawer-open='true' hides it.
-   This way toggle() works on both viewports with a single boolean:
-   isOpen=false (default) → mobile: hidden, desktop: visible
-   isOpen=true  (toggled) → mobile: visible, desktop: hidden */
-@media (min-width: 641px) {
-  .drawer-sidebar {
-    border-right: 1px solid rgba(0, 0, 0, 0.08);
-    transition: margin-left var(--drawer-transition);
-  }
-
-  .drawer-container[data-drawer-open='true'] .drawer-sidebar {
-    margin-left: calc(-1 * var(--drawer-width));
-    border-right: none;
-  }
-}