/* 3D tools (print): volume & weight, STL repair, hollow, split by parts, lithophane (site/three3d/print-*.js).
   Area rules only; shared tokens stay in style.css. Part colours match PALETTE in print-view.js. */
:root { --p3-ok: #1B7347; --p3-warn: #9A5B00; --p3-warn-bg: #FFF4DC; --p3-stage: #EEF1F3; }
:root[data-theme="dark"] { --p3-ok: #62CE95; --p3-warn: #F2C063; --p3-warn-bg: #3A2F17; --p3-stage: #1B2227; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --p3-ok: #62CE95; --p3-warn: #F2C063; --p3-warn-bg: #3A2F17; --p3-stage: #1B2227; } }

.p3 { gap: 16px; }
.p3-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.p3-work[hidden] { display: none; }
.p3-side, .p3-out, .p3-view { display: grid; gap: 12px; min-width: 0; }
.p3-stage { position: relative; height: 420px; border-radius: 12px; overflow: hidden; background: var(--p3-stage); }
.p3-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.p3-stage .note { padding: 16px; }

.p3-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px; align-items: end; }
.p3-opts [hidden] { display: none; }

.p3-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.p3-stats > div { padding: 8px 12px; border-radius: 10px; background: var(--soft); min-width: 0; }
.p3-stats dt { font-size: 13px; color: var(--muted); }
.p3-stats dd { margin: 0; font: 600 17px/1.3 var(--body); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.p3-stats .big dd { font-size: 22px; }

.p3-ok, .p3-warn { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 15px; }
.p3-ok { color: var(--p3-ok); background: color-mix(in srgb, var(--p3-ok) 12%, transparent); font-weight: 600; }
.p3-warn { color: var(--ink); background: var(--p3-warn-bg); border-left: 4px solid var(--p3-warn); }
.p3-list { margin: 0; padding-left: 20px; display: grid; gap: 3px; font-size: 15px; }
.p3-ba th, .p3-ba td { font-variant-numeric: tabular-nums; }
.p3-ba tbody th { text-align: left; font-weight: 500; }
.p3-more summary { cursor: pointer; font-weight: 600; }
.p3-more > * + * { margin-top: 8px; }

/* before / after switch */
.p3-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); justify-self: start; }
.p3-seg button { border: 0; background: none; color: var(--ink); border-radius: 9px; padding: 7px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.p3-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.p3-seg button:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

/* split: one row per part */
.p3-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.p3-parts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.p3-parts span { display: grid; min-width: 0; }
.p3-parts b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3-parts small { color: var(--muted); font-variant-numeric: tabular-nums; }
.p3-swatch { width: 14px; height: 14px; border-radius: 4px; }
.p3-swatch.c0 { background: #3b82c4; } .p3-swatch.c1 { background: #e0892b; } .p3-swatch.c2 { background: #2f9e6e; } .p3-swatch.c3 { background: #c0467a; }
.p3-swatch.c4 { background: #7a5cc4; } .p3-swatch.c5 { background: #b8a12a; } .p3-swatch.c6 { background: #3aa6b4; } .p3-swatch.c7 { background: #d0543c; }

/* lithophane: the backlit picture above the 3D relief */
.p3-litfig { margin: 0; overflow: hidden; display: grid; gap: 4px; justify-items: center; padding: 14px; border-radius: 12px; background: #111; }
.p3-lit { max-width: 100%; max-height: 300px; image-rendering: auto; box-shadow: 0 0 40px rgba(255, 190, 110, .35); }
.p3-litfig figcaption { color: #bbb; }
.p3-litho .p3-stage { height: 320px; }

@media (max-width: 820px) {
  .p3-work { grid-template-columns: minmax(0, 1fr); }
  .p3-view { order: -1; }
  .p3-stage { height: 300px; }
}