/* ======================================================================
   THE APP SHELL ON A SMALL SCREEN.
   Loaded last, deliberately: it is the layer that overrides the desktop
   shell, and the desktop shell is defined across base.css and four files
   after it. Anything here applies only below the breakpoint.

   What was here before was an attempt at a horizontal strip of nav items -
   `nav.sidebar { flex-direction: row; overflow-x: auto; }` in forms.css. It
   could not work: the twenty-six nav items are not children of the sidebar,
   they sit inside #navCalOps and #navQualitySystem, so the row had two
   children and each was a tall column of links. The result was a screen and
   a half of menu above every screen in the application, on every phone.

   A drawer instead. The nav is one tap away and takes no room until it is
   asked for, which is what the whole navigation of a 26-screen application
   needs on a 390px display.
   ====================================================================== */

/* The bar exists only on small screens; the desktop shell is unchanged. */
#appBar { display: none; }

@media (max-width: 760px) {

  #app { flex-direction: row; }        /* the drawer is out of flow */

  /* ---- the bar ---- */
  #appBar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
    background: var(--brand-dark);
    color: #DCE8ED;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }
  #navToggle {
    /* 44px of touch target around a 20px icon - the button is used with a
       thumb, often with a glove on at the bench. */
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 9px; color: #DCE8ED; padding: 0; flex: none;
  }
  #navToggle:active { background: rgba(255, 255, 255, 0.10); }
  #navToggle svg { width: 20px; height: 20px; }
  #appBar .ab-brand {
    font-family: var(--mono); font-size: var(--fs-title); font-weight: 600;
    color: #fff; letter-spacing: 0.02em; line-height: 1.1;
  }
  #appBar .ab-sub {
    display: block; font-family: var(--sans); font-size: var(--fs-label); font-weight: 400;
    letter-spacing: 0.06em; text-transform: uppercase; color: #7FA3B4;
  }
  #appBar .ab-who {
    margin-left: auto; font-size: var(--fs-body); color: #A9C3CE; text-align: right;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%;
  }

  /* ---- the drawer ---- */
  nav.sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(84vw, 300px);
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-100%);
    /* hidden rather than merely off-screen, so nothing in a closed drawer is
       reachable by tab or read by a screen reader */
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  #app.nav-open nav.sidebar {
    transform: none;
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
  }

  #navScrim {
    position: fixed; inset: 0; z-index: 55;
    background: rgba(9, 20, 26, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity .22s ease;
  }
  #app.nav-open #navScrim { opacity: 1; pointer-events: auto; }

  /* The whole width belongs to the work. */
  /* The desktop shell moves this column over by the nav's width; the drawer is
     out of flow entirely, so on a phone it starts at the edge. Added with the
     fixed-nav change, 23.09.2026 - without it every phone screen sat 220px to
     the right of where it should. */
  #mainCol { width: 100%; margin-left: 0; }
  main { padding: 18px 14px 28px; }

  /* Two long labels and their subtitles took 95px of a 844px screen before
     anything of the screen itself appeared. The tabs stay - they switch half
     the application - and their explanations go. */
  #modeBar { padding: 8px 10px 0; gap: 6px; }
  .mode-tab { flex: 1; padding: 9px 10px 9px 26px; font-size: var(--fs-body); }
  /* .mode-tab .mode-tab-sub, not .mode-tab-sub: overview.css says the first
     and wins on specificity however late this file loads. */
  .mode-tab .mode-tab-sub { display: none; }
  .mode-tab .mode-dot { top: 13px; left: 11px; width: 8px; height: 8px; }

  /* The logo block carries its own inline padding and a 190px image, so the
     drawer opened with a third of a screen of letterhead before the first
     link. Inline styles are what !important is for. */
  [data-aqcal-logo-block] { padding: 12px 12px 14px !important; }
  [data-aqcal-logo-block] > div { padding: 8px 12px !important; }
  [data-aqcal-logo-block] img { max-width: 124px !important; }

  /* In a drawer these belong back: the sign-out and the account are the
     reason a person opens it as often as the nav is. */
  .nav-item { white-space: nowrap; }
  .nav-spacer { display: none; }
  .nav-user { display: block; margin-top: 18px; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  nav.sidebar, #navScrim { transition: none; }
}