/* The initial native picker matches the enhanced ribbon control from its first
 * paint, including when deferred scripts are slow or unavailable. */
:root[data-theme="light"] .ribbon-network select {
  box-sizing: border-box;
  appearance: none;
  width: 98px;
  height: 24px;
  min-height: 24px;
  padding: 0 31px 0 9px;
  border: 1px solid var(--tc-border-strong);
  border-radius: var(--tc-radius-chip);
  color: var(--tc-text-strong);
  background: transparent url("network-chevron.svg") no-repeat right 9px center / 12px 12px;
  font: var(--tc-weight-medium) 11px/1 var(--tc-font-sans);
  letter-spacing: .04em;
}
.ribbon-network select[hidden] { display: none !important; }
:root[data-theme="light"] .ribbon-network select:hover {
  border-color: var(--tc-text-muted);
  background-color: var(--tc-bg);
}
:root.network-leaving :is(.site-main, .ribbon-network) { pointer-events: none; }
:root.network-arriving .site-main {
  animation: network-content-in 320ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes network-content-in {
  from { opacity: .58; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  :root.network-arriving .site-main { animation: none; }
}