/* Codify Fleet — installed-app shell.
 *
 * EVERYTHING here is gated on `display-mode: standalone` (or the iOS
 * equivalent, applied via the .cf-installed class from cf-app.js). Opened in a
 * normal browser tab the app is byte-for-byte what it was before: desktop users
 * and the existing sidebar are untouched. Only the installed app changes.
 */

/* ---------- installed, any size ---------- */
@media all and (display-mode: standalone) {
  html { overscroll-behavior-y: none; }          /* no rubber-band / pull-to-refresh */
  body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;    /* no grey flash on tap */
    -webkit-touch-callout: none;                 /* no long-press callout */
  }
  /* Chrome (nav, headers, buttons) shouldn't feel like selectable text.
     Real content stays selectable. */
  .sidebar, .topbar, .cf-tabbar { -webkit-user-select: none; user-select: none; }
}

/* ---------- installed on a phone: real app navigation ---------- */
@media all and (display-mode: standalone) and (max-width: 820px) {
  /* The desktop sidebar is not a phone pattern — the tab bar replaces it. */
  .sidebar { display: none !important; }

  /* Reclaim the space the sidebar held, whatever it was called. */
  .main, .content, .page, main, .app-main {
    margin-left: 0 !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }

  /* Never sit under the status bar / notch. */
  body { padding-top: env(safe-area-inset-top); }

  /* Room for the tab bar + the home indicator — only when a bar exists. */
  body:has(.cf-tabbar) { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ---------- the tab bar ---------- */
.cf-tabbar { display: none; }

@media all and (display-mode: standalone) and (max-width: 820px) {
  .cf-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(11, 24, 41, .92);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid rgba(148, 163, 184, .16);
  }
  .cf-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;                 /* comfortable thumb target */
    padding: 7px 4px 6px;
    color: #64748b;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease;
  }
  .cf-tabbar svg { width: 22px; height: 22px; fill: currentColor; }
  .cf-tabbar a:active { color: #94a3b8; }
  .cf-tabbar a.is-active { color: #38bdf8; }
  .cf-tabbar a.is-active svg { filter: drop-shadow(0 0 10px rgba(56, 189, 248, .45)); }
}

/* ---------- kill the white flash between pages ----------
   This is a multi-page app: every tap is a full document load, and the default
   white paint between them is the single most "website" thing about it. */
@media all and (display-mode: standalone) {
  html { background: #0b1829; }
  .cf-leaving { opacity: .55; transition: opacity .12s ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-leaving { transition: none; }
}