/* ============================================================================
 * Gewape Cloud Platform — PHASE 2: Region context bar styling
 * Floating, top-center, on-brand. Uses the Phase-1 --gw-* tokens so it inherits
 * light/dark automatically. Additive; never fights Skyline's layout.
 * ========================================================================== */
#gw-region-bar{
  position:fixed; top:11px; left:50%; transform:translateX(-50%);
  z-index:1000; max-width:min(760px, 72vw);
  font-family:var(--gw-font-sans, Inter, system-ui, sans-serif);
  opacity:0; animation:gw-rb-in .5s cubic-bezier(.2,.8,.2,1) .15s forwards;
}
@keyframes gw-rb-in{ from{opacity:0; transform:translate(-50%,-8px);} to{opacity:1; transform:translateX(-50%);} }

#gw-region-bar .gw-rb-inner{
  display:flex; align-items:center; gap:8px;
  background:var(--gw-surface,#fff); border:1px solid var(--gw-border,#e6ebf1);
  border-radius:100px; padding:5px 8px 5px 14px;
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 14px 34px -18px rgba(36,46,66,.34);
}
#gw-region-bar .gw-rb-label{
  font-family:var(--gw-font-mono, 'JetBrains Mono', monospace);
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gw-text-muted,#8898aa); padding-right:2px; flex:0 0 auto;
}
#gw-region-bar .gw-rb-scroll{ display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; }
#gw-region-bar .gw-rb-scroll::-webkit-scrollbar{ display:none; }

#gw-region-bar .gw-rchip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:100px;
  padding:6px 12px; white-space:nowrap; color:var(--gw-text,#1a1f36);
  font-size:13px; font-weight:600; line-height:1; transition:all .15s ease;
}
#gw-region-bar .gw-rchip:hover{ background:var(--gw-accent-wash,#e8f3fb); }
#gw-region-bar .gw-rchip.on{
  background:var(--gw-accent-wash,#e8f3fb);
  border-color:var(--gw-accent,#2ba7df);
  color:var(--gw-accent-strong,#1d8bc5);
}
#gw-region-bar .gw-flag{ font-size:15px; line-height:1; }
#gw-region-bar .gw-globe{ color:var(--gw-accent,#2ba7df); font-size:14px; }
#gw-region-bar .gw-city{ }
#gw-region-bar .gw-code{
  font-family:var(--gw-font-mono, 'JetBrains Mono', monospace);
  font-size:10px; color:var(--gw-text-muted,#8898aa); font-weight:500;
  letter-spacing:.02em;
}
#gw-region-bar .gw-rchip.on .gw-code{ color:var(--gw-accent,#2ba7df); }
#gw-region-bar .gw-all{ flex:0 0 auto; }
#gw-region-bar .gw-all::after{ content:""; width:1px; height:18px; background:var(--gw-border,#e6ebf1); margin-left:6px; }

/* dark inherits via tokens; a touch more lift on navy */
html.gewape-dark-mode #gw-region-bar .gw-rb-inner,
html[data-theme="dark"] #gw-region-bar .gw-rb-inner{
  box-shadow:0 1px 0 rgba(0,0,0,.3), 0 18px 40px -22px rgba(0,0,0,.7);
}

/* mobile: let the bar span more width and scroll its chips */
@media (max-width:768px){
  #gw-region-bar{ max-width:calc(100vw - 20px); top:8px; }
  #gw-region-bar .gw-rb-label{ display:none; }
}