/* SPDX-License-Identifier: MIT
 *
 * Copied from hire4real/static/css/components/mobile-bottom-nav.css (MIT, same author),
 * 2026-10-04, 137 lines. Colour tokens replaced per doctrine 8.
 *
 * Here it is the mobile bottom nav, renamed back from our `bottom-nav.css` (SL_05D Part C);
 * base.html's bar carries their classes (T5).
 * Their class names, geometry, transitions and breakpoints are kept as they are; their header and
 * notes follow this one unchanged, except that a colour value a note quotes is elided as [colour]
 * (doctrine 8 reaches comments too).
 *
 * DIVERGES FROM hire4real/static/css/components/mobile-bottom-nav.css: adds one rule of this
 *   site's own at their breakpoint: html { scroll-padding-bottom }, so a link scrolled to or a
 *   field focused is never left under their 64 px bar (WCAG 2.2, 2.4.11). Theirs has none. The
 *   bar's items carry no icons here: ours would be pictures drawn for four other destinations.
 */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  z-index: 48;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 769px) {
  .mobile-bottom-nav {
    display: none;
  }
}

.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: var(--ink-2);
  font-family: var(--font-family-sans);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.mbn-item.active {
  color: var(--earth);
}

.mbn-item:active {
  background: var(--shadow-float);
}

.mbn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mbn-label {
  line-height: 1;
}

/* Bottom sheet */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.bottom-sheet[data-open="true"] {
  pointer-events: auto;
}

.bottom-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--shadow-float);
  opacity: 0;
  transition: opacity 250ms ease-out;
}

.bottom-sheet[data-open="true"] .bottom-sheet__backdrop {
  opacity: 1;
}

.bottom-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface-2);
  border-radius: 16px 16px 0 0;
  padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 250ms ease-out;
}

.bottom-sheet[data-open="true"] .bottom-sheet__panel {
  transform: translateY(0);
}

.bottom-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  margin: 0 auto var(--space-4);
}

.bottom-sheet__menu a,
.bottom-sheet__menu button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  color: var(--ink);
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}

.bottom-sheet__menu a:active,
.bottom-sheet__menu button:active {
  background: var(--shadow-float);
}

/* ---- Stone Lane's own markup: the rules its classes need, declared in the header above. ---- */
@media (max-width: 768px) {
  /* A link scrolled to or a field focused is never left under the bar (WCAG 2.2, 2.4.11). */
  html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0)); }
}