/* The tab bar, on its own so the MAP can wear it too.
   ------------------------------------------------------------------------
   This used to live in shell.css. The map is a standalone document at the
   repo root with its own stylesheet, and it could not link shell.css without
   also inheriting .btn, input and body rules that fight its own — so the one
   piece both need is its own file. app/*.html link shell.css AND this;
   map*.template.html links only this.

   It depends on --surface, --surface-2, --line, --ink, --muted and --focus,
   which both palettes already define, and falls back for --again, which only
   shell.css has. --nav-h is defined HERE and nowhere else. */
/* ---- the tab bar -------------------------------------------------------- */
/* Rendered by nav.js into <nav id="tabs">, which is the FIRST element in the
   body on every page. Above 760px it is a slim sticky bar at the top; below,
   it detaches and fixes itself to the bottom, where thumbs are. DOM order is
   top-first because that is where it lives on the wider of the two layouts and
   where the tab order should start in both. */
:root{
  /* The bar's footprint, as two numbers a host page can subtract from a
     fixed-height layout. Exactly one is ever non-zero: above 760px the bar is
     a sticky strip at the TOP and takes --top-h; below, it is fixed to the
     BOTTOM and takes --nav-total. Both are always DEFINED so that
     `calc(100dvh - var(--top-h) - var(--nav-total))` is valid at every width —
     an undefined custom property makes the whole declaration invalid, and the
     map silently fell 48px past the bottom of the screen when it did. */
  --top-h:48px; --nav-h:56px; --nav-total:0px;
}
#tabs{
  display:flex; align-items:center; gap:2px;
  position:sticky; top:0; z-index:55; height:var(--top-h);
  padding:0 14px; background:var(--surface); border-bottom:1px solid var(--line);
}
#tabs a{
  display:flex; align-items:center; gap:7px; text-decoration:none;
  color:var(--muted); font-size:13px; font-weight:500;
  border:1px solid transparent; border-radius:9px; padding:6px 11px;
  min-height:34px; white-space:nowrap;
}
#tabs a:hover{background:var(--surface-2); color:var(--ink)}
#tabs a[aria-current="page"]{color:var(--focus); border-color:var(--line)}
#tabs svg{width:17px; height:17px; flex:none; stroke:currentColor; fill:none;
          stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
/* `tab-lbl`, not `lbl`: the map's sidebar already owns `.lbl` for its uppercase
   group headings, and the bar arrived wearing them — HOME, WORDS, STUDY, MAP in
   letterspaced small caps. The bar is dropped into pages that were not written
   with it in mind, so it also restates the type properties a host page might
   have set globally rather than inheriting whatever it finds. */
#tabs .tab-lbl{
  display:inline; text-transform:none; letter-spacing:normal;
  font-weight:inherit; font-size:inherit; color:inherit;
}
/* A count that has to be acted on today. Hidden when zero rather than showing
   a "0", which would read as a task rather than as the absence of one. */
#tabs .badge{
  background:var(--again,#C8443A); color:#fff; border-radius:999px; font-size:10.5px;
  font-weight:600; padding:0 5px; min-width:17px; text-align:center;
  line-height:17px;
}

@media (max-width:760px){
  :root{ --top-h:0px }
  /* Scrolling pages keep clear of the bar with padding. A page that is a
     fixed-height layout instead (the map) subtracts --nav-total itself. */
  :root{ --nav-total:calc(var(--nav-h) + env(safe-area-inset-bottom)) }
  body{padding-bottom:var(--nav-total)}
  #tabs{
    position:fixed; left:0; right:0; top:auto; bottom:0; z-index:50;
    justify-content:space-around; gap:0; border-bottom:0;
    height:calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding:0 4px env(safe-area-inset-bottom);
    background:var(--surface); border-top:1px solid var(--line);
    /* The bar sits over scrolling content on iOS; without this the tinted
       translucency shows the list sliding under the labels. */
    backdrop-filter:saturate(140%) blur(8px);
  }
  #tabs a{
    flex:1; flex-direction:column; gap:2px; padding:7px 2px 5px;
    font-size:10.5px; border:0; border-radius:0; justify-content:center;
    min-height:var(--nav-h);
  }
  #tabs a[aria-current="page"]{border:0}
  #tabs svg{width:21px; height:21px}
  #tabs .badge{
    position:absolute; transform:translate(13px,-9px);
    padding:0 4px; min-width:15px; line-height:15px; font-size:9.5px;
  }
  /* The bar IS the navigation on a phone, so the in-header duplicates go. */
  .wide-only{display:none !important}
}
@media (min-width:761px){
  .narrow-only{display:none !important}
}
