/* Model Print Inspector — the plate gets the width.
 *
 * The 3D view takes what the page has and the inspector sits beside it on a
 * desktop and under it on a phone. Theme tokens supply type and surface; the
 * analysis colours are fixed because they encode data (see COLOURS in
 * printinspector.js) and must match the PNG a reader posts.
 */

.product[data-product="model-inspector"] {
  --mpi-line: color-mix(in srgb, var(--text) 18%, transparent);
  --mpi-bad: #c0262d;
  --mpi-warn: #9a5b00;
  --mpi-ok: #1c7c43;
}

.mpi-design-pane { max-width: none; }

.product[data-product="model-inspector"] .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout ─────────────────────────────────────────────────────────── */

.mpi-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1rem;
  align-items: start;
}
.mpi-main { display: grid; gap: .6rem; min-width: 0; }
.mpi-workspace > .mpi-toolbar { grid-column: 1 / -1; }
.mpi-empty[hidden], .mpi-compare[hidden], .mpi-custom[hidden] { display: none; }

.mpi-toolbar { display: grid; gap: .35rem; }
.mpi-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem .8rem;
}
.mpi-custom { display: flex; flex-wrap: wrap; gap: .5rem .8rem; }
.mpi-custom .input { width: 7rem; }
.mpi-field { display: grid; gap: .2rem; min-width: 0; }
.mpi-field .input { min-height: 2.25rem; }
.mpi-toolbar .btn { min-height: 2.25rem; padding-block: .3rem; }
.mpi-range-row { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; }
.mpi-range { width: 8rem; accent-color: var(--accent); }
.mpi-output { font-variant-numeric: tabular-nums; min-width: 2.5rem; }
.mpi-camera { position: absolute; top: .5rem; right: .5rem; display: flex; gap: .25rem; }
.mpi-shade { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.mpi-inline { display: flex; align-items: center; gap: .5rem; }
.mpi-inline select.input { width: auto; }
.mpi-angle { display: flex; align-items: center; gap: .5rem; }
.mpi-inline-label { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.mpi-settings { align-items: center; }

/* Tool buttons, scoped to what this product draws so the platform's tabs
   and backup controls keep their own look; `.btn` stays the primary action. */
.product[data-product="model-inspector"] .mpi-pane button:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: .3rem .75rem;
  font: inherit;
  font-size: .92rem;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: calc(var(--radius) / 1.5);
  cursor: pointer;
}
.product[data-product="model-inspector"] .mpi-pane button:not(.btn):hover { border-color: var(--accent); }
.product[data-product="model-inspector"] .mpi-pane button:focus-visible,
.product[data-product="model-inspector"] .mpi-pane .input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.product[data-product="model-inspector"] .mpi-pane button:disabled { opacity: .45; cursor: not-allowed; }
.product[data-product="model-inspector"] .mpi-pane button[aria-pressed="true"]:not(.mpi-part) {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}
.product[data-product="model-inspector"] .mpi-pane .mpi-danger { color: var(--mpi-bad); }
.mpi-segmented { display: inline-flex; }
.product[data-product="model-inspector"] .mpi-segmented button:not(.btn) { border-radius: 0; }
.product[data-product="model-inspector"] .mpi-segmented button:not(.btn) + button { border-left: 0; }
.product[data-product="model-inspector"] .mpi-segmented button:first-child { border-radius: calc(var(--radius) / 1.5) 0 0 calc(var(--radius) / 1.5); }
.product[data-product="model-inspector"] .mpi-segmented button:last-child { border-radius: 0 calc(var(--radius) / 1.5) calc(var(--radius) / 1.5) 0; }

.mpi-legend {
  position: absolute; left: .5rem; bottom: .5rem; right: .5rem;
  display: flex; flex-wrap: wrap; gap: .3rem 1rem;
  font-size: .85rem; color: var(--text);
  pointer-events: none;
}
.mpi-legend:empty { display: none; }
.mpi-legend-item { background: color-mix(in srgb, var(--surface) 85%, transparent); padding: .1rem .4rem; border-radius: 3px; }
.mpi-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.mpi-swatch { width: .9rem; height: .9rem; border-radius: 2px; display: inline-block; }
.mpi-swatch-overhang { background: linear-gradient(90deg, #f5c542, #d7263d); }
.mpi-swatch-bed { background: #2f7fd8; }
.mpi-swatch-thin { background: #e879f9; }
.mpi-swatch-too-thin { background: #a21caf; }

/* ── The view ───────────────────────────────────────────────────────── */

.mpi-viewport {
  position: relative;
  height: clamp(20rem, 62vh, 40rem);
  border: 1px solid var(--mpi-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.mpi-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.mpi-canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.mpi-viewport.is-picking .mpi-canvas { cursor: crosshair; }
.mpi-drop-hint {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 3px dashed var(--accent);
  pointer-events: none;
}
.mpi-viewport.is-dropping .mpi-drop-hint { display: flex; }
.mpi-nogl { padding: 1rem; margin: 0; }
.mpi-message { min-height: 1.4em; margin: 0; font-size: .92rem; }

.mpi-keys { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .9rem; }
.mpi-keys kbd {
  font: .82rem ui-monospace, Menlo, Consolas, monospace;
  border: 1px solid var(--mpi-line); border-radius: 3px; padding: 0 .3rem;
}

.mpi-empty {
  border: 2px dashed var(--mpi-line);
  border-radius: var(--radius);
  padding: 1.2rem;
  margin-top: .8rem;
}
.mpi-empty h3 { margin-top: 0; }

/* ── Inspector ──────────────────────────────────────────────────────── */

.mpi-side { display: grid; gap: .7rem; min-width: 0; }
.mpi-side-title { margin: 0; font-size: 1rem; }
.mpi-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.product[data-product="model-inspector"] .mpi-pane button.mpi-part {
  width: 100%;
  display: flex; justify-content: space-between; gap: .5rem;
  text-align: left;
}
.product[data-product="model-inspector"] .mpi-pane .mpi-part.is-selected { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.mpi-flag { color: var(--mpi-bad); font-size: .85rem; }
.mpi-name { width: 100%; }

.mpi-stats { margin: 0; display: grid; gap: .1rem; }
.mpi-stat {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .5rem;
  padding: .3rem 0; border-bottom: 1px solid var(--mpi-line);
}
.mpi-stat dt { color: var(--muted); }
.mpi-stat dd { margin: 0; font-variant-numeric: tabular-nums; }
.mpi-stat.tone-warn dd { color: var(--mpi-warn); font-weight: 600; }
.mpi-stat.tone-bad dd { color: var(--mpi-bad); font-weight: 600; }
.mpi-stat.tone-ok dd { color: var(--mpi-ok); }
.mpi-notes { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .92rem; }
.mpi-notes .tone-bad { color: var(--mpi-bad); }
.mpi-notes .tone-warn { color: var(--mpi-warn); }
.mpi-rotate { display: flex; flex-wrap: wrap; gap: .3rem; }
.mpi-place { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.mpi-place .input { width: 100%; }
.mpi-danger { color: var(--mpi-bad); }

/* ── Orientations ───────────────────────────────────────────────────── */

.mpi-compare { margin-top: 1.2rem; display: grid; gap: .5rem; }
.mpi-compare h3 { margin: 0; }
.mpi-table-wrap { overflow-x: auto; }
.mpi-compare-table { width: 100%; max-width: none; margin-bottom: 0; font-variant-numeric: tabular-nums; }
.mpi-compare-table td, .mpi-compare-table th { white-space: nowrap; }
.mpi-compare-table th[scope="row"] { font-weight: 600; text-align: left; }
.mpi-compare-table tr.is-current { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mpi-best {
  display: inline-block; margin-left: .4rem;
  font-size: .75rem; font-weight: 600;
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-contrast);
}
.mpi-current { color: var(--muted); font-size: .88rem; }

.mpi-export-stl { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .8rem; }

@media (prefers-color-scheme: dark) {
  .product[data-product="model-inspector"] { --mpi-bad: #ff7b7b; --mpi-warn: #f2b84b; --mpi-ok: #5fd08e; }
}

/* ── Phone ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .mpi-workspace { grid-template-columns: minmax(0, 1fr); }
  .mpi-viewport { height: 55vh; }
  .mpi-shade { margin-left: 0; }
}
@media (max-width: 520px) {
  .mpi-place { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mpi-stat { grid-template-columns: 8rem minmax(0, 1fr); }
}

/* The printer names are long; a select sizes to its longest option and
   pushed the page sideways on a 390 px phone. */
.mpi-toolbar, .mpi-toolbar-row, .mpi-field { max-width: 100%; }
.mpi-field select.input { max-width: 100%; }
.mpi-main > *, .mpi-toolbar > * { min-width: 0; }
@media (max-width: 520px) {
  .mpi-inline, .mpi-angle { flex-wrap: wrap; }
  .mpi-inline select.input { width: 100%; min-width: 0; }
  .mpi-shade { flex-wrap: wrap; }
}