/* Re-skin 3dtrimview onto mctoolkit's tokens.
 *
 * vendor/trimview/trimview.css is 3dtrimview's own stylesheet and is left untouched so the
 * port stays re-runnable — scripts/port-trimview.mjs copies it verbatim. This file loads
 * after it and re-points the surfaces, the same split tool-theme.css uses for the 75
 * ported widgets.
 *
 * Scoped to #tool-root so nothing here can reach the site chrome.
 */

#tool-root .app {
  display: grid;
  gap: 12px;
  background: transparent;
  padding: 0;
  max-width: none;
}

/* ---------- panels ---------- */
#tool-root :is(.card, .sets-rail-host, .center-col > section, .editor-card, .tab-pane) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
}

#tool-root #viewer-host {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 420px;
  overflow: hidden;
}
#tool-root #viewer-canvas { cursor: grab; touch-action: none; }
#tool-root #viewer-canvas:active { cursor: grabbing; }

/* ---------- controls ---------- */
#tool-root :is(.tab, .chip, .pill, .dropdown-cell, .swatch) {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#tool-root :is(.tab, .chip, .pill).is-active,
#tool-root :is(.tab, .chip, .pill)[aria-selected="true"] {
  background: var(--grass-deep);
  border-color: var(--line-strong);
  color: var(--grass-bright);
}

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

/* ---------- the /give line ---------- */
#tool-root .give-line {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
}
#tool-root .give-label { color: var(--fg-dim); }

/* Minecraft sprites are 16px art; scaling one must not smooth it. */
#tool-root .app img[src*="/vendor/trimview/assets/"] { image-rendering: pixelated; }

@media (max-width: 900px) {
  #tool-root #viewer-host { min-height: 320px; }
}