@layer components {
  /* Height of the fixed footer bar while it is shown (phones) — layouts
     that fill the viewport (the kanban board) subtract it, and blitz
     dropdowns end above the bar instead of behind it. The bar takes its
     height FROM the variable (below), so the two cannot drift apart. */
  :root {
    --footer-nav-height: 0rem;
    --dropdown-viewport-bottom-inset: var(--footer-nav-height);
  }

  @media (max-width: 640px) {
    :root {
      --footer-nav-height: 4.6rem;
    }
  }

  .footer-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--footer-nav-height);
    box-sizing: border-box;
    /* Above page content (e.g. card favorite stars at z-index 2),
       but below the note-edit toolbar layer (FAB 50, rail 70). */
    z-index: 40;
    background-color: var(--footer-background);
    color: white;
    padding: 5px 5px 15px 5px;
    display: none;
    gap: 2px;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 640px) {
    .footer-nav {
      display: flex;
    }
  }

  /* Seven items share the bar evenly; labels stay small and never push
     siblings off a 390px screen. */
  .footer-nav > a,
  .footer-nav > button,
  .footer-add-dropdown {
    flex: 1 1 0;
    min-width: 0;
  }

  .footer-nav > a,
  .footer-nav > button,
  .footer-add-dropdown .dropdown-toggle {
    --icon-size: 1.75rem;
    width: 100%;
    padding: 3px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    &:hover {
      background-color: #6d6a6a;
      text-decoration: none;
    }
    &.selected {
      background-color: #6d6a6a;
    }
  }

  .footer-add-dropdown {
    --dropdown-menu-top: auto;
    --dropdown-menu-bottom: 100%;
  }

  .footer-add-dropdown .dropdown-menu {
    font-size: 1rem;
    color: var(--dropdown-menu-color);
    background-color: var(--dropdown-menu-background-color);
  }

  .footer-add-dropdown .dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .footer-nav-text {
    font-size: 0.62rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}