/* ============================================================
   The one nav (the 2026-10-21 redesign, docs/decisions/app-ui.md): Home ·
   Training · Games · Me, drawn by app/app.js on every signed-in page.

   A bottom bar on a phone, a left rail on a wide screen (821 px and up, the
   width at which the old sidebars stopped being a top bar). Every rule here
   hangs off html.annex-nav-on or an .annex-* class, which app.js adds only
   for a signed-in person, so a signed-out page (the public landing page, a
   guest's GeoQuiz) renders exactly as it would without this file.

   Colours are the landing page's (the old sidebar's ink on its dark
   ground), written out here rather than read from a page's :root, because
   the pages that load this don't share token names. The active tab is the
   stamp red lightened enough to read on the dark ground (4.6:1).

   --annex-nav-b is how much the bar takes off the bottom of the screen;
   fixed things that sit at the bottom (the update toast, a game's start
   screen) add it, so nothing hides under the bar.
   ============================================================ */

.annex-nav{
  /* Above a page's own sticky header (the board's band is 50) and below its
     overlays: the board's scrim, day popover and editor (70-95) and the
     games' panels cover the nav while they are open, as they should. */
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:#20241F; color:#E7E2D4;
  font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  border-top:1px solid rgba(231,226,212,0.16);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-sizing:border-box;
}
.annex-nav *{box-sizing:border-box;}
.annex-nav ul{list-style:none; margin:0; padding:0;}
.annex-tabs{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);}
.annex-tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:56px; padding:4px 2px; color:#C9C3B2; text-decoration:none;
  font-size:12px; font-weight:500; line-height:1.2;
}
.annex-tab.on{color:#F0846C; font-weight:600;}
.annex-tab:hover{color:#F7F4EC;}
.annex-tab:focus-visible,.annex-sub-link:focus-visible{
  outline:2px solid #F7F4EC; outline-offset:-3px;
}
.annex-ico{display:block; flex:none;}
.annex-brand,.annex-subs,.annex-avatar,.annex-me-name{display:none;}

html.annex-nav-on{--annex-nav-b:calc(57px + env(safe-area-inset-bottom,0px));}
html.annex-nav-on:not(.annex-nav-bar) body{padding-bottom:var(--annex-nav-b);}
/* A full-screen game between rounds only: during one the bar is gone. */
html.annex-nav-paused .annex-nav{display:none;}
html.annex-nav-paused{--annex-nav-b:0px;}

/* What the nav replaces: each page's own way back, the board's home link
   and the old sidebars. Hidden, not removed, so signed out they stand. */
html.annex-nav-on [data-annex-back],
html.annex-nav-on .home-link,
html.annex-nav-on .annex-old-sidebar{display:none !important;}

/* The Training tools list (UI round 2): a ticked list in a ⋯ menu. On the
   board it sits inside the board's own menu, which styles the box; on
   Race, Atlas and the Lab app.js draws the ⋯ button too, top right of the
   page's header, where the board keeps its own. The menu is the board's
   card colours written out, since these pages share no tokens. */
.annex-tools-h{
  margin:0; padding:10px 14px 4px; font-family:'IBM Plex Mono','JetBrains Mono',monospace;
  font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#5C5A4E;
}
.annex-tool{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border-radius:6px;
  color:#20241F; text-decoration:none; font:500 15px/1.2 'IBM Plex Sans',system-ui,sans-serif;
}
.annex-tool::before{content:''; width:14px; flex:none;}
.annex-tool[aria-checked="true"]{font-weight:700;}
.annex-tool[aria-checked="true"]::before{content:'\2713';}
.annex-tool:hover,.annex-tool:focus-visible{background:#EFEADC; outline:none;}
.annex-more{position:relative; float:right; margin:0 0 0 12px; z-index:40;}
.annex-more-btn{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
  background:transparent; color:inherit; border:1px solid currentColor; border-radius:8px; cursor:pointer; opacity:.85;
}
.annex-more-btn[aria-expanded="true"]{opacity:1; border-color:#B23A23;}
.annex-more-btn:focus-visible{outline:2px solid #B23A23; outline-offset:2px;}
.annex-more-menu{
  position:absolute; right:0; top:calc(100% + 6px); min-width:220px; padding:4px;
  background:#FFFFFF; border:1px solid #D9D1BF; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.annex-more-menu[hidden]{display:none;}

@media (min-width:821px){
  html.annex-nav-on:not(.annex-nav-bar){--annex-nav-b:0px;}
  html.annex-nav-on:not(.annex-nav-bar) body{padding-bottom:0; padding-left:220px;}
  html:not(.annex-nav-bar) .annex-nav{
    top:0; right:auto; width:220px; padding:26px 12px 18px;
    border-top:0; display:flex; flex-direction:column; overflow-y:auto;
  }
  html:not(.annex-nav-bar) .annex-brand{
    display:block; padding:0 12px 22px; color:#E7E2D4;
    font-family:'Big Shoulders Stencil','IBM Plex Sans',sans-serif; font-weight:800; font-size:26px;
    text-transform:uppercase; line-height:1; letter-spacing:0.5px;
  }
  html:not(.annex-nav-bar) .annex-brand span{color:#E0674C;}
  html:not(.annex-nav-bar) .annex-brand .annex-mark{display:inline-block; vertical-align:-3px; margin:0 8px 0 -2px;}
  html:not(.annex-nav-bar) .annex-tabs{display:flex; flex-direction:column; gap:2px; flex:1;}
  html:not(.annex-nav-bar) .annex-tab{
    flex-direction:row; justify-content:flex-start; gap:12px; min-height:44px;
    padding:0 12px; border-radius:6px; font-size:15px; color:#C9C3B2;
  }
  html:not(.annex-nav-bar) .annex-tab.on{background:rgba(231,226,212,0.10); color:#F7F4EC;}
  html:not(.annex-nav-bar) .annex-tab[aria-current="page"]{box-shadow:inset 3px 0 0 #E0674C;}
  html:not(.annex-nav-bar) .annex-ico{width:20px; height:20px;}
  html:not(.annex-nav-bar) .annex-subs{display:flex; flex-direction:column; margin:2px 0 6px;}
  html:not(.annex-nav-bar) .annex-sub-link{
    display:flex; align-items:center; min-height:36px; padding:0 12px 0 44px; border-radius:6px;
    color:#B4AE9E; text-decoration:none; font-size:14px;
  }
  html:not(.annex-nav-bar) .annex-sub-link:hover{color:#F7F4EC; background:rgba(231,226,212,0.06);}
  html:not(.annex-nav-bar) .annex-sub-link[aria-current="page"]{color:#F7F4EC; font-weight:600; box-shadow:inset 3px 0 0 #E0674C;}
  /* Me sits at the rail's foot, with the person's initial and name. */
  html:not(.annex-nav-bar) .annex-item-me{margin-top:auto; padding-top:16px;}
  html:not(.annex-nav-bar) .annex-item-me .annex-ico{display:none;}
  html:not(.annex-nav-bar) .annex-avatar{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:30px; height:30px; margin-left:-5px; border-radius:50%;
    background:#B23A23; color:#fff; font-weight:600; font-size:14px;
  }
  html:not(.annex-nav-bar) .annex-me-label{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  html:not(.annex-nav-bar) .annex-me-name{display:inline;}
}

/* The bar at every width (the games): centred, never wider than a phone's. */
@media (min-width:821px){
  html.annex-nav-bar .annex-tabs{max-width:520px; margin:0 auto;}
}

@media print{
  .annex-nav,.annex-more{display:none !important;}
  html.annex-nav-on body{padding:0 !important;}
}