/* The phone tab bar (ADR-0033): the shop's tabs fixed to the bottom of the screen, icon over label,
   the current one in red. Styles opens a sheet of style names above the bar and dims the page behind
   it. Wide screens use the bar under the header instead (category-nav.css). */

@layer components {
  .tab-bar { display: none; }

  @media (max-width: 819.98px) {
    /* Room for the bar: the page ends above it, and toasts and other bottom bars sit on top of it. */
    :root:has(.tab-bar) { --tab-bar-h: calc(60px + env(safe-area-inset-bottom)); }
    body:has(.tab-bar) { padding-bottom: var(--tab-bar-h); }

    .tab-bar {
      position: fixed;
      inset-inline: 0;
      bottom: 0;
      z-index: var(--z-header);
      display: block;
      padding-bottom: env(safe-area-inset-bottom);
      border-top: 1px solid var(--bp-line);
      background: var(--bp-surface);
      box-shadow: 0 -8px 24px -16px rgb(40 26 12 / .35);
      /* Stays put while the page under it changes (page-transition.css). */
      view-transition-name: tab-bar;
    }

    /* The page behind an open sheet, dimmed. A tap on it closes the sheet (category-nav.js). */
    .tab-bar::before {
      content: "";
      position: fixed;
      inset: 0;
      background: var(--bp-scrim);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--dur), visibility var(--dur);
    }

    .tab-bar:has([aria-expanded="true"])::before { opacity: 1; visibility: visible; }

    .tab-bar__list {
      position: relative;
      display: grid;
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      margin: 0;
      padding: 0;
      list-style: none;
      background: var(--bp-surface);
    }

    .tab-bar__tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 100%;
      height: 60px;
      padding: 0 4px;
      border: 0;
      background: transparent;
      color: var(--bp-ink-2);
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      text-decoration: none;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .tab-bar__tab .icon { font-size: 24px; transition: transform var(--dur) var(--ease); }
    .tab-bar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .tab-bar__tab[aria-current],
    .tab-bar__tab[aria-expanded="true"] { color: var(--bp-brand-600); }
    .tab-bar__tab[aria-current] .icon,
    .tab-bar__tab[aria-expanded="true"] .icon { font-variation-settings: 'FILL' 1; }
    .tab-bar__tab:active .icon { transform: scale(.9); }
    .tab-bar :focus-visible { outline-offset: -4px; }

    /* Styles: a sheet that rises from the bar, its names set large in the display serif. */
    .tab-bar__sheet {
      position: absolute;
      inset-inline: 0;
      bottom: 100%;
      max-height: 65dvh;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--space-5) var(--gutter) var(--space-4);
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
      background: var(--bp-surface);
      box-shadow: var(--shadow-lg);
      animation: tab-bar-sheet-in var(--dur) var(--ease);
    }

    .tab-bar__sheet-title {
      margin: 0 0 var(--space-2);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      color: var(--bp-ink-2);
    }

    .tab-bar__sheet-list { margin: 0; padding: 0; list-style: none; }

    .tab-bar__sheet-link {
      display: flex;
      align-items: center;
      min-height: 48px;
      border-bottom: 1px solid var(--bp-line);
      color: var(--bp-heading);
      font-family: var(--font-display);
      font-size: 22px;
      font-style: italic;
      font-weight: 300;
      text-decoration: none;
    }

    .tab-bar__sheet-list li:last-child .tab-bar__sheet-link { border-bottom: 0; }
    .tab-bar__sheet-link[aria-current] { color: var(--bp-brand-600); }
    .tab-bar__sheet-link--depth-1 { padding-inline-start: var(--space-5); }
    .tab-bar__sheet-link--depth-2 { padding-inline-start: var(--space-10); }
  }

  @keyframes tab-bar-sheet-in { from { opacity: 0; transform: translateY(12px); } }

  @media (prefers-reduced-motion: reduce) {
    .tab-bar__sheet { animation: none; }
  }
}