/*
 * Phone navigation and the tablet edge fade (tickets 932, 971).
 *
 * Linked after every feature sheet and before depth.css, so these rules win over the navbar rules of
 * console.css and console-simple.css by source order, and depth.css still has the last word on glass,
 * reduced transparency and forced colors. The markup is js/tabbar.js plus the static nodes in index.html.
 *
 * At 760px and narrower: the navbar is one 52px row (brand, Workbench icon button, search button, status dot,
 * evaluation dot, gear, account button; Help is in the account menu, ticket 001156), the section links leave it, and a tab bar sits at the bottom of the screen above the home
 * indicator with the same entries (the four programs, then one Workbench tab for Dashboard, Fleet, Investigations, Evidence, Deception and Reports), no "More" tab
 * and no sheet. The local nav row (ticket 968, js/local_nav.js) paints under the top bar as one 44px row of
 * the section's pages that scrolls sideways. From 761px to 1023px the top bar's scrolling link row gets an
 * edge fade. Above that nothing here paints. Style rules only ever come from this file's classes: the
 * console's CSP allows no style attribute.
 */

/* ---- Not painted above 760px ------------------------------------------------------------ */

.tabbar,
.topbar-search,
.global-search__cancel,
.nav-trigger--workbench .nav-trigger__icon {
  display: none;
}

/* ---- Every width: keep the top bar and the page clear of a sensor housing ------------------ */

/* index.html asks for viewport-fit=cover at every width, so Safari stops insetting the page. A notched
   phone held in landscape (812 to 932px wide) gets the desktop shell, and its side insets are 0 only in
   portrait. Each side keeps its usual 1.5rem and grows to the inset when that is larger, so no other
   device changes. The phone shell below sets its own gutters (12px bar, 1rem page). */
.navbar__inner {
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
.view-root {
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}

/* ---- 761px to 1023px: the scrolling link row fades where more links wait ----------------- */

/* js/app.js puts fade-start on the row once it has scrolled from its first link, and fade-end while more
   links wait past its right edge. A row that fits has neither, so its first link is never faded. */
@media (760px < width <= 1023px) {
  .nav-primary.fade-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }
  .nav-primary.fade-start {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
    mask-image: linear-gradient(to right, transparent, #000 24px);
  }
  .nav-primary.fade-start.fade-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
}

/* ---- The local nav row's page links: the same fade, at every width ------------------------ */

/* js/app.js puts the same two classes on `.local-nav__links` (ticket 971) once the links overflow it, which
   only happens on a phone. A row that fits has neither, so the rules need no width query. */
.local-nav__links.fade-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.local-nav__links.fade-start {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px);
  mask-image: linear-gradient(to right, transparent, #000 24px);
}
.local-nav__links.fade-start.fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

/* ---- 760px and narrower: the phone shell -------------------------------------------------- */

@media (max-width: 760px) {
  :root {
    --topbar-h: 52px;
    --tabbar-h: 56px;
    --tabbar-space: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    /* .view-root's min-height reads this one. */
    --navbar-h: var(--topbar-h);
  }

  /* The top bar: one row, brand on the left, the tools on the right. */
  .navbar__inner {
    flex-wrap: nowrap;
    row-gap: 0;
    gap: 0.4rem;
    /* The navbar's 1px bottom border brings the whole bar to --topbar-h. */
    height: calc(var(--topbar-h) - 1px);
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  .brand {
    min-width: 0;
  }
  .brand__mark {
    width: 96px;
  }
  .nav-primary {
    display: none;
  }
  .navbar__tools {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 0.2rem;
  }

  /* The search field is out of the bar until the search button opens it. */
  #global-search:not(.is-overlay-open) {
    display: none;
  }
  .topbar-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-dim);
    cursor: pointer;
  }
  .topbar-search:hover,
  .topbar-search[aria-expanded="true"] {
    color: var(--gold);
  }
  /* The gear (ticket 969) is the same 44px icon button as the search button. */
  .nav-link--icon {
    box-sizing: border-box;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }
  .nav-link--icon svg {
    width: 22px;
    height: 22px;
  }
  /* Help leaves the phone bar (ticket 001156). With the evaluation dot showing the bar needs about 387px
     (12 + brand 96 + Workbench 44 + Search 44 + dot 28 + Help 44 + gear 44 + account 44 + gaps + 12), so the
     tools row shrank under the Workbench button and the button painted over Search by 12px at 375px and 27px
     at 360px. Help frees 47px (44 and its 3.2px gap); a smaller wordmark would put its text under the 12px
     floor. The route stays: the account menu's "Help and definitions" line opens the Definitions page, and
     that page's local nav row holds Start here. Only the Help link is named, so the gear (Settings or
     Account) and the account button stay. */
  .navbar__tools .nav-link--icon[data-section="help"] {
    display: none;
  }

  /* The Workbench menu (ticket 001155). It is a sibling of .nav-primary, so hiding the links above left it in
     the bar. At 390px its 100px pill (label and caret) plus the brand and four 44px tools does not fit one
     row: the tools row shrank under the pill and the pill painted over the search button (44 x 31 px) and the
     Station picker (35 x 31 px). It stays, because it is the only phone route to Fleet, Case Files, Evidence,
     Deception and Reports (the tab bar's Workbench tab opens the Dashboard), but as the same 44px round icon
     button as the search button and the gear. The label leaves the screen and not the accessibility tree, so
     the button keeps its name. `.navbar` outranks programs.css, which loads later with margin-left: 0.15rem. */
  .navbar .nav-trigger--workbench {
    box-sizing: border-box;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: 0;
    padding: 0;
    border-radius: 50%;
  }
  .nav-trigger--workbench .nav-trigger__icon {
    display: block;
    width: 22px;
    height: 22px;
  }
  .nav-trigger--workbench .nav-trigger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nav-trigger--workbench .nav-trigger__caret {
    display: none;
  }

  /* The local nav row (ticket 968) paints again here: console.css hides it at 760px and narrower, and this
     rule wins by specificity yet leaves a row js/local_nav.js hid (a section with one page) hidden. One 44px
     row of page links under the top bar. The lit tab names the section, so the section name leaves the row
     and the links start at the page gutter. The links scroll inside their own row and never widen the
     page; js/app.js centres the current link and fades the end that has more. */
  .local-nav:not([hidden]) {
    display: block;
  }
  .local-nav__inner {
    min-width: 0;
    gap: 0;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .local-nav__section {
    display: none;
  }
  .local-nav__links {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .local-nav__links::-webkit-scrollbar {
    display: none;
  }
  .local-nav__link {
    flex: none;
    min-height: 44px;
    white-space: nowrap;
  }

  /* The status dot keeps a 44px target for its title; it shows only while the console is busy or offline
     (js/app.js setStatus, ticket 970), and console.css clips its label to the bare dot at 1151px and
     narrower. */
  .api-status {
    flex: none;
    min-width: 28px;
    justify-content: center;
    padding: 0;
    border: 0;
  }

  /* The evaluation pill (ticket 970) shows only for an evaluation or an ended one, and here paints only its
     dot: "Eval 12/40" next to the search button, the gear and the avatar ran past the right edge at 390px.
     The title and aria-label (js/app.js loadLicenseChip) still carry the words; console.css already clips
     the full label below 1532px. */
  #license-status {
    flex: none;
    min-width: 28px;
    justify-content: center;
    padding: 0;
    border: 0;
  }
  .license-status__short {
    display: none;
  }

  /* The account menu hangs under the top bar across the screen. */
  #nav-more-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 0.4rem);
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--topbar-h) - var(--tabbar-space) - 1rem);
  }

  /* The search overlay: a full-width plate under the top bar, the field and Cancel on one row and the
     results list below. */
  #global-search.is-overlay-open {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.6rem max(12px, env(safe-area-inset-right)) 0.6rem max(12px, env(safe-area-inset-left));
    max-height: calc(100dvh - var(--topbar-h) - var(--tabbar-space));
    overflow-y: auto;
    background: linear-gradient(var(--plane-2), var(--plane-2));
    -webkit-backdrop-filter: blur(var(--hud-blur-2)) saturate(140%);
    backdrop-filter: blur(var(--hud-blur-2)) saturate(140%);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: var(--elev-3);
  }
  #global-search.is-overlay-open > .global-search {
    position: static;
    min-width: 0;
    flex: none;
  }
  #global-search.is-overlay-open .global-search__input {
    min-height: 44px;
    /* 16px keeps a phone browser from zooming the page when the field takes focus. */
    font-size: 1rem;
    padding-right: 0.8rem;
  }
  #global-search.is-overlay-open .global-search__results {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    margin-top: 0.5rem;
    box-shadow: none;
  }
  #global-search.is-overlay-open .global-search__hit {
    min-height: 44px;
    align-items: center;
  }
  #global-search.is-overlay-open .global-search__cancel {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.6rem;
    border: 0;
    background: transparent;
    color: var(--gold);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
  }

  /* The tab bar: glass on plane 2 (depth.css), 56px plus the home indicator's inset. */
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 46;
    display: flex;
    box-sizing: border-box;
    height: var(--tabbar-space);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  .tabbar[hidden] {
    display: none;
  }
  .tabbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(var(--plane-2), var(--plane-2));
    -webkit-backdrop-filter: blur(var(--hud-blur-2)) saturate(140%);
    backdrop-filter: blur(var(--hud-blur-2)) saturate(140%);
    box-shadow: var(--elev-3);
  }
  .tabbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(222, 199, 107, 0.34) 30%,
      rgba(255, 255, 255, 0.16) 65%,
      transparent
    );
  }
  .tabbar__item {
    position: relative;
    /* Ticket 1015 sized this for seven tabs; the rapid redesign has five (four programs and Workbench). A long label such as "Crown Jewels" still
       outgrows an equal share on a narrow phone, so
       each tab starts from its own content width and shares what is left: nothing is clipped at 375px and
       up, and a window too narrow for all five still shrinks them (the label ellipsis below). */
    flex: 1 1 auto;
    /* 44px is the least tap target (Apple HIG) the short "CTI" tab could otherwise fall under. */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--ink-dim);
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar__icon {
    width: 24px;
    height: 24px;
    flex: none;
  }
  .tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 12px, the console's floor (design note section 4). "Investigations" is 78px wide at that size, exactly
       one tab at 390px, so the slight tightening keeps it on one line instead of clipped by a pixel. */
    font-size: 0.75rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .tabbar__item:hover,
  .tabbar__item.is-active {
    color: var(--gold);
  }
  .tabbar__item.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 28%;
    right: 28%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--gold);
  }

  /* The page gutter console-simple.css gives .view-root at this width, kept clear of the insets. */
  .view-root {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
  /* Nothing hides behind the bar, and the toast rides above it. */
  body:not(.signed-out):not(.is-kiosk):not(.is-board) .view-root {
    padding-bottom: calc(var(--tabbar-space) + 1.5rem);
  }
  body:not(.signed-out):not(.is-kiosk):not(.is-board) .toast {
    bottom: calc(var(--tabbar-space) + 0.8rem);
  }
  body.signed-out .tabbar,
  body.is-kiosk .tabbar,
  body.is-board .tabbar {
    display: none !important;
  }
}

/* Reduced transparency and forced colors: solid plates, as depth.css does for the navbar and the menus. */
@media (max-width: 760px) and (prefers-reduced-transparency: reduce) {
  .tabbar::before,
  #global-search.is-overlay-open {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 760px) and (forced-colors: active) {
  .tabbar::before,
  .tabbar::after {
    display: none;
  }
  .tabbar {
    background: Canvas;
    border-top: 1px solid CanvasText;
  }
  #global-search.is-overlay-open {
    background: Canvas;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .tabbar__item.is-active::before {
    background: Highlight;
  }
}

@media print {
  .tabbar,
  .topbar-search {
    display: none !important;
  }
}