/* 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%; }
}

/* ---------- host-width responsive layout ----------
 *
 * Upstream owns the full viewport, so its responsive grid uses @media (max-width: 1200px).
 * Here the site sidebar makes #tool-root hundreds of pixels narrower than that viewport;
 * on a 1280px laptop the widget therefore kept all three columns and overflowed by 148px.
 * Mirror the upstream breakpoints against the space the tool actually receives. */
#tool-root { container-type: inline-size; }

@container (max-width: 1200px) {
  #tool-root .editor-layout { grid-template-columns: 200px minmax(0, 1fr); }
  #tool-root .control-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
    justify-items: stretch;
  }
  #tool-root :is(.color-card, .canvas-panel, .action-row, .cape-preset-group,
                 .back-equipment-row, .cape-preset-select) { width: 100%; }
  #tool-root #previewCanvas { height: 500px; }
}

@container (max-width: 768px) {
  #tool-root .editor-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #tool-root .tool-rail {
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    overflow-x: auto;
    padding-bottom: 16px;
  }
  #tool-root #previewCanvas { height: 400px; }
  #tool-root .custom-preview-form { grid-template-columns: 1fr; }
}

/* ---------- the body-map part picker ----------
 *
 * 3dskinview draws this as bare outlined boxes in the shape of a player — head, torso, two
 * arms, two legs — with NO text, because the position already says which part it is. Its own
 * stylesheet does that with `.part-figure .chip-button { font-size: 0 }`.
 *
 * css/tool-theme.css was overriding it. Its blanket
 * `#tool-root button:not(.btn):not([class*="tab"])` rule sets `font-size: 14px`, carries an
 * id so it outranks the widget's plain class rule, and loads afterwards — so the labels came
 * back, inside 28px-wide boxes. Measured: four of the six buttons had scrollWidth greater
 * than clientWidth, which is why "Right Arm" rendered as "Rig…Ar".
 *
 * Restored here rather than in vendor/, which is 3dskinview's tree and is re-ported
 * wholesale. `:not([disabled])` is not decoration — it is what lifts this to (1,3,0) so it
 * beats tool-theme's (1,2,1) without reaching for !important.
 *
 * font-size: 0 rather than removing the text: the label stays in the accessibility tree, so
 * a screen reader still announces "Right Arm" while nothing is painted.
 */
#tool-root .part-figure .chip-button:not([disabled]) { font-size: 0; line-height: 0; }