/* Shared display-control contract: language → voice → light/dark → feedback. */
.display-controls {
  --header-control-size: 44px;
  --header-control-gap: 8px;
  --header-language-width: 112px;
  --header-control-bg: var(--surface, var(--panel, Canvas));
  --header-control-text: var(--ink, var(--text, CanvasText));
  --header-control-border: var(--line-strong, var(--line, color-mix(in srgb, currentColor 22%, transparent)));
  --header-control-accent: var(--accent, var(--green, var(--copper, var(--bronze, currentColor))));
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--header-control-gap);
  margin-inline-start: auto;
  white-space: nowrap;
}

.display-controls .display-language {
  position: relative;
  display: block;
  width: var(--header-language-width);
  min-width: 0;
  height: var(--header-control-size);
  flex: 0 0 var(--header-language-width);
}

.display-controls .display-language::after {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 2;
  color: color-mix(in srgb, var(--header-control-text) 66%, transparent);
  content: "⌄";
  font-size: 10px;
  line-height: 1;
  transform: translateY(-56%);
  pointer-events: none;
}

.display-controls .display-language select,
.display-controls .display-control-button {
  box-sizing: border-box;
  height: var(--header-control-size) !important;
  min-height: var(--header-control-size) !important;
  border: 1px solid var(--header-control-border) !important;
  background: var(--header-control-bg) !important;
  color: var(--header-control-text) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 9%, transparent), 0 5px 16px color-mix(in srgb, black 5%, transparent) !important;
  font: inherit;
}

.display-controls .display-language select {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 30px 0 14px !important;
  overflow: hidden;
  border-radius: 999px !important;
  appearance: none;
  font-size: 12px !important;
  font-weight: 780 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-text-fill-color: currentColor !important;
  cursor: pointer;
}

.display-controls .display-control-button {
  position: relative;
  display: inline-grid !important;
  width: var(--header-control-size) !important;
  min-width: var(--header-control-size) !important;
  max-width: var(--header-control-size) !important;
  flex: 0 0 var(--header-control-size) !important;
  padding: 0 !important;
  place-items: center;
  overflow: hidden;
  border-radius: 50% !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.display-controls .display-control-button:hover {
  border-color: var(--header-control-accent) !important;
  color: var(--header-control-accent) !important;
  transform: translateY(-1px);
}

.display-controls :is(select, button, a):focus-visible {
  outline: 3px solid var(--header-control-accent) !important;
  outline-offset: 3px !important;
}

.display-controls .display-control-button svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.display-controls .voice-control-slot {
  display: grid;
  width: var(--header-control-size);
  height: var(--header-control-size);
  flex: 0 0 var(--header-control-size);
  place-items: center;
}

.display-controls .voice-control-slot > * { grid-area: 1 / 1; }
.display-controls [hidden] { display: none !important; }
.display-controls :disabled { cursor: not-allowed; opacity: .5; transform: none !important; }
.display-controls .display-control-label,
.display-controls .language-current,
.display-controls .language-code {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.display-controls .moon-icon,
.display-controls .theme-icon-moon { display: none !important; }
html[data-theme="dark"] .display-controls .sun-icon,
html[data-theme="dark"] .display-controls .theme-icon-sun { display: none !important; }
html[data-theme="dark"] .display-controls .moon-icon,
html[data-theme="dark"] .display-controls .theme-icon-moon { display: block !important; }

.display-controls [data-header-control="language"] { order: 1; }
.display-controls [data-header-control="voice"] { order: 2; }
.display-controls [data-header-control="theme"] { order: 3; }
.display-controls [data-header-control="feedback"] { order: 4; }

.site-header :is(.header-actions, .nav-tools) { justify-content: flex-end; direction: ltr; }
.site-header .brand { min-width: 0; }

@media (max-width: 700px) {
  .display-controls {
    --header-control-size: 40px;
    --header-control-gap: 5px;
    --header-language-width: clamp(68px, 23vw, 88px);
  }
  .display-controls .display-language select { padding: 0 23px 0 10px !important; font-size: 11px !important; }
  .display-controls .display-language::after { right: 8px; font-size: 9px; }
}

@media (max-width: 360px) {
  .display-controls {
    --header-control-gap: 3px;
    --header-language-width: 56px;
  }
  .display-controls .display-language select { padding: 0 18px 0 7px !important; font-size: 10px !important; }
  .display-controls .display-language::after { right: 6px; }
}

@media (forced-colors: active) {
  .display-controls .display-language select,
  .display-controls .display-control-button { border: 2px solid ButtonText !important; background: ButtonFace !important; color: ButtonText !important; box-shadow: none !important; }
}