/* TOCHKA_PHOTO_NAV_20261102_V1
   ONLY the bottom navigation. The approved hero, 7-day icons,
   user records, tabs, content and all existing click handlers stay intact.
   Sprite tiles are photographed crops of the user's own approved references.
   12 tiles in a 4-by-3 sheet, female sheet shares all neutral tiles. */
.app > nav.nav.photo-nav-ready{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:7px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
  padding:8px !important;
}
body .app > nav.nav.photo-nav-ready > button.nav-photo-card,
body[data-gender="male"] .app > nav.nav.photo-nav-ready > button.nav-photo-card,
body[data-gender="female"] .app > nav.nav.photo-nav-ready > button.nav-photo-card{
  appearance:none;
  position:relative !important;
  display:block !important;
  flex:0 0 155px !important;
  order:var(--nav-order, 20) !important;
  min-width:155px !important;
  max-width:155px !important;
  width:155px !important;
  height:124px !important;
  min-height:124px !important;
  padding:0 !important;
  margin:0 !important;
  gap:0 !important;
  border:1px solid rgba(240,214,165,.68) !important;
  border-radius:17px !important;
  background:transparent !important;
  box-shadow:0 2px 8px rgba(0,14,11,.19) !important;
  color:#fffaf0 !important;
  opacity:1 !important;
  overflow:hidden !important;
  cursor:pointer;
  scroll-snap-align:start;
  isolation:isolate;
  text-align:center;
  font-size:12px;
  line-height:1.17;
  font-weight:650;
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card::before,
.app > nav.nav.photo-nav-ready > button.nav-photo-card::after,
body[data-gender="male"] .app > nav.nav.photo-nav-ready > button.nav-photo-card::before,
body[data-gender="male"] .app > nav.nav.photo-nav-ready > button.nav-photo-card::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-premium-icon,
.app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-premium-label{
  display:none !important;
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-art{
  display:block;
  position:absolute;
  inset:0;
  z-index:0;
  background-image:url("./assets/nav-photos-male-20261102.webp");
  background-size:400% 300%;
  background-repeat:no-repeat;
  background-position:var(--nav-x) var(--nav-y);
  filter:saturate(1.02) contrast(1.04);
  pointer-events:none;
}
body[data-gender="female"] .app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-art{
  background-image:url("./assets/nav-photos-female-20261102.webp");
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
    rgba(4,17,15,.02) 0%,
    rgba(4,17,15,.13) 36%,
    rgba(5,20,16,.67) 62%,
    rgba(3,18,14,.94) 100%);
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-foreground{
  display:flex;
  position:absolute;
  inset:0;
  z-index:2;
  align-items:center;
  justify-content:flex-end;
  flex-direction:column;
  padding:0 6px 11px;
  gap:6px;
  color:#fffaf1;
  pointer-events:none;
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-icon{
  display:block;
  width:24px;
  height:24px;
  flex:none;
  stroke:#fff7e6;
  fill:none;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-title{
  display:block;
  width:100%;
  max-width:100%;
  color:#fffaf1;
  font:650 11px/1.14 system-ui,-apple-system,Arial,sans-serif;
  letter-spacing:-.10px;
  text-align:center;
  text-wrap:balance;
  text-shadow:0 2px 5px #06160e,0 1px 2px #06160e;
  overflow-wrap:normal;
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card.active,
body[data-gender="male"] .app > nav.nav.photo-nav-ready > button.nav-photo-card.active,
body[data-gender="female"] .app > nav.nav.photo-nav-ready > button.nav-photo-card.active{
  background:transparent !important;
  color:#fffaf1 !important;
  opacity:1 !important;
  font-weight:700 !important;
  border:2px solid #f6d895 !important;
  box-shadow:0 0 0 1px rgba(255,222,154,.45),0 4px 14px rgba(8,43,27,.33) !important;
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card:hover{
  border-color:#f9d99b !important;
  transform:translateY(-1px);
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card:active{
  transform:translateY(1px);
}
.app > nav.nav.photo-nav-ready > button.nav-photo-card:focus-visible{
  outline:3px solid #ffdc84 !important;
  outline-offset:3px !important;
}
@media(min-width:900px){
 body .app > nav.nav.photo-nav-ready > button.nav-photo-card{
   flex-basis:170px !important;min-width:170px !important;max-width:170px !important;
   width:170px !important;height:137px !important;min-height:137px !important;
 }
 .app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-icon{height:28px;width:28px}
 .app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-title{font-size:12px}
}
@media(max-width:580px){
 .app > nav.nav.photo-nav-ready{gap:6px !important;padding:6px !important}
 body .app > nav.nav.photo-nav-ready > button.nav-photo-card,
 body[data-gender="male"] .app > nav.nav.photo-nav-ready > button.nav-photo-card,
 body[data-gender="female"] .app > nav.nav.photo-nav-ready > button.nav-photo-card{
   flex-basis:129px !important;min-width:129px !important;max-width:129px !important;
   width:129px !important;height:119px !important;min-height:119px !important;
   border-radius:14px !important;
 }
 .app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-foreground{padding:0 4px 8px;gap:5px}
 .app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-title{font-size:10.5px;line-height:1.12}
 .app > nav.nav.photo-nav-ready > button.nav-photo-card .nav-photo-icon{height:22px;width:22px}
}
@media(prefers-reduced-motion:reduce){
 .app > nav.nav.photo-nav-ready > button.nav-photo-card{transition:none}
}