/* Phone layout (under 640px): bottom tab bar, slim top bar, big touch targets. Own file so it can't collide with components.css edits.
   Markup: js/ui/mobilenav.js. Wider than 640px none of this shows. */
#mnav{display:none}
@media (max-width:640px){
  :root{--nav-h:calc(58px + env(safe-area-inset-bottom,0px))}
  :root:has(.cm[data-in],.kb[data-in]){--nav-h:0px}            /* inside a conversation or a file the bar steps aside; the page head has Back */
  :root:has(.cm[data-in],.kb[data-in]) #mnav{display:none}
  body{padding-bottom:var(--nav-h);overscroll-behavior-y:none}
  html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
  #main{min-height:calc(100dvh - var(--bar-h) - var(--nav-h))}
  .cm,.kb,.cvp{height:calc(100dvh - var(--top-h,var(--bar-h)) - var(--nav-h))}

  /* top bar: brand, one status pill, a few icons. The tabs moved to the bottom. */
  .top-in .tabs{display:none}
  .top-in{padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(6px,env(safe-area-inset-right,0px))}
  .top-in .brand{margin-right:auto}
  .top-in .top-status{display:flex;margin-left:0;gap:4px}
  .top-in .top-status>span:not(:first-child),.top-in .top-status>.top-route:not([data-mode=limited]){display:none}
  .top-in .top-icons .more{display:none}                       /* More lives in the bottom bar */
  .top-in .btn[data-kind=icon]{min-width:44px;height:44px}
  .top-in .top-status>span{height:32px}

  /* bottom bar */
  #mnav{display:block}
  .mn-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:var(--nav-h);padding:0 max(4px,env(safe-area-inset-left,0px)) env(safe-area-inset-bottom,0px);border-top:1px solid var(--line);background:color-mix(in oklch,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .mn-t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;border:0;background:none;color:var(--ink-3);font:inherit;font-size:11px;font-weight:var(--w-med);text-decoration:none;cursor:pointer;touch-action:manipulation}
  .mn-t .ic{width:23px;height:23px}
  .mn-t span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mn-t[aria-current=page]{color:var(--accent)}
  .mn-t[aria-current=page]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 2px 2px;background:var(--accent)}
  .mn-t:active{background:var(--hover)}
  .mn-b{position:absolute;top:6px;left:calc(50% + 6px);min-width:16px;padding:0 4px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-ink);font-style:normal;font-size:10.5px;font-weight:var(--w-bold);line-height:16px;text-align:center}

  /* More sheet */
  .mn-scrim{position:fixed;inset:0;z-index:48;background:oklch(0% 0 0 / .4);animation:mn-fade .15s ease-out}
  .mn-sheet{position:fixed;left:0;right:0;bottom:var(--nav-h);z-index:49;max-height:calc(100dvh - var(--nav-h) - 56px);overflow:auto;overscroll-behavior:contain;padding:6px 10px 10px;border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;background:var(--surface);box-shadow:var(--e2);animation:mn-up .18s ease-out}
  .mn-grab{width:36px;height:4px;margin:4px auto 8px;border-radius:2px;background:var(--line-2)}
  .mn-h{padding:10px 10px 4px;font-size:var(--fs-meta);font-weight:var(--w-med);color:var(--ink-3)}
  .mn-i{display:flex;flex-direction:column;justify-content:center;gap:1px;width:100%;min-height:48px;padding:6px 12px;border:0;border-radius:var(--r-m);background:none;color:var(--ink);font:inherit;font-size:16px;text-align:left;text-decoration:none;cursor:pointer;touch-action:manipulation}
  .mn-i b{font-weight:var(--w-med)}
  .mn-i span{color:var(--ink-3);font-size:var(--fs-meta)}
  .mn-i:active,.mn-i[aria-current=page]{background:var(--hover)}
  @keyframes mn-up{from{transform:translateY(24px);opacity:0}}
  @keyframes mn-fade{from{opacity:0}}
  @media (prefers-reduced-motion:reduce){.mn-scrim,.mn-sheet{animation:none}}

  /* a tab's own pages: a scrolling chip row with comfortable targets */
  .subtabs{height:48px;gap:6px;padding:0 12px;scroll-snap-type:x proximity}
  .subtab{height:34px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-pill);scroll-snap-align:start}
  .subtab[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

  /* touch targets and iOS zoom: inputs at 16px, buttons 44px high */
  input,select,textarea,.input{font-size:16px!important}
  .btn{min-height:40px}
  .btn[data-size=s]{min-height:36px}
  .page{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));padding-bottom:calc(var(--s6,32px) + 8px)}
  a,button{touch-action:manipulation}
  .panel{width:100%;padding-bottom:env(safe-area-inset-bottom,0px)}
  table{max-width:100%}
  .tbl,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* knowledge: both search boxes one width, section heads stack so the note and its button don't squeeze */
}
@supports not (selector(:has(*))){@media (max-width:640px){.cm,.kb{height:calc(100dvh - var(--bar-h))}}}