/* Primary tasks under the thumb.

   Fixed to the bottom on a phone, where reaching the top of the screen means
   changing grip — roughly three quarters of phone interaction is done with a
   thumb, and the top third of a modern screen is out of its arc. On a wide
   screen the same list becomes an ordinary row under the header, because a
   floating bar there is just clutter.

   The label is 15px on the owner's call. Both platforms set their tab labels
   smaller than that (Apple 11pt, Material 12sp) and the icon carries the
   recognition, but the rule here is that nothing in this portal is smaller
   than 15px, and one exception is one too many. */

.task-bar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  /* Wrapping rather than clipping: at 200% zoom two labels no longer fit one
     row, and a bar that spills is a bar that drags the whole document
     sideways. Two rows cost height nobody misses; a cut-off tab costs a
     destination. */
  display: flex; flex-wrap: wrap; max-width: 100%;
  background: var(--c-surface);
  border-top: 1px solid var(--c-line);
  /* Without this the last 34px of every item sit under the iPhone gesture
     bar and cannot be tapped at all. Requires viewport-fit=cover. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.task-bar-item {
  flex: 1 1 6rem; min-width: 0;
  display: grid; place-items: center; align-content: center; gap: 2px;
  min-height: 64px; padding: var(--space-2) var(--space-1);
  color: var(--c-ink-muted); text-decoration: none; font-weight: 700;
  text-align: center;
}
.task-bar-icon { font-size: 1.4rem; line-height: 1; }
/* At 200% page zoom three labels no longer fit 390px side by side, and the
   third one was simply cut off — a navigation item you cannot read is a
   navigation item you do not have. It wraps instead and the bar grows. */
/* place-items: center gives every grid item justify-self: center, and a
   centred item sizes to max-content — so the label ignored the column it sat
   in and "Moje rezerwacje" stayed on one 236px line inside a 65px slot.
   Capping it at the area's width is what lets the wrap actually happen. */
.task-bar-label { font-size: var(--t-meta); line-height: 1.1; max-width: 100%; overflow-wrap: anywhere; }
.task-bar-item.is-current { color: var(--c-ink); }
.task-bar-item.is-current .task-bar-icon { color: var(--c-accent); }
.task-bar-item:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }

/* The bar covers the end of the page, so give the page somewhere to end.
   Sized for the tall case: at 200% zoom the labels wrap and the bar grows
   past its 64px minimum, and content that ends underneath it can never be
   scrolled clear. */
body:has(.task-bar) main { padding-bottom: calc(6.5rem + var(--space-6)); }
/* Under 320 CSS pixels the bar wraps to two rows and grows well past its
   64px minimum — that is what a 390px phone looks like at 200% zoom. Content
   ending underneath it there can never be scrolled clear, so the reserve
   doubles. Above that width the extra space would just be a hole. */
@media (max-width: 20rem) {
  body:has(.task-bar) main { padding-bottom: calc(12rem + var(--space-6)); }
}

@media (min-width: 48rem) {
  .task-bar {
    position: static; border-top: 0; border-bottom: 1px solid var(--c-line);
    justify-content: flex-start; gap: var(--space-2);
    padding: 0 var(--space-4);
  }
  .task-bar-item {
    flex: 0 0 auto; grid-auto-flow: column; gap: var(--space-2);
    min-height: var(--tap); padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
  }
  .task-bar-icon { font-size: 1.1rem; }
  .task-bar-label { font-size: var(--t-body); }
  .task-bar-item.is-current { background: var(--c-accent-soft); }
  body:has(.task-bar) main { padding-bottom: var(--space-5); }
}