/* ── Layout: Studio Production ─────────────────────────────────── */


/* ── App Shell ────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  flex-direction: column;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  background: var(--bg-primary);
}

/* Body row sits below the studio app bar; mobile=column, desktop=row */
.app-shell-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── The studio app bar (frontend-shared/appbar) ──────────────── */
/* <studio-appbar> replaced .app-header as the shell's chrome row, so it
   inherits that row's two HOST-side jobs. Everything the bar looks like
   is its own; these are only the things the shell around it decides.

   1. The iOS safe-area top inset. .page deliberately does NOT add it
      again, so the chrome row has to absorb it. Grow the BOX, not the
      content: box-sizing is border-box, so padding-top pushes the row
      down while --ab-h / --ab-h-phone still measure the bar you see.
   2. z-index 210 — above the desktop rail (200) and the FAB (199), so
      the bar's popovers (bell, switcher, avatar) paint over them; 150
      (the old .app-header value) put the switcher UNDER the rail, which
      clipped its left edge (Sep 14 2026). The mobile nav drawer (250/260),
      the offline banner (300), modals (1001) and the search overlay (9999)
      still cover the bar.

   The bar paints from the --chrome-* tokens design-system.css already
   publishes per palette, so the old [data-theme] .app-header overrides
   (asana's #2e2e30, perimeter's navy) are gone with nothing lost. */
.app-shell > studio-appbar {
  flex-shrink: 0;
  height: calc(var(--ab-h) + var(--safe-top));
  padding-top: var(--safe-top);
  z-index: 210;
}

@media (max-width: 640px) {
  .app-shell > studio-appbar {
    height: calc(var(--ab-h-phone) + var(--safe-top));
  }
  /* The bar hides its slots on phones so hosts keep their own tab bars.
     A contractor has no tab bar entry for the Wall Remote and no FAB, so
     this button is their only way in and the slot has to stay. The
     component hides it with `display: none !important`, which no amount
     of specificity beats — hence the counter-!important. If the bar ever
     grows a "keep this slot on phones" opt-in, this rule should go. */
}

/* Command sidebar + resize handle + desktop thread: hidden on mobile, shown via desktop media query */
.command-sidebar { display: none; }
.sidebar-resize-handle { display: none; }
.sidebar-collapse-btn { display: none; }
.desktop-thread-panel { display: none; }
.thread-resize-handle { display: none; }

/* ── Page Header (per-page subheader; the global chrome is <studio-appbar>) ── */
.page-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-lg);
  min-height: 44px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--glass-border);
}

.page-header-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 1;
  pointer-events: none;
  color: var(--text-primary);
}

.page-header-brand .brand-accent {
  color: var(--accent-text, #b5725a);
}

.page-header-title {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
  padding: 0 var(--sp-sm);
}

.page-header-title--editable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
}

.page-header-title--editable:hover {
  background: var(--glass-bg-hover);
}

.page-header-title--input {
  background: var(--glass-bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: inherit;
  outline: none;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}

/* ── Page Content ─────────────────────────────────────────────── */
.page-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--sp-lg);
  /* Bottom nav is now an in-flow flex child of .app-shell, so we no
     longer reserve extra padding for it here. FAB still floats above. */
  padding-bottom: var(--sp-lg);
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary);
}

/* ── Floating Action Button ───────────────────────────────────── */
.fab-container {
  position: fixed;
  right: var(--sp-lg);
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--sp-md));
  z-index: 199;
}

.fab-new {
  position: relative;
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--accent-glow);
  background: color-mix(in srgb, var(--accent) 50%, transparent);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  color: var(--accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md), 0 0 12px var(--accent-glow);
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.fab-new svg {
  transition: transform 0.3s var(--ease-out);
}

.fab-new.open {
  background: color-mix(in srgb, var(--accent) 70%, transparent); /* accent at 70% */
}

.fab-new.open svg {
  transform: rotate(45deg);
}

.fab-new:active {
  transform: scale(0.88) !important;
}

.fab-new.fab-scrolling {
  transform: translateY(-6px) scale(0.94);
  opacity: 0.7;
}

/* ── FAB Backdrop ────────────────────────────────────────────── */
.fab-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--overlay-bg);
  backdrop-filter: blur(var(--blur-xs));
  -webkit-backdrop-filter: blur(var(--blur-xs));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}

.fab-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── FAB Menu Items ──────────────────────────────────────────── */
.fab-menu-item {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-direction: row-reverse;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0) scale(0.6);
  transition: all 0.3s var(--ease-out);
  transition-delay: 0ms;
}

.fab-menu-item.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(calc(var(--fab-i) * -64px)) scale(1);
  transition-delay: calc((var(--fab-i) - 1) * 50ms);
}

.fab-menu-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--glass-bg-active);
  border: 1px solid var(--glass-border-hover);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

.fab-menu-item:active .fab-menu-icon {
  transform: scale(0.9);
  background: var(--accent-soft);
}

.fab-menu-label {
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--glass-bg-active);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* ── Keyboard Lock (iOS) — lock viewport height so iOS can't shift ── */
html.keyboard-lock {
  height: var(--lock-height, 100%) !important;
  overflow: hidden !important;
}
html.keyboard-lock .bottom-nav {
  display: none !important;
}
html.keyboard-lock .page-content {
  padding-bottom: var(--sp-sm) !important;
  height: var(--lock-height, 100dvh) !important;
  overflow-y: auto !important;
}
html.keyboard-lock .fab-container {
  display: none !important;
}
html.keyboard-lock .chat-shell-wrapper {
  height: var(--lock-height, 100dvh) !important;
  padding-bottom: 0 !important;
}

/* ── Bottom Navigation ────────────────────────────────────────── */
.bottom-nav {
  /* Flex child of .app-shell (which is column + 100dvh). Avoids the iOS
     Safari "floating nav" bug where position:fixed pins to the layout
     viewport (URL-bar-collapsed size) and leaves the nav above the
     visible bottom when the URL bar is expanded. */
  position: relative;
  flex-shrink: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  height: calc(var(--nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--nav-bg);
  backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(1.6);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -2px 16px var(--overlay-bg-light);
}


/* Sliding active pill */
.nav-pill {
  position: absolute;
  z-index: 0;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  box-shadow: var(--glass-inner-shadow);
  transition: all 500ms var(--ease-spring);
  pointer-events: none;
  opacity: 0;
}

.nav-pill.visible {
  opacity: 1;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-sm) 0;
  color: var(--text-muted);
  /* Compromise floor: 0.6875rem visibly wraps 2-line labels ("PIPELINE",
     "CALENDAR") in the 5-across mobile bottom nav; 0.625rem is the largest
     size that still fits on one line. */
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

.nav-item svg {
  width: 22px;
  height: 22px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav-item:active svg {
  transform: scale(0.9);
}

.nav-item.active {
  color: var(--accent);
}

/* New button (center) */
.nav-item--new {
  color: var(--text-primary);
}

.nav-item--new .nav-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px var(--accent-glow);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.nav-item--new:active .nav-icon-wrap {
  transform: scale(0.92);
}

.nav-item--new svg {
  width: 20px;
  height: 20px;
  color: var(--accent-on);
}

/* ── Page Transitions ─────────────────────────────────────────── */
.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
  animation: pageIn 220ms var(--ease-out) both;
  /* Note: safe-area-inset-top is absorbed by <studio-appbar> above the page,
     so .page does NOT add it again. Login page handles its own padding. */
}

.project-detail-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

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

/* ── Section Headers ──────────────────────────────────────────── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-md);
}

.section-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── List Items ───────────────────────────────────────────────── */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--glass-border);
  transition: background var(--duration-fast) var(--ease-out);
}

.list-item:last-child {
  border-bottom: none;
}

.list-item:active {
  background: var(--glass-bg-hover);
}

/* ── App Library Drawer ───────────────────────────────────────── */
.app-library-backdrop {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--overlay-bg);
  backdrop-filter: blur(var(--blur-xs));
  -webkit-backdrop-filter: blur(var(--blur-xs));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}
.app-library-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.app-library-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 260;
  width: 260px;
  max-width: 80vw;
  background: var(--bg-secondary);
  backdrop-filter: blur(var(--blur-xl));
  -webkit-backdrop-filter: blur(var(--blur-xl));
  border-left: 1px solid var(--glass-border-hover);
  box-shadow: -4px 0 24px rgba(0,0,0,.3);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
  padding: calc(var(--safe-top) + var(--sp-xl)) var(--sp-lg) var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}
.app-library-drawer.open {
  transform: translateX(0);
}

.app-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-library-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-sm);
}

.app-library-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--sp-md) var(--sp-sm);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
.app-library-item:active {
  background: var(--glass-bg-hover);
}
.app-library-item.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.app-library-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-library-item.active .app-library-icon {
  border-color: var(--accent-glow);
  background: var(--accent-soft);
}

.app-library-handle {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 198;
  transform: translateY(-50%);
  width: 4px;
  height: 40px;
  background: var(--text-muted);
  opacity: 0.25;
  border-radius: 2px 0 0 2px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.app-library-handle:active {
  opacity: 0.5;
}

/* Nav divider (desktop sidebar only) */
.nav-divider {
  display: none;
}

/* App nav items hidden on mobile */
.nav-item--app {
  display: none;
}

/* ── Desktop Layout ───────────────────────────────────────────── */
@media (min-width: 768px) {
  .page-content {
    padding: var(--sp-xl) var(--sp-2xl);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .app-shell-body {
    flex-direction: row;
  }

  .bottom-nav {
    order: -1;
    position: static;
    flex-direction: column;
    width: 72px;
    height: 100%;
    border-top: none;
    border-right: 1px solid var(--glass-border);
    padding: var(--sp-lg) 0;
    padding-bottom: var(--sp-lg);
    gap: var(--sp-xs);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Desktop sidebar variant — undo mobile compositor promotion */
    transform: none;
    will-change: auto;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }

  .nav-item {
    flex: 0;
    padding: var(--sp-md) 0;
    /* Compromise floor — see mobile .nav-item rule above; same 72px-wide
       column risks wrapping at 0.6875rem. */
    font-size: 0.625rem;
  }

  /* Pill repositions via JS for vertical layout */

  .nav-item--new {
    margin-top: auto;
    margin-bottom: auto;
  }

  .page-content {
    padding-bottom: var(--sp-xl);
    /* Was 800px — shrank content as the window widened past the >=768px
       tier's 900px. Match that value so width doesn't regress at 1024px. */
    max-width: 900px;
    margin: 0 auto;
    padding-left: var(--sp-2xl);
    padding-right: var(--sp-2xl);
  }

  /* Let wide pages use full available width */
  .page-content.page-content--wide {
    max-width: none;
    width: 100%;
  }

  .page-header {
    padding-top: var(--sp-md);
  }

  /* Main content area fills remaining width */
  .page {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .page > .page-content {
    overflow-y: auto;
  }

  /* ── Project Detail Body (row: detail + thread) ──────────── */
  .project-detail-body {
    flex-direction: row;
  }

  .project-detail-body > .page-content {
    flex: 1;
    min-width: 0;
    max-width: none;
    overflow-y: auto;
    border-right: none;
  }

  /* ── Desktop Thread Panel ──────────────────────────────────── */
  .desktop-thread-panel {
    display: flex;
    flex-direction: column;
    width: var(--thread-panel-width, 340px);
    flex-shrink: 0;
    height: 100%;
    background: var(--glass-bg);
    overflow: hidden;
  }

  /* ── Thread Resize Handle ──────────────────────────────────── */
  .thread-resize-handle {
    display: block;
    width: 5px;
    flex-shrink: 0;
    cursor: col-resize;
    background: var(--glass-border);
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    position: relative;
  }
  .thread-resize-handle:hover,
  .thread-resize-handle.dragging {
    opacity: 1;
    background: var(--accent);
  }
  .project-detail-body:hover .thread-resize-handle { opacity: 0.5; }
  .project-detail-body:hover .thread-resize-handle:hover { opacity: 1; }

  .desktop-thread-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-md);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
  }

  .desktop-thread-panel .desktop-thread-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-sm) var(--sp-sm);
  }

  .desktop-thread-panel .desktop-thread-messages::-webkit-scrollbar { width: 3px; }
  .desktop-thread-panel .desktop-thread-messages::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

  .desktop-thread-panel .thread-pending-files {
    padding: 0 var(--sp-sm);
  }

  .desktop-thread-panel .thread-input-bar {
    border-top: 1px solid var(--glass-border);
    border-radius: 0;
    margin: 0;
    padding: var(--sp-sm) var(--sp-sm);
  }

  /* Show app icons in desktop sidebar */
  .nav-item--app {
    display: flex;
  }

  .nav-divider {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--glass-border);
    margin: var(--sp-sm) auto;
  }

  /* ── Command Center Sidebar ──────────────────────────────── */
  .command-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    width: var(--sidebar-width, 420px);
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    padding: var(--sp-xl) var(--sp-lg);
    padding-top: var(--sp-lg);
    background: var(--glass-bg);
    border-left: none;
  }

  .command-sidebar::-webkit-scrollbar { width: 4px; }
  .command-sidebar::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 2px; }

  /* Sidebar collapse/expand button — flex item in app-shell, not fixed */
  .sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-shrink: 0;
    width: 24px;
    height: 48px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--glass-bg-active);
    border: 1px solid var(--glass-border);
    border-right: none;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
  }

  .sidebar-collapse-btn:hover {
    opacity: 1;
    background: var(--glass-bg-hover);
    color: var(--text-primary);
  }

  /* Resize handle — sits between page and sidebar */
  .sidebar-resize-handle {
    display: block;
    width: 5px;
    flex-shrink: 0;
    cursor: col-resize;
    background: var(--glass-border);
    height: 100%;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    position: relative;
    z-index: 10;
  }

  .sidebar-resize-handle:hover,
  .sidebar-resize-handle.dragging {
    opacity: 1;
    background: var(--accent);
  }
  .app-shell:hover > .sidebar-resize-handle { opacity: 0.5; }
  .app-shell:hover > .sidebar-resize-handle:hover { opacity: 1; }

  .sidebar-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s;
  }

  .sidebar-resize-handle:hover::after,
  .sidebar-resize-handle.dragging::after {
    opacity: 0.6;
  }

  /* FAB positioning for desktop — account for sidebar, lower position */
  .fab-container {
    bottom: var(--sp-xl);
  }

  /* Hide mobile app library on desktop */
  .app-library-backdrop,
  .app-library-drawer,
  .app-library-handle {
    display: none !important;
  }
}

/* ── Tablet fallback: 3-panel project/series view can't fit 1024px ──
   Fixed columns in this range: nav sidebar 72px + .desktop-thread-panel
   (--thread-panel-width, default 340px) + .command-sidebar
   (--sidebar-width, default 420px) = 832px fixed, leaving only ~192px
   for .page-content at a 1024px viewport — unusable. Between 1024px and
   1199.98px, drop the command sidebar so the thread panel + content
   still get real room (2 panels). At >=1200px there's enough width for
   all three, so this rule is scoped to the tablet band only. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .page:has(.desktop-thread-panel) ~ .command-sidebar {
    display: none !important;
  }
}

/* ── Connection Status Bar ────────────────────────────────────── */
.connection-bar {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  z-index: 300;
  padding: 4px var(--sp-lg);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  transition: transform var(--duration-normal) var(--ease-out);
}

.connection-bar.hidden {
  transform: translateY(-100%);
}

.connection-bar--offline {
  background: var(--severity-critical);
  color: var(--text-inverse);
}

.connection-bar--connecting {
  background: var(--severity-warning);
  color: var(--bg-primary);
}

/* ── Asana Theme: Dark chrome overrides ──────────────────────── */
/* Nav bar, header, sidebar, and thread panel get dark treatment  */
[data-theme="asana"] .bottom-nav {
  background: #2e2e30;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

[data-theme="asana"] .nav-item {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="asana"] .nav-item.active {
  color: #ffffff;
}

[data-theme="asana"] .nav-item--new .nav-icon-wrap {
  background: var(--accent);
}

[data-theme="asana"] .nav-pill {
  background: rgba(255, 255, 255, 0.10);
}

[data-theme="asana"] .nav-divider,
[data-theme="asana"] .nav-section-rule {
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 1024px) {
  [data-theme="asana"] .sidebar-resize-handle,
  [data-theme="perimeter"] .sidebar-resize-handle,
  [data-theme="cadence"] .sidebar-resize-handle {
    background: var(--glass-border);
  }
}

/* ── Perimeter + Cadence themes: chrome overrides ────────────── */
/* All values here come from the --chrome-* tokens defined for this theme
   in design-system.css (navy bg, white fg, light-blue accent). Refactor
   only — every color below resolves to the exact hex/rgba it replaced. */
[data-theme="perimeter"] .bottom-nav,
[data-theme="cadence"] .bottom-nav {
  background: var(--chrome-bg);
  border-color: var(--chrome-border);
  box-shadow: none;
}

[data-theme="perimeter"] .nav-item,
[data-theme="cadence"] .nav-item {
  color: var(--chrome-fg-muted);
}

[data-theme="perimeter"] .nav-item.active,
[data-theme="cadence"] .nav-item.active {
  color: var(--chrome-accent);
}

[data-theme="perimeter"] .nav-item--new .nav-icon-wrap,
[data-theme="cadence"] .nav-item--new .nav-icon-wrap {
  background: var(--chrome-accent);
}

[data-theme="perimeter"] .nav-pill,
[data-theme="cadence"] .nav-pill {
  background: color-mix(in srgb, var(--chrome-accent) 12%, transparent);
}

[data-theme="perimeter"] .nav-divider,
[data-theme="perimeter"] .nav-section-rule,
[data-theme="cadence"] .nav-divider,
[data-theme="cadence"] .nav-section-rule {
  background: var(--chrome-border);
}

/* ── Pull-to-refresh indicator ────────────────────────────────── */
.ptr-indicator {
  position: fixed;
  top: calc(var(--safe-top) + var(--ab-h-phone) + 12px);
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 500;
  opacity: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.ptr-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--glass-border);
  border-top-color: var(--accent-text, #b5725a);
}
.ptr-indicator.spin .ptr-spinner { animation: ptr-rot 0.7s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }

/* ── Mobile nav customization ─────────────────────────────────── */
/* Both nav surfaces render from the one registry: the phone bar from
   $store.app.mobileNav (.nav-item--dyn), the desktop rail from
   $store.app.navRailSections() (.nav-section > .nav-item--rail). Each
   set hides at the other breakpoint. */
.nav-section { display: none; }
.nav-ico { display: flex; }
.app-library-icon svg { width: 24px; height: 24px; }

.nav-edit { margin-bottom: var(--sp-md); }
.nav-edit-title { margin-bottom: var(--sp-xs); }
.nav-edit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) 0;
}
.nav-edit-ico { display: flex; color: var(--text-secondary); }
.nav-edit-ico svg { width: 18px; height: 18px; }
.nav-edit-label {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-edit-row .btn:disabled { opacity: 0.3; }
.nav-edit-hint {
  margin-top: var(--sp-sm);
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.nav-edit-reset {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--sp-xs);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.app-library-grid.editing .app-library-item {
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-md);
}

@media (min-width: 1024px) {
  .nav-item--dyn { display: none; }

  /* ── Sectioned desktop rail ──────────────────────────────────
     One column per section: a small-caps label, a hairline rule,
     then that section's items. The rail is 72px wide, so the label
     is deliberately tiny and the rule carries most of the grouping. */
  .nav-section {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-sm);
  }
  .nav-section-label {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    padding: var(--sp-xs) 2px 0;
    line-height: 1.2;
  }
  .nav-section-rule {
    width: 40px;
    height: 1px;
    margin: 0 auto var(--sp-xs);
    background: var(--glass-border);
  }
}