/*
 * 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, search button, status dot, evaluation dot, gear,
 * account button), 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 {
  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;
  }

  /* 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 Connector picker, when the console manages several, stays in the bar but small. */
  .connector-picker {
    width: auto;
    max-width: 6.5rem;
    flex: 0 1 6.5rem;
  }

  /* 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;
  }
}