/*
  The way back. 23.9.2026, after Itzik found himself on a page with no
  road home: "אין לי דרך לחזור לאתר וכך בכל מקום".

  Every page on the site carries the same pill, so the answer to "how do
  I get back" is the same wherever he, or anyone else, has landed. It
  sits at the bottom because that is where a thumb is on a phone, and it
  is fixed so it never scrolls out of reach. Colours come from the page
  itself through color-scheme, which keeps it legible on the pale
  workout pages and on the dark ones without either knowing about it.
*/
.home-bar{
  position: fixed;
  inset-block-end: calc(14px + env(safe-area-inset-bottom));
  inset-inline-start: calc(14px + env(safe-area-inset-left));
  z-index: 2147483000;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;              /* a real touch target, not a decoration */
  padding: 10px 16px;
  border-radius: 999px;

  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  text-decoration: none;
  color: #17190F;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(23,25,15,.12);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
}
.home-bar:hover{ background: rgba(255,255,255,.97); }
.home-bar:focus-visible{ outline: 3px solid #9A5A3F; outline-offset: 3px; }

.home-bar svg{ width: 17px; height: 17px; flex: none; }

@media (prefers-color-scheme: dark){
  .home-bar{
    color: #F1ECE2;
    background: rgba(28,28,25,.88);
    border-color: rgba(241,236,226,.16);
  }
  .home-bar:hover{ background: rgba(38,38,34,.97); }
}

/* Printing a recipe or a workout should not print a navigation pill. */
@media print{ .home-bar{ display: none; } }