/* Shared control geometry. Values come from draftlore-design.md. */
html :is(select, .dl-dialog-close, .dl-icon-close) {
  --space-stack: 15px;
  --space-heading: 44px;
  --space-eyebrow: 24px;
  --radius-button: 5px;
  --focus: #a06a23;
  --muted: #5a685f;
  --ink: #182c24;
  --surface: #ffffff;
  --sage: #e6eddf;
  --line: #cbd5c5;
  --night-panel: #244b3b;
  --night-line: #52715e;
  --on-night: #eff3e7;
  --font-sans: "Manrope", Arial, sans-serif;
  --dl-select-arrow: url("/assets/control-chevron.svg");
}
html[data-theme="dark"] :is(select, .dl-dialog-close, .dl-icon-close) {
  --muted: #aec0b4;
  --ink: #e5ede8;
  --surface: #1c3024;
  --sage: #21392b;
  --line: #3d5747;
  --night-panel: #163027;
  --night-line: #34473d;
  --on-night: #e5ede8;
  --dl-select-arrow: url("/assets/control-chevron-dark.svg");
}

/* Retain native selection, keyboard support and option menus. Only replace the
   browser's edge-hugging indicator; listboxes and multi-selects keep theirs.
   Important protects the inset from feature-specific background/padding rules. */
html body select:not([multiple]):not([size]),
html body select:not([multiple])[size="1"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
  padding-inline-end: calc(var(--space-stack) * 2 + var(--space-eyebrow) / 2) !important;
  background-image: var(--dl-select-arrow) !important;
  background-repeat: no-repeat !important;
  background-size: calc(var(--space-eyebrow) / 2) calc(var(--space-eyebrow) / 2) !important;
  background-position: right var(--space-stack) center !important;
  text-overflow: ellipsis;
}
html body select:dir(rtl):not([multiple]):not([size]),
html body select:dir(rtl):not([multiple])[size="1"] {
  background-position: left var(--space-stack) center !important;
}

/* Leave room for the 3px focus outline and its 5px offset. Stacked
   fields need a real label gap; compact inline controls keep their layout. */
html label:has(> select),
html label:has(+ select) {
  --space-stack: 15px;
}
html body label:has(> select) {
  gap: var(--space-stack) !important;
}
html body :is(dialog, #inlineRevisionPanel, .beta-feedback-panel, .review-reader) label:has(> select):not(.listen-pace) {
  display: grid;
  min-width: 0;
}
html body label > select {
  margin-block-start: 0 !important;
}
html body label:has(+ select) {
  margin-block-end: var(--space-stack) !important;
}

/* An absolutely centered cross has no font baseline or anonymous grid item.
   Keep the original button and its handlers, with a square 44px hit target. */
html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close) {
  position: relative;
  inset: auto;
  flex: 0 0 var(--space-heading);
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: var(--space-heading);
  min-width: var(--space-heading);
  max-width: var(--space-heading);
  height: var(--space-heading);
  min-height: var(--space-heading);
  max-height: var(--space-heading);
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--surface) !important;
  color: var(--ink) !important;
  font: 0/1 var(--font-sans) !important;
  text-indent: 0;
  transform: none !important;
  cursor: pointer;
}
html body dialog.dl-dialog .dl-dialog-head .dl-dialog-close {
  background: var(--night-panel) !important;
  border-color: var(--night-line);
  color: var(--on-night) !important;
}
html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close) > * { display: none; }
html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close)::before,
html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--space-stack);
  height: 2px;
  background: currentColor;
  border: 0;
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close)::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close):hover {
  background: var(--sage) !important;
  border-color: currentColor;
}
html body dialog.dl-dialog .dl-dialog-head .dl-dialog-close:hover {
  background: var(--night-panel) !important;
  border-color: var(--on-night);
}
html body :is(select, dialog.dl-dialog .dl-dialog-close, .dl-icon-close):focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 5px;
}
@media (forced-colors: active) {
  html body select:not([multiple]):not([size]),
  html body select:not([multiple])[size="1"] {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none !important;
  }
  html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close) {
    color: ButtonText !important;
    border-color: ButtonText;
  }
  html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close)::before,
  html body :is(dialog.dl-dialog .dl-dialog-close, .dl-icon-close)::after {
    background: ButtonText;
  }
}