/* Synistar EN / ES segmented language control — matches synistar.com Clayglass language pill. */
.syn90-language {
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:4px;
  border:1px solid var(--sp-line-soft,rgba(255,255,255,.15));
  border-radius:13px;
  background:color-mix(in srgb,var(--sp-bg-2,#202020) 60%,transparent);
  box-shadow:var(--sp-clayglass-inset-soft,inset 0 1px 3px rgba(0,0,0,.12));
  vertical-align:middle;
  flex:0 0 auto;
}
.syn90-language button {
  appearance:none;
  border:0;
  margin:0;
  min-width:36px;
  min-height:34px;
  padding:7px 10px;
  border-radius:9px;
  font:750 11px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.07em;
  background:transparent;
  color:var(--sp-muted,#999);
  cursor:pointer;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease;
}
.syn90-language button.is-active {
  color:var(--sp-copy,#f4f1ea);
  background:var(--sp-surface,#282828);
  box-shadow:var(--sp-clayglass-shadow,0 2px 9px rgba(0,0,0,.22));
}
.syn90-language button:hover {color:var(--sp-copy,#f4f1ea)}
.syn90-language button:focus-visible {
  outline:2px solid var(--sp-accent,#eee);
  outline-offset:2px;
}
.portal-language-row {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin:12px 12px 6px;
  padding:0 2px;
  min-width:0;
}
.portal-language-row>span {
  font-size:12px;
  color:var(--sp-muted,#999);
}
.guest-language-control {
  position:fixed;
  top:calc(18px + env(safe-area-inset-top,0px));
  right:calc(18px + env(safe-area-inset-right,0px));
  z-index:60;
}
.mobile-head-actions .syn90-language {
  transform:scale(.94);
  transform-origin:right center;
  margin-left:auto;
}
@media(max-width:430px) {
  .mobile-head-actions .syn90-language {padding:2px;gap:1px}
  .mobile-head-actions .syn90-language button {min-width:30px;min-height:32px;padding:6px}
  .portal-language-row {margin-inline:8px}
}
@media(prefers-reduced-motion:reduce){.syn90-language button{transition:none}}

/* v2.7.3.1: keep language control in the first screenful of the sidebar.
   Navigation may scroll independently; language preference must not be hidden below it. */
.sidebar > .portal-language-row {
  flex:0 0 auto;
  align-self:stretch;
  margin:14px 0 2px;
  padding:9px 10px;
  border:1px solid var(--sp-line-soft,rgba(255,255,255,.16));
  border-radius:15px;
  background:color-mix(in srgb,var(--sp-bg-2,#242424) 54%,transparent);
  box-shadow:var(--sp-clayglass-inset-soft,inset 0 1px 2px rgba(0,0,0,.2));
}
.sidebar > .portal-language-row > span {font-weight:750;color:var(--sp-ink,#eee)}
.sidebar > .portal-language-row .syn90-language {margin-left:auto}
@media (max-height:600px) and (min-width:981px) {
  .sidebar > .portal-language-row {margin-top:8px;padding:6px 8px}
}
/* Make EN/ES reachable in the compact mobile toolbar without pushing it off-screen. */
@media (max-width:430px) {
  .mobile-head img {width:96px!important;max-width:96px!important}
  .mobile-head-actions {gap:4px!important;min-width:0}
  .mobile-head-actions > .syn90-language {transform:none;margin-left:0}
  .mobile-head-actions .syn90-language button {width:29px!important;min-width:29px!important;min-height:30px!important;height:30px!important;padding:4px 2px!important;border-radius:8px!important}
  .mobile-head-actions > button,.mobile-head-actions > .mobile-bell {width:34px!important;min-width:34px!important;height:34px!important;padding:5px!important}
}