/* Patch 0.1.10.0.0 - mobile floating navigation + accessibility contrast correction.
   Keeps desktop navigation normal, but turns mobile navigation into a bottom-left floating command panel. */

/* Accessibility mini panel contrast must never become white text on white surfaces. */
.accessibility-panel .btn,
.accessibility-panel button.btn,
.accessibility-panel .accessibility-open,
.accessibility-panel .accessibility-close{
  color:#ffffff !important;
  text-shadow:0 1px 2px rgba(0,0,0,.62) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.045) 38%,rgba(8,10,18,.92) 100%) !important;
  border-color:rgba(130,160,255,.34) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 10px 26px rgba(0,0,0,.34) !important;
}
.accessibility-panel .btn.primary{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(80,106,255,.34) 38%,rgba(24,28,65,.96)) !important;
  border-color:rgba(150,175,255,.52) !important;
}
.accessibility-panel .btn.secondary,
.accessibility-panel .accessibility-close{
  background:radial-gradient(90% 100% at 50% -35%,rgba(255,255,255,.34),rgba(255,255,255,.08) 36%,transparent 58%),linear-gradient(180deg,#252b32,#11161b 48%,#05070b) !important;
}
.accessibility-panel .btn:hover,
.accessibility-panel button.btn:hover{
  filter:brightness(1.12) saturate(1.05) !important;
  border-color:rgba(160,185,255,.68) !important;
}
html[data-theme="light"] .accessibility-panel .btn,
html[data-theme="light"] .accessibility-panel button.btn,
html[data-theme="light"] .accessibility-panel .accessibility-open,
html[data-theme="light"] .accessibility-panel .accessibility-close{
  color:#ffffff !important;
}

@media(max-width:920px){
  .site-header{
    min-height:64px;
    padding:10px 4vw;
    justify-content:center;
  }
  .site-header .brand{
    max-width:calc(100vw - 32px);
  }
  .site-header .brand-copy{
    min-width:0;
  }
  .site-header .brand-name,
  .site-header .brand-title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Mobile menu control becomes a floating command button, not a header item. */
  .nav-toggle{
    position:fixed !important;
    left:10px;
    bottom:10px;
    top:auto;
    z-index:1002;
    display:grid !important;
    place-items:center;
    width:50px;
    height:50px;
    min-height:50px;
    padding:0 !important;
    border-radius:999px !important;
    font-size:0 !important;
    line-height:0;
    color:#fff !important;
    background:radial-gradient(90% 100% at 50% -35%,rgba(255,255,255,.42),rgba(255,255,255,.10) 34%,transparent 56%),linear-gradient(180deg,#262d34,#11171e 48%,#05070b) !important;
    border:1px solid rgba(236,244,255,.48) !important;
    box-shadow:inset 0 2px 2px rgba(255,255,255,.38),inset 0 -3px 7px rgba(0,0,0,.82),0 16px 36px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.08) !important;
  }
  .nav-toggle::before{
    content:"" !important;
    display:block !important;
    position:relative !important;
    inset:auto !important;
    z-index:2 !important;
    width:20px !important;
    height:14px !important;
    border-radius:0 !important;
    background:linear-gradient(#fff,#fff) top/100% 2px no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat,linear-gradient(#fff,#fff) bottom/100% 2px no-repeat !important;
    opacity:.94 !important;
    box-shadow:none !important;
  }
  .nav-toggle[aria-expanded="true"]::before{
    width:20px !important;
    height:20px !important;
    background:linear-gradient(45deg,transparent 44%,#fff 46%,#fff 54%,transparent 56%),linear-gradient(-45deg,transparent 44%,#fff 46%,#fff 54%,transparent 56%) !important;
  }
  .nav-toggle::after{
    top:0 !important;
    height:100% !important;
  }

  /* Overlay sits over the page, anchored above the bottom-left menu button. */
  .nav-backdrop{
    z-index:990;
    background:rgba(2,4,10,.54);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .site-nav{
    position:fixed !important;
    left:10px !important;
    right:10px !important;
    bottom:74px !important;
    top:auto !important;
    z-index:1001 !important;
    width:auto !important;
    max-height:min(72vh,620px) !important;
    overflow:auto !important;
    padding:14px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    border-radius:24px !important;
    border:1px solid rgba(140,170,255,.28) !important;
    background:radial-gradient(90% 70% at 20% 0%,rgba(93,137,255,.20),transparent 48%),linear-gradient(180deg,rgba(15,18,32,.97),rgba(4,6,12,.985)) !important;
    box-shadow:0 30px 95px rgba(0,0,0,.68),inset 0 1px 1px rgba(255,255,255,.12) !important;
    transform:translate(-10px,18px) scale(.96) !important;
    transform-origin:left bottom !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:transform .36s cubic-bezier(.18,.9,.18,1),opacity .28s ease !important;
  }
  html[data-theme="light"] .site-nav{
    background:radial-gradient(90% 70% at 20% 0%,rgba(93,137,255,.16),transparent 48%),linear-gradient(180deg,rgba(255,255,255,.98),rgba(230,236,248,.98)) !important;
    box-shadow:0 28px 70px rgba(30,41,59,.26),inset 0 1px 1px rgba(255,255,255,.92) !important;
  }
  .site-nav.open{
    transform:translate(0,0) scale(1) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .site-nav a{
    min-height:50px !important;
    padding:13px 16px !important;
    border-radius:16px !important;
    color:var(--text) !important;
    background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.028)) !important;
    border:1px solid rgba(140,170,255,.16) !important;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.09),0 8px 20px rgba(0,0,0,.12) !important;
  }
  html[data-theme="light"] .site-nav a{
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,245,249,.76)) !important;
    color:#111827 !important;
    border-color:rgba(15,23,42,.12) !important;
  }
  .site-nav a:hover{
    border-color:rgba(93,137,255,.42) !important;
    background:linear-gradient(180deg,rgba(93,137,255,.18),rgba(255,255,255,.045)) !important;
  }
  html[data-theme="light"] .site-nav a:hover{
    background:linear-gradient(180deg,rgba(224,234,255,.98),rgba(248,250,252,.88)) !important;
  }
}

@media(max-width:520px){
  .site-header{padding:10px 12px;}
  .site-header .brand{justify-content:center;}
  .site-header .brand-mark{width:40px;height:40px;border-radius:13px;}
  .site-header .brand-name{font-size:.98rem;}
  .site-nav{left:8px !important;right:8px !important;bottom:72px !important;border-radius:22px !important;}
}