/* Appearance control, matching MapLab's Theme dropdown (Toolbar.css): an
   accent icon button and a compact menu of Light / Dark / System. */
.vh-appearance {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--vh-color-text);
  font: inherit;
}
.vh-appearance-compact {
  gap: 0;
  margin: 0;
  padding: 0;
}
/* WordPress can insert an empty paragraph between the shortcode's label and
   control. Its default margins otherwise make a 15px icon occupy a tall row. */
.vh-appearance-compact > p {
  display: none;
}
.vh-theme-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}
/* Bare icon button: no padding, border or size, so the header editor controls its spacing. */
.vh-theme-control__trigger--default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--vh-color-accent-text);
  line-height: 0;
  cursor: pointer;
}
.vh-theme-control__trigger--default:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--vh-color-field-focus);
}
.vh-theme-control__trigger:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.vh-theme-control__trigger svg { display: block; flex: 0 0 auto; }
/* In an app's own icon-button style, match that toolbar's 20px icons. */
.vh-theme-control__trigger:not(.vh-theme-control__trigger--default) svg { width: 20px; height: 20px; }
.vh-theme-control__menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 1300;
  display: grid;
  gap: .2rem;
  min-width: 10.5rem;
  padding: .35rem;
  border: 1px solid var(--vh-color-menu-border);
  border-radius: 8px;
  background: var(--vh-color-menu-bg);
  box-shadow: var(--vh-color-menu-shadow);
}
.vh-theme-control__menu[hidden] { display: none; }
.vh-theme-control[data-align="right"] .vh-theme-control__menu,
.vh-theme-control[data-align-auto="right"] .vh-theme-control__menu { left: auto; right: 0; }
.vh-theme-control .vh-theme-control__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.9rem;
  margin: 0;
  padding: 0 .55rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--vh-color-text-secondary);
  font-family: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  cursor: pointer;
}
.vh-theme-control .vh-theme-control__item svg { width: 14px; height: 14px; flex: 0 0 auto; }
.vh-theme-control .vh-theme-control__item:hover {
  background: var(--vh-color-menu-item-hover);
  color: var(--vh-color-text);
}
.vh-theme-control .vh-theme-control__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--vh-color-field-focus);
}
.vh-theme-control .vh-theme-control__item--active { color: var(--vh-color-accent-text-secondary); }
/* Plain selects remain supported for products that still render one. */
.vh-appearance select {
  min-height: 2.5rem;
  padding: .375rem .625rem;
  border: 1px solid var(--vh-color-border-control);
  border-radius: 8px;
  background: var(--vh-color-surface-raised);
  color: var(--vh-color-text);
  font: inherit;
}
@media print { .vh-appearance, .vh-theme-control { display: none; } }

.vh-appearance.vh-appearance-compact > .vh-appearance__label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}