/* ============================================================
   TAB BAR — mobile bottom navigation, Figma 82:12109
   ------------------------------------------------------------
       <nav class="ice-tabbar" data-surface="light">
         <a class="ice-tab" data-active>…</a>
       </nav>

   NOTE the markup: the tab bar is always data-surface="light",
   including on the dark theme. In 24:3725 it is a white glass bar
   sitting on a dark page — the light variant placed on a dark
   background, not a dark variant of the bar. It is one of the two
   places the surface system earns its keep.
   ============================================================ */

.ice-tabbar {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-8);

  border-start-start-radius: var(--radius-24);
  border-start-end-radius: var(--radius-24);
  border: var(--border-w) solid;
  border-color: var(--elev-primary-4-border-lit) var(--elev-primary-4-border-lit)
                var(--elev-primary-4-border)     var(--elev-primary-4-border);
  border-block-end: none;

  /* The densest glass in the system, elevation 4. Its shadow is
     shadow XL thrown UPWARD — the bar hangs off the bottom edge,
     so there is no downward token for it. */
  background-image: var(--elev-primary-4-image);
  box-shadow: 0 -12px 36px -12px color-mix(in srgb, var(--shadow-ink) 24%, transparent);
  backdrop-filter: blur(var(--shadow-xl-blur));
  -webkit-backdrop-filter: blur(var(--shadow-xl-blur));
}

.ice-tab {
  display: flex;
  flex: 1 0 0;
  min-inline-size: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  block-size: var(--height-2xl);
  border-radius: var(--radius-16);

  font-size: var(--type-body-s-size);
  font-weight: var(--weight-medium);
  line-height: var(--type-body-s-leading);
  letter-spacing: var(--type-body-s-track);
  color: var(--fg-medium);
  opacity: .7;
  cursor: pointer;

  transition: opacity var(--dur-fast) var(--ease-out),
              background-image var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.ice-tab > .ice-icon {
  inline-size: var(--icon-l);
  block-size:  var(--icon-l);
  opacity: .5;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.ice-tab:hover { opacity: 1; }
.ice-tab:hover > .ice-icon { opacity: 1; }

/* Active — elevation secondary-1 pressed in by inner shadow M, an
   ink label at full strength, and an icon drawn solid: the sheet
   fills it with a radial ice-blue-600 → ice-blue-800. */
.ice-tab[data-active] {
  cursor: default;          /* you are already here — nothing to click */
  opacity: 1;
  color: var(--ice-grey-900);
  font-weight: var(--weight-semibold);
  background-image: var(--elev-secondary-1-image);
  box-shadow: var(--shadow-inner-m);
  backdrop-filter: blur(var(--shadow-inner-m-blur));
  -webkit-backdrop-filter: blur(var(--shadow-inner-m-blur));
}
.ice-tab[data-active] > .ice-icon {
  opacity: 1;
  color: var(--ice-blue-600);
}