/* Shared floating navigation: content scrolls behind the translucent capsule. */
:root{--nav-float-gap:14px;--nav-float-height:72px;--nav-float-glass:rgba(255,255,255,.70)}
html .phone>.screen{bottom:0!important;padding-bottom:calc(var(--nav-float-height) + var(--nav-float-gap) + env(safe-area-inset-bottom,0px) + 24px);scroll-padding-bottom:calc(var(--nav-float-height) + var(--nav-float-gap) + env(safe-area-inset-bottom,0px) + 24px)}
html[data-visual-mode] .phone>.tabbar{
  position:absolute;z-index:24;top:auto;bottom:calc(var(--nav-float-gap) + env(safe-area-inset-bottom,0px));
  left:0;right:0;margin-inline:auto;transform:none;width:min(760px,calc(100% - 24px));height:var(--nav-float-height);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr;gap:2px;padding:6px;
  border:1px solid rgba(86,108,136,.28);border-radius:999px;overflow:hidden;
  background:var(--nav-float-glass);box-shadow:0 8px 28px rgba(20,38,61,.18),inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter:blur(6px) saturate(130%);backdrop-filter:blur(6px) saturate(130%);
}
html[data-visual-mode] .phone>.tabbar a{
  min-width:0;min-height:48px;padding:5px 1px;gap:4px;border:0;border-radius:999px;
  background:transparent;box-shadow:none;color:var(--ink);font-size:11px;line-height:1.1;
  transition:background .16s ease,color .16s ease;
}
html[data-visual-mode] .phone>.tabbar a svg{width:24px;height:24px;transform:none}
html[data-visual-mode] .phone>.tabbar a[aria-current="page"]{color:#183B59;background:rgba(184,211,235,.88);box-shadow:none}
html[data-visual-mode="serious"] .phone>.tabbar a[aria-current="page"]{color:var(--serious-action);background:color-mix(in srgb,var(--serious-accent) 36%,transparent)}
html[data-visual-mode] .phone>.tabbar a:hover:not([aria-current="page"]){background:rgba(130,156,183,.18)}
html[data-visual-mode] .phone>.tabbar a:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media(min-width:1024px){:root{--nav-float-gap:20px;--nav-float-height:76px}html[data-visual-mode] .phone>.tabbar{width:min(760px,calc(100% - 48px))}html[data-visual-mode] .phone>.tabbar a{font-size:12px}}
@media(max-width:380px){html[data-visual-mode] .phone>.tabbar{width:calc(100% - 16px);padding:5px;gap:0}html[data-visual-mode] .phone>.tabbar a{font-size:9px}}
@media(prefers-reduced-transparency:reduce){:root{--nav-float-glass:rgba(255,255,255,.97)}}
@media(prefers-reduced-motion:reduce){html[data-visual-mode] .phone>.tabbar a{transition:none}}

/* Pixel labels stay in Maven, but with readable spacing and lighter weight. */
html[data-visual-mode="pixel"] .phone>.tabbar a{font-weight:600;font-size:12px;letter-spacing:0;line-height:1.2}
@media(max-width:380px){html[data-visual-mode="pixel"] .phone>.tabbar a{font-size:11px}}
/* The mode label is UI text, not a tiny pixel-art caption. */
html[data-visual-mode] .visual-mode-switch{min-width:80px;min-height:38px;padding:5px 7px;gap:5px;font-weight:500;font-size:12px;line-height:1.2;letter-spacing:0}
html[data-visual-mode] .visual-mode-switch__label{font-weight:500;font-size:12px;line-height:1.2;letter-spacing:0;color:var(--ink)}
html[data-visual-mode] .visual-mode-switch__track{width:26px;height:15px}
html[data-visual-mode] .visual-mode-switch__thumb{width:7px;height:7px}
html[data-visual-mode="pixel"] .visual-mode-switch__thumb{transform:translateX(11px)}
@media(max-width:759px){html[data-visual-mode] .visual-mode-switch{min-width:42px;width:42px;min-height:44px;padding:3px;gap:2px}html[data-visual-mode] .visual-mode-switch__label{font-size:11px}html[data-visual-mode] .visual-mode-switch__track{width:24px;height:14px}html[data-visual-mode] .visual-mode-switch__thumb{width:6px;height:6px}html[data-visual-mode="pixel"] .visual-mode-switch__thumb{transform:translateX(10px)}}
html[data-visual-mode="serious"] .header-contact .header-whatsapp{border-radius:999px;width:48px;min-width:48px;padding:8px;aspect-ratio:1;background:#EFF4FA;border-color:#CAD6E4}
html[data-visual-mode="serious"] .header-contact .contact-details .header-whatsapp{background:#EFF4FA;border-color:#CAD6E4}
@media(max-width:759px){html[data-visual-mode="serious"] .header-contact .header-whatsapp{width:42px;min-width:42px;padding:6px}}
@media(max-width:380px){
  html[data-visual-mode] .header-contact .header-whatsapp{width:36px!important;min-width:36px;padding:4px}
  html[data-visual-mode] .header-book .contact-desktop{display:none}
  html[data-visual-mode] .header-book .contact-mobile{display:inline}
  html[data-visual-mode] .header-contact .header-book{padding-inline:5px;min-width:40px}
  html[data-visual-mode] .appbar .logo{width:36px!important;height:36px!important;flex-basis:36px}
}