/* Dark-theme the vendored 3dskinview editor.
 *
 * widget-full.css is 3dskinview's own stylesheet: hard-coded #fff / #f5f5f5, no custom
 * properties, no data-theme hook. It is left untouched — it ships alongside a minified
 * widget whose architecture doc warns the area "has repeatedly been mis-patched", and
 * re-porting a patched copy on their next release would be a merge every time. So the
 * surfaces are re-pointed here instead, the same approach tool-theme.css takes for the
 * 75 ported widgets.
 *
 * Loaded after widget-full.css, and every rule below matches its specificity or beats it.
 */

/* Their stylesheet sets `body { background: #ffffff }`, which would white out the whole
 * site, not just the widget. */
body { background: var(--bg) !important; }

/* ---------- panels ---------- */
#tool-root :is(.editor-layout, .tool-rail, .center-stage, .control-rail,
                .canvas-panel, .custom-preview-panel, .cape-editor-panel) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--fg);
}

/* The 3D preview sat as a white rectangle on a near-black page — the single most
 * obviously-wrong thing on the ported page. */
#tool-root .preview-wrap {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- controls ---------- */
#tool-root :is(.chip-button, .pill, .sq-btn, .sq-btn-sm, .brush-option, .tool-tile) {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#tool-root :is(.chip-button, .pill, .sq-btn, .sq-btn-sm, .brush-option, .tool-tile):hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  color: var(--fg);
}
#tool-root :is(.chip-button.is-active, .pill.is-active, .tool-tile.is-active,
                .chip-button[aria-pressed="true"]) {
  background: var(--grass-deep);
  border-color: var(--line-strong);
  color: var(--grass-bright);
}

#tool-root .brush-popup {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--drop);
}

#tool-root :is(.cape-preset-select, .preview-background-select, .custom-preview-select, select) {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* No filter on .tool-icon. They are stroke="currentColor" SVGs, so they already follow
 * the tile's colour above; an invert() added here to "fix" dark-on-light art turned them
 * black on a black tile and made the whole toolbar disappear. */

/* ---------- edition switch (ours, above the widget) ---------- */
.sk-edition {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sk-edition .btn { padding: 6px 12px; font-size: 13px; }
.sk-edition-note { font-size: 12.5px; color: var(--fg-dim); margin-left: auto; }

.sk-error {
  margin: 0 0 14px;
  padding: 11px 14px;
  font-size: 13.5px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius);
}

@media (max-width: 620px) {
  .sk-edition-note { margin-left: 0; flex-basis: 100%; }
}