/* Host adapter for the upstream Wynntils editor. Load after styles.css. */
html,
body {
  min-width: 320px;
}

body[data-page='overlay'] {
  overflow: visible;
}

#wynntils-overlay-editor :is(input, textarea, select, button, [id]) {
  scroll-margin-top: calc(var(--nav-height) + 14px);
}

#wynntils-overlay-editor {
  color-scheme: inherit;
  --woe-bg: var(--bg);
  --woe-surface: var(--surface);
  --woe-surface-raised: var(--surface2);
  --woe-border: var(--border);
  --woe-border-soft: var(--border);
  --woe-text: var(--text);
  --woe-muted: var(--text2);
  --woe-accent: var(--teal);
  --woe-accent-strong: var(--teal);
  --woe-warning: var(--gold-light);
  --woe-danger: var(--crimson-light);
  --woe-radius: 8px;
  --woe-page-gradient: linear-gradient(180deg, var(--bg-deep) 0, var(--bg) 34rem);
  --woe-input: var(--surface2);
  --woe-code: var(--surface2);
  --woe-code-text: var(--text);
  --woe-placeholder: var(--text2);
  --woe-border-hover: var(--border-strong);
  --woe-result: var(--surface2);
  --woe-result-hover: var(--surface3);
  --woe-subtle: rgba(255, 255, 255, 0.04);
  --woe-subtle-hover: rgba(255, 255, 255, 0.08);
  --woe-subtle-border: rgba(255, 255, 255, 0.12);
  --woe-toggle: var(--surface3);
  --woe-toggle-thumb: var(--text);
  --woe-on-accent: var(--bg);
  --woe-warning-surface: rgba(224, 189, 115, 0.12);
  --woe-danger-surface: rgba(169, 86, 77, 0.16);
  --woe-danger-surface-strong: rgba(169, 86, 77, 0.22);
  --woe-warning-border: rgba(224, 189, 115, 0.55);
  --woe-danger-border: rgba(209, 121, 110, 0.55);
  --woe-accent-surface: rgba(112, 165, 160, 0.12);
  --woe-accent-surface-strong: rgba(112, 165, 160, 0.22);
  --woe-accent-border: rgba(112, 165, 160, 0.45);
  --woe-dialog: var(--surface);
  --woe-dialog-section: var(--surface2);
  --woe-message-area: var(--bg-deep);
  --woe-message: var(--surface2);
  --woe-message-user: color-mix(in srgb, var(--teal) 22%, var(--surface2));
  --woe-toast: color-mix(in srgb, var(--teal) 22%, var(--surface2));
  --woe-syntax-format: #ff8fad;
  --woe-syntax-variable: #8fb9ff;
  --woe-syntax-string: #d9c08c;
  --woe-syntax-number: #c49af8;
  --woe-syntax-escape: #7bd5b2;
  --woe-preview: linear-gradient(180deg, #17324b 0, #10253a 64%, #0b1725 64.5%);
  --woe-selection: rgba(112, 165, 160, 0.28);
  --woe-glyph-surface: var(--surface2);
  --woe-inline-code: rgba(0, 0, 0, 0.22);
  --woe-backdrop: rgba(2, 8, 14, 0.78);
  --woe-panel-overlay: color-mix(in srgb, var(--surface) 90%, transparent);
  --woe-shadow: rgba(0, 0, 0, 0.3);
  color: var(--woe-text);
  font-family: var(--font-body);
}

/* archive.css has broad button and dialog rules; keep the editor's controls local. */
#wynntils-overlay-editor button,
#wynntils-overlay-editor input,
#wynntils-overlay-editor select,
#wynntils-overlay-editor textarea {
  font-family: inherit;
}

#wynntils-overlay-editor .workspace {
  width: min(1240px, calc(100% - 32px));
  container: workspace / inline-size;
}

#wynntils-overlay-editor .panel {
  border-radius: var(--woe-radius);
  background: var(--woe-panel-overlay);
  box-shadow: 0 16px 45px var(--woe-shadow);
}

#wynntils-overlay-editor .preview-panel {
  top: calc(var(--nav-height) + 14px);
}

[data-theme='light'] #wynntils-overlay-editor {
  --woe-bg: var(--bg);
  --woe-surface: var(--surface);
  --woe-surface-raised: var(--surface2);
  --woe-border: var(--border);
  --woe-border-soft: var(--border);
  --woe-text: var(--text);
  --woe-muted: var(--text2);
  --woe-accent: var(--teal);
  --woe-accent-strong: var(--teal);
  --woe-warning: var(--gold-dark);
  --woe-danger: var(--crimson);
  --woe-page-gradient: linear-gradient(180deg, var(--bg-deep) 0, var(--bg) 34rem);
  --woe-panel-overlay: color-mix(in srgb, var(--surface) 94%, transparent);
  --woe-subtle: rgba(32, 42, 43, 0.05);
  --woe-subtle-hover: rgba(32, 42, 43, 0.1);
  --woe-subtle-border: rgba(32, 42, 43, 0.14);
  --woe-toggle: var(--surface3);
  --woe-toggle-thumb: #ffffff;
  --woe-on-accent: #ffffff;
  --woe-warning-surface: rgba(111, 77, 30, 0.08);
  --woe-danger-surface: rgba(141, 64, 56, 0.08);
  --woe-danger-surface-strong: rgba(141, 64, 56, 0.1);
  --woe-warning-border: rgba(111, 77, 30, 0.42);
  --woe-danger-border: rgba(141, 64, 56, 0.45);
  --woe-accent-surface: rgba(47, 104, 104, 0.1);
  --woe-accent-surface-strong: rgba(47, 104, 104, 0.16);
  --woe-accent-border: rgba(47, 104, 104, 0.35);
  --woe-dialog: var(--surface);
  --woe-dialog-section: var(--surface2);
  --woe-message-area: var(--surface2);
  --woe-message: var(--surface);
  --woe-message-user: #e6f4f2;
  --woe-toast: #e2f2ef;
  --woe-syntax-format: #b12858;
  --woe-syntax-variable: #255fab;
  --woe-syntax-string: #76581d;
  --woe-syntax-number: #7043a3;
  --woe-syntax-escape: #167154;
  --woe-selection: rgba(47, 104, 104, 0.2);
  --woe-glyph-surface: var(--bg);
  --woe-inline-code: rgba(32, 42, 43, 0.08);
  --woe-backdrop: rgba(32, 42, 43, 0.28);
  --woe-shadow: rgba(32, 42, 43, 0.18);
}

@container workspace (max-width: 880px) {
  #wynntils-overlay-editor .preview-panel {
    position: relative;
    top: auto;
  }
}

@media (max-width: 768px) {
  #wynntils-overlay-editor .workspace {
    width: min(100% - 24px, 680px);
  }
}

@media (max-width: 720px) {
  #wynntils-overlay-editor .workspace {
    width: min(100% - 20px, 580px);
  }
}