/* Design-preview bar (design-themes branch only).
   Tool chrome, not part of any design: neutral charcoal so it never reads as one of the themes. */
:root { --vmrc-bar-h: 44px; }
html.has-theme-bar body { padding-top: var(--vmrc-bar-h); }
html.has-theme-bar #siteWrapper { position: relative; }
html.has-theme-bar .header-menu { top: var(--vmrc-bar-h); }

#vmrc-theme-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--vmrc-bar-h);
  z-index: 9998;
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: #1c1d1f; color: #f2f2f2;
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0; text-transform: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0,0,0,.18);
  -webkit-font-smoothing: antialiased;
}
#vmrc-theme-bar * { box-sizing: border-box; font: inherit; letter-spacing: inherit; text-transform: none; }
#vmrc-theme-bar .vtb-label {
  flex: none; color: #9a9ca1; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
#vmrc-theme-bar .vtb-options { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#vmrc-theme-bar .vtb-options::-webkit-scrollbar { display: none; }
#vmrc-theme-bar button.vtb-opt {
  flex: none; appearance: none; border: 0; margin: 0; cursor: pointer;
  height: 30px; padding: 0 14px; border-radius: 15px;
  background: transparent; color: #d9dadc;
  transition: background-color .15s ease, color .15s ease;
}
#vmrc-theme-bar button.vtb-opt:hover { background: rgba(255,255,255,.1); color: #fff; }
#vmrc-theme-bar button.vtb-opt[aria-pressed="true"] { background: #fff; color: #1c1d1f; }
#vmrc-theme-bar button.vtb-opt:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }
#vmrc-theme-bar .vtb-desc { flex: none; color: #9a9ca1; font-size: 12px; white-space: nowrap; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
#vmrc-theme-bar select.vtb-select { display: none; }

@media (max-width: 899px) {
  #vmrc-theme-bar .vtb-options, #vmrc-theme-bar .vtb-desc { display: none; }
  #vmrc-theme-bar select.vtb-select {
    display: block; flex: 1; min-width: 0; height: 30px; padding: 0 30px 0 12px; border-radius: 15px;
    border: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231c1d1f' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #1c1d1f; appearance: none; -webkit-appearance: none;
  }
}
@media print { #vmrc-theme-bar { display: none; } html.has-theme-bar body { padding-top: 0; } }