/* Sky Scout V27: narrow date navigation, center Now, animation below entry fields.
   Scope these changes to the chart page. All calculations and event filters remain unchanged. */
.controls{gap:8px;padding:11px 12px 13px}
.planetwatcher-nav,
html.sky-desktop .planetwatcher-nav{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:760px !important;
  min-height:0 !important;
  height:auto !important;
  padding:6px 8px 8px !important;
  gap:5px !important;
  border-radius:16px !important;
  border:1px solid #b9d0e3 !important;
  background:linear-gradient(140deg,rgba(255,255,255,.79),rgba(228,241,251,.7)) !important;
  box-shadow:0 5px 14px rgba(20,65,109,.09),inset 0 1px 0 #fff !important;
}
.planetwatcher-nav .nav-current,
html.sky-desktop .planetwatcher-nav .nav-current{
  display:flex !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:none !important;
  align-self:center;
  gap:6px;
  border-radius:9px;
  padding:2px 10px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(237,246,253,.38));
  color:#264b6b !important;
  box-shadow:inset 0 1px 0 #fff7;
  font-size:12px !important;
  line-height:1.22 !important;
  text-align:center;
  white-space:nowrap;
}
.planetwatcher-nav .nav-current .nav-clock{margin:0 !important}
.nav-direction-row,
html.sky-desktop .nav-direction-row{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center;
  width:100%;
  min-width:0;
  gap:6px;
  height:30px;
}
.planetwatcher-nav .nav-side,
html.sky-desktop .planetwatcher-nav .nav-side{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-template-rows:30px !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  max-width:none;
  height:30px !important;
  min-height:30px !important;
  gap:0 !important;
  border-radius:999px !important;
  overflow:hidden;
  border:1px solid #a5c1d7;
  background:linear-gradient(180deg,#fff,#e9f3fa 45%,#cfdfec);
  box-shadow:0 3px 7px #264d6c21,inset 0 1px 0 #fff;
}
.planetwatcher-nav .nav-side button,
html.sky-desktop .planetwatcher-nav .nav-side button{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  padding:1px 0 0 !important;
  gap:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  color:#2c5878 !important;
  box-shadow:none !important;
  line-height:1;
  border-radius:0 !important;
}
.planetwatcher-nav .nav-side button+button{border-left:1px solid rgba(104,151,184,.34) !important}
.planetwatcher-nav .nav-arrow,
html.sky-desktop .planetwatcher-nav .nav-arrow{
  display:block;
  position:static;
  font-size:17px !important;
  font-weight:800;
  height:17px;
  min-height:17px;
  line-height:.85 !important;
  margin:0 !important;
}
.planetwatcher-nav .nav-unit,
html.sky-desktop .planetwatcher-nav .nav-unit{
  display:block;
  font-size:9px !important;
  font-weight:720;
  height:10px;
  line-height:10px !important;
  letter-spacing:0;
  margin:0 !important;
  padding:0;
}
.planetwatcher-nav #now,
html.sky-desktop .planetwatcher-nav #now{
  flex:0 0 50px;
  width:50px !important;
  min-width:50px !important;
  max-width:50px !important;
  min-height:30px !important;
  height:30px !important;
  max-height:30px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:750;
  align-self:center;
  line-height:1;
  box-shadow:0 3px 8px #1b517e37,inset 0 1px 0 #ffffff55 !important;
}
/* Date inputs get shorter without removing native picker functionality. */
.controls .date-options{gap:6px}
.controls .date-options .field-label{margin-bottom:3px;font-size:11px}
.controls #dateTime,.controls #dateText,
.controls #applyText{height:33px !important;min-height:33px !important;max-height:33px !important;font-size:12px;padding-top:4px;padding-bottom:4px}
.controls #applyText{padding-left:10px;padding-right:10px}
.controls .date-text-entry{gap:6px}
.controls .pw-animation-toolbar{
  margin:7px auto 1px;
  max-width:760px;
  width:100%;
  min-height:38px;
  gap:7px;
}
.controls .pw-animation-toolbar button,
.controls .pw-animation-settings>summary{
  min-height:38px !important;
  height:38px !important;
  max-height:38px !important;
}
.controls .pw-animation-toolbar .pw-anim-icon{width:38px;flex:0 0 38px}
.controls #pwAnimationRate{margin:0 auto 2px;color:#6a8296;font-size:10px;text-align:center}
html.sky-desktop .planetwatcher-nav .nav-side button{flex:none !important}
@media(max-width:355px){
  .controls{padding-left:8px;padding-right:8px}
  .planetwatcher-nav{padding:6px 5px 8px !important}
  .nav-direction-row{gap:4px}
  .planetwatcher-nav #now{flex-basis:44px;width:44px !important;min-width:44px !important;max-width:44px !important}
  .planetwatcher-nav .nav-arrow{font-size:16px !important}
  .planetwatcher-nav .nav-unit{font-size:8px !important}
}
@media(min-width:610px){
  .planetwatcher-nav,.controls .pw-animation-toolbar{max-width:760px}
  .planetwatcher-nav .nav-current{font-size:13px !important}
  .nav-direction-row{gap:10px}
  .planetwatcher-nav #now{flex-basis:58px;width:58px !important;min-width:58px !important;max-width:58px !important}
}

/* V28: keep the animation dropdown above the chart panel when expanded. */
section.panel.controls{position:relative;z-index:5;overflow:visible;}