/*
  The app header in the new design, from the `--ds-*` tokens in design.css.

  Under this layout only, the old palette's two names are pointed at the new ground and ink, so an
  element that still paints with `--background` and `--text` (the offline bar, the core toast) sits
  on the same colours as the page around it.
*/

body:has(hub-layout) {
  --background: var(--ds-bg);
  --text: var(--ds-ink);
  background: var(--ds-bg);
  color: var(--ds-ink);
}

html:has(hub-layout) {
  scroll-padding-top: calc(var(--ds-header, 52px) + 12px);
}

/*
  The system face for every page under this header, the redesigned ones and the older pages the
  avatar menu opens (/privacy, /terms, /usage, /install, /labs) alike. app.css sets Ronzino on
  `*:not(svg path)`; one type selector more is enough to win. A page that opts into `[ds]` gets the
  same face from design.css.
*/
hub-layout,
hub-layout *:not(svg path) {
  font-family: var(--ds-font);
}

hub-layout :is(h1, h2):not(svg path) {
  font-family: var(--ds-font-display);
}

hub-layout {
  position: relative;
  display: block;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ds-bg);
  color: var(--ds-ink);
}

hub-layout [hub-bar] {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  height: calc(var(--ds-header, 52px) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-glass);
  color: var(--ds-ink);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

hub-layout [hub-brand] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}

hub-layout [hub-mark],
hub-layout [hub-mark] svg {
  display: block;
  width: 26px;
  height: 26px;
}

hub-layout [hub-word] {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

hub-layout [hub-tabs] {
  display: flex;
  gap: 2px;
  margin-left: 12px;
  font-size: 13.5px;
  font-weight: 500;
}

hub-layout [hub-tab] {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--ds-r-tab, 8px);
  color: var(--ds-mute);
  text-decoration: none;
  transition: color var(--ds-fast, 120ms) ease, background-color var(--ds-fast, 120ms) ease;
}

hub-layout [hub-tab]:hover {
  color: var(--ds-ink);
}

/* Icons are for the phone's bottom bar only. */
hub-layout [hub-tab] > .ds-i {
  display: none;
}

/*
  The current tab. The attribute is set by the logic; the `:has()` rules draw it from the first
  paint, before any script has run, and after a navigation that kept this layout.
*/
hub-layout [hub-tab][aria-current='page'],
body:has(:is(atomics-space-collection-view, atomics-space-creation-view)) hub-layout [hub-tab='spaces'],
body:has(atomics-starters-view) hub-layout [hub-tab='starters'],
body:has(
    :is(
      atomics-marketplace-view,
      atomics-marketplace-apps-view,
      atomics-marketplace-kits-view,
      atomics-marketplace-clipart-view,
      atomics-marketplace-catalog-view
    )
  )
  hub-layout
  [hub-tab='marketplace'] {
  background: var(--ds-fill);
  color: var(--ds-ink);
}

hub-layout [hub-gap] {
  flex: 1 1 auto;
}

hub-layout [hub-search] {
  display: flex;
  align-items: center;
  min-width: 0;
}

hub-layout [hub-search]:empty {
  display: none;
}

hub-layout [hub-theme] .ds-i {
  width: 17px;
  height: 17px;
}

hub-layout [hub-signin][hidden],
hub-layout [hub-bar] [hidden] {
  display: none;
}

/* The avatar is the menu's button: a bare circle, the photo or the initials in it. */
hub-layout [hub-avatar] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ds-ink);
  cursor: pointer;
}

hub-layout [hub-avatar]:hover > [hub-more] {
  opacity: 0.7;
}

hub-layout [hub-avatar] > [hub-more] {
  width: 18px;
  height: 18px;
}

hub-layout [hub-avatar][aria-expanded='true'] > .ds-avatar {
  box-shadow: 0 0 0 2px var(--ds-accent);
}

hub-layout [hub-face] > [hub-initials][hidden],
hub-layout [hub-face] > [hub-photo][hidden] {
  display: none;
}

hub-layout [hub-face] > [hub-photo] {
  position: absolute;
  inset: 0;
}

/* The menu. Its rows are `atomics-menu`'s; what is here is only this menu's own. */

hub-layout [hub-menu] {
  width: 260px;
}

hub-layout [hub-menu] [hidden] {
  display: none;
}

hub-layout [hub-who] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 6px;
  min-width: 0;
}

hub-layout [hub-who] > b {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

hub-layout [hub-who] > small {
  color: var(--ds-mute);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

hub-layout [hub-menu] [role^='menuitem'] > .ds-i {
  width: 15px;
  height: 15px;
}

hub-layout [hub-locales] {
  display: contents;
}

hub-layout [hub-menu-foot] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 2px;
  color: var(--ds-mute);
  font-size: 11.5px;
}

/* The connection bar docks under the header rather than over it, and pushes the page down. */
hub-layout > atomics-offline-banner {
  position: sticky;
  top: calc(var(--ds-header, 52px) + env(safe-area-inset-top));
  z-index: 29;
}

hub-layout > atomics-offline-banner [bar] {
  padding-top: 0.6rem;
}

/*
  Phone: the tabs leave the header for a bar along the bottom, with icons, the way an app's tab bar
  sits. The wordmark goes; the page keeps clear of the bar, and so do toasts.
*/
@media (max-width: 720px) {
  /*
    A backdrop filter makes its element the containing block of every fixed descendant, so the
    tab bar would be pinned to the bottom of the header instead of the screen. The glass moves to
    a layer behind the header's contents.
  */
  hub-layout [hub-bar] {
    gap: 10px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  hub-layout [hub-bar]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ds-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  hub-layout [hub-word] {
    display: none;
  }

  hub-layout [hub-tabs] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    gap: 0;
    box-sizing: border-box;
    height: calc(56px + env(safe-area-inset-bottom));
    margin: 0;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 1px solid var(--ds-line);
    background: var(--ds-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    font-size: 11px;
    font-weight: 600;
  }

  hub-layout [hub-tab] {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border-radius: 0;
  }

  hub-layout [hub-tab] > .ds-i {
    display: block;
    width: 22px;
    height: 22px;
  }

  hub-layout [hub-tab][aria-current='page'],
  body:has(:is(atomics-space-collection-view, atomics-space-creation-view)) hub-layout [hub-tab='spaces'],
  body:has(atomics-starters-view) hub-layout [hub-tab='starters'],
  body:has(
      :is(
        atomics-marketplace-view,
        atomics-marketplace-apps-view,
        atomics-marketplace-kits-view,
        atomics-marketplace-clipart-view,
        atomics-marketplace-catalog-view
      )
    )
    hub-layout
    [hub-tab='marketplace'] {
    background: transparent;
    color: var(--ds-accent);
  }

  hub-layout [hub-search]:not(:empty) {
    flex: 1 1 auto;
  }

  hub-layout [hub-theme],
  hub-layout [hub-avatar] {
    width: 40px;
    height: 40px;
  }

  hub-layout {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  body:has(hub-layout) > [ds][ds-toast] {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body:has(hub-layout) > [toast] {
    bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body:has(hub-layout):has(> [ds-toast]:not([leaving])) > [toast] {
    bottom: calc(132px + env(safe-area-inset-bottom));
  }
}