/* V5.9 — menu-only display controls with a wider modern language list. */
.viewer__actions { align-items:center; flex-wrap:wrap; gap:8px; }
.viewer__display-controls {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px;
  margin:0;
  flex:0 0 auto;
  border:2px solid var(--ink);
  border-radius:16px;
  background:#fff;
  box-shadow:3px 3px 0 var(--ink), 0 10px 22px rgba(0,0,0,.16);
}
.viewer__display-controls button,
.viewer__display-controls label {
  min-height:38px;
  border:1px solid var(--ink);
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  padding:7px 11px;
  font:900 11px/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(0,0,0,.25);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.viewer__display-controls button { display:inline-flex;align-items:center;gap:7px;cursor:pointer;min-width:92px;justify-content:center; }
.viewer__display-controls label { display:inline-flex;align-items:center;gap:7px;min-width:202px; }
.viewer__display-controls button:hover,
.viewer__display-controls label:hover { transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.24), 0 7px 14px rgba(0,0,0,.12); }
.viewer__display-controls select {
  appearance:none;
  -webkit-appearance:none;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  padding:0 22px 0 2px;
  min-width:158px;
  max-width:none;
}
.viewer__language-control { position:relative; }
.viewer__language-control::after { content:'⌄';position:absolute;right:10px;top:10px;pointer-events:none;font-size:14px; }
.viewer__control-icon { font-size:14px;line-height:1;flex:0 0 auto; }
.viewer__theme-control:active,
.viewer__language-control:active { transform:translate(1px,1px);box-shadow:none; }
.viewer__display-controls :focus-visible { outline:3px solid #000; outline-offset:2px; }
@media (max-width: 900px) {
  .viewer__display-controls { order:-1; flex:1 1 100%; justify-content:flex-end; }
}
@media (max-width: 620px) {
  .viewer__display-controls { width:100%; justify-content:stretch; }
  .viewer__display-controls button { flex:0 0 104px; }
  .viewer__display-controls label { flex:1 1 auto; min-width:0; }
  .viewer__display-controls select { width:100%; min-width:0; }
}
@media (max-width: 420px) {
  .viewer__display-controls { flex-wrap:wrap; }
  .viewer__display-controls button,
  .viewer__display-controls label { flex:1 1 100%; min-width:100%; }
}
