/* App-style chrome. Everything here is inert in a normal browser tab except the install button;
   it switches on when the site runs installed (display-mode: standalone). */
.tabbar { display: none; }

@media (display-mode: standalone) {
  html { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
  body { -webkit-user-select: none; user-select: none; padding-bottom: 0; }
  /* keep text selectable where people actually copy from */
  pre, code, textarea, input, select, .mono-out, output { -webkit-user-select: text; user-select: text; }
  a, button, summary { -webkit-touch-callout: none; }

  /* strip the "web page" layer: marketing hero, SEO copy, FAQ, cross-link tiles, footer, breadcrumbs */
  .hero, .crumbs, .prose, .faq, .answer, .site-footer, .skip, .ext-cta, .nav-ext,
  main > section.wrap:has(.bento) { display: none; }
  main { padding-block: 1rem 2rem; }

  /* the plugin tab is a landing screen: keep its hero (with the "open in browser" button) */
  .page-plugin .hero.compact { display: block; padding-block: 1.5rem; }
  .page-plugin .hero .lede { color: var(--muted); }
  .page-plugin .hero .btn { min-height: 48px; }

  /* native-feeling title bar */
  .site-header { padding-top: env(safe-area-inset-top); background: color-mix(in oklab, var(--bg) 88%, transparent); }
  .site-header .wrap { flex-wrap: nowrap; padding-block: .55rem; }
  .brand small { display: none; }

  .card { border-radius: 16px; box-shadow: none; }
  .btn, .icon-btn, select, input:not([type="checkbox"]):not([type="radio"]) { min-height: 44px; }
  .btn:hover { transform: none; filter: none; }
  .toast { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
}

/* phones: top nav becomes a bottom tab bar */
@media (display-mode: standalone) and (max-width: 720px) {
  .site-header .nav { display: none; }
  .site-header .icon-btn { margin-left: auto; }
  main { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .tabbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; inset: auto 0 0 0; z-index: 60;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--surface) 90%, transparent);
    backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    display: grid; justify-items: center; gap: .15rem; padding: .4rem .25rem;
    color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 650; border-radius: 12px;
  }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
}

/* floating install pill: browser tab only, never inside the installed app */
.install-fab { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70; display: flex; align-items: center; border-radius: 99px; background: var(--brand); color: var(--accent-ink); box-shadow: 0 8px 28px -6px rgb(0 0 0 / .35); }
.install-fab button { font: inherit; font-weight: 700; font-size: .88rem; color: inherit; background: none; border: 0; cursor: pointer; }
.install-go { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem .5rem .65rem 1rem; }
.install-go svg { width: 16px; height: 16px; }
.install-x { padding: .65rem .85rem .65rem .35rem; font-size: 1.1rem; line-height: 1; opacity: .7; }
.install-x:hover { opacity: 1; }
.install-tip { position: fixed; right: 1rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 70; max-width: 18rem; padding: .75rem 1rem; border-radius: 14px; background: var(--text); color: var(--bg); font-size: .85rem; font-weight: 600; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.install-tip.show { opacity: 1; transform: none; }
@media (display-mode: standalone) { .install-fab, .install-tip { display: none; } }