/* Surfaces: base, state, and responsive rules. */

:is(.desk-dialog, .desk-settings-panel, #dywFloatPlayer, #selectionTranslatorPopup) {
  border: 1px solid var(--desk-gold-edge);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: 0 12px 28px var(--shadow-color);
}

:is(.desk-dialog-head:not(.site-popup-titlebar), .desk-settings-heading, #selectionTranslatorPopup .popup-header) {
  background: var(--desk-gilded);
  color: var(--accent-primary);
  border-bottom: 1px solid var(--desk-gold-edge);
  border-radius: 11px 11px 0px 0px;
  min-height: 48px;
  height: auto;
  padding: 10px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font: 400 16px Assistant, Arial, sans-serif;
}

:is(.desk-dialog-head:not(.site-popup-titlebar), .desk-settings-heading, #selectionTranslatorPopup .popup-header) :is(h2, strong) {
  font: inherit;
  margin: 0px;
}

:is(.desk-dialog-head:not(.site-popup-titlebar), .desk-settings-heading, #selectionTranslatorPopup .popup-header) button {
  background: transparent;
  border: 0px;
  font: 22px Assistant, Arial, sans-serif;
  cursor: pointer;
}

:is(.dyw-slot-filled, .desk-dialog, .desk-settings-panel, #dywFloatPlayer, #selectionTranslatorPopup) {
  border-radius: var(--panel-radius);
  background-clip: padding-box;
}

:is(.dyw-slot-hdr, .desk-dialog-head:not(.site-popup-titlebar), .desk-settings-heading, #selectionTranslatorPopup .popup-header) {
  min-height: 66px;
  box-sizing: border-box;
  padding: 10px 12px;
  gap: 4px;
  color: var(--reading-ink);
  font: 600 16px / 22px Assistant, Arial, sans-serif;
  background: var(--desk-gilded);
  border-bottom: 1px solid var(--panel-border);
  border-radius: calc(var(--panel-radius) - 1px) calc(var(--panel-radius) - 1px) 0 0;
}

:is(.desk-dialog-head:not(.site-popup-titlebar), .desk-settings-heading, #selectionTranslatorPopup .popup-header) button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 9px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--accent-primary);
  opacity: 1;
}

:is(.desk-dialog-head:not(.site-popup-titlebar), .desk-settings-heading, #selectionTranslatorPopup .popup-header) button svg {
  width: 18px;
  height: 18px;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

:is(.desk-dialog-head:not(.site-popup-titlebar), .desk-settings-heading, #selectionTranslatorPopup .popup-header) button:hover {
  background: var(--accent-soft);
}