/* A single, optically balanced SVG family for the persistent phone tabs. */
@media (max-width:760px), (pointer:coarse) and (max-height:500px) and (max-width:1000px) {
  .app-nav {
    --tab-muted:#626765;
    --tab-selected:#962638;
    --tab-surface:#f0e3e5;
    gap:0;
    padding-inline:8px;
    box-shadow:0 -4px 20px #00000004;
  }
  :root[data-theme=dark] .app-nav {
    --tab-muted:#a2aaa9;
    --tab-selected:#f29aaa;
    --tab-surface:#34242a;
    box-shadow:0 -4px 20px #00000012;
  }
  .app-nav a {
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3px;
    min-width:0;
    min-height:44px;
    padding:5px 0;
    border-radius:10px;
    color:var(--tab-muted);
    text-transform:none;
    letter-spacing:0;
    font-size:10px;
    font-weight:500;
    line-height:14px;
  }
  .app-nav .app-nav-icon {
    display:grid;
    place-items:center;
    flex:none;
    width:46px;
    height:30px;
    border-radius:10px;
  }
  .app-nav svg {display:block;width:22px;height:22px;stroke-width:1.7}
  .app-nav a[aria-current=page] {color:var(--ink)}
  .app-nav a[aria-current=page] .app-nav-icon {color:var(--tab-selected);background:var(--tab-surface)}
  .app-nav a[aria-current=page] svg {stroke-width:1.7}
  .app-nav a[aria-current=page] .app-nav-label {font-weight:650}
  .app-nav a::after,.app-nav .nav-motion-marker {display:none!important}
  .app-nav a:focus-visible {outline-offset:-3px;outline:2px solid var(--tab-selected)}
  @media (prefers-reduced-motion:no-preference) {
    .app-nav-icon {transition:background-color .18s ease,color .18s ease}
  }
}