/* Render-mode layout. The stage and the panels come from viewer.css; what is
   here is what this mode has and the expert viewer has not. */

/* Wider panels than the viewer's: every part row carries a colour and a
   translucency as well as its name, and all three have to fit on one line. */
.render-page .viewer-controls { width: 320px; }
.render-page .panel-toggle[aria-expanded="true"] { left: 344px; }
.render-page .panel-toggle-right[aria-expanded="true"] { left: auto; right: 344px; }

/* Nothing is behind the case in the scene, so what shows through is this: a
   soft studio sweep that says the background is not part of the picture. A
   saved PNG has alpha here instead. */
.render-stage {
  background:
    radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eceae5 55%, #d8d5cf 100%);
}
/* The background picture, when there is one: a flat canvas under the 3D one,
   which draws everything but the case with nothing in it. */
.render-stage #backdrop { position: absolute; inset: 0; pointer-events: none; }
.render-stage #backdrop[hidden] { display: none; }
.render-stage #stage { position: relative; }

/* The view presets sit where the view cube does in the expert viewer. */
.view-presets {
  position: absolute;
  right: 330px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  gap: 6px;
  /* Six views, two of them named rather than abbreviated: on a narrow stage
     the row wraps upwards from the corner instead of running off the side. */
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100% - 342px);
}
.view-presets.panel-hidden { right: 12px; max-width: calc(100% - 24px); }
.view-presets button {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
}
.view-presets button:hover { border-color: var(--accent); color: var(--accent); }

/* A part's row: box, colour, name, and how see-through it is. The name takes
   the slack so the slider keeps its width whatever the part is called. */
.render-page .part-list li.part-child {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) 76px;
  align-items: center;
  gap: 7px;
  padding-left: 14px;
}
.render-page .part-list li.part-child > label { overflow: hidden; text-overflow: ellipsis; }
.render-page .part-list .alpha {
  width: 76px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* The logo panel's sections, built like the viewer's fieldsets. */
.logo-controls {
  display: grid;
  min-inline-size: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.logo-controls[hidden] { display: none; }

/* What was imported, over a chequerboard, so transparency reads as
   transparency rather than as white. */
.logo-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* Where the logo goes: a row per area, built like a part row but on its own,
   since this list is in the logo panel rather than in the part list. */
#logo-areas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#logo-areas li { display: grid; gap: 4px; font-size: 0.83rem; padding-left: 0; }
#logo-areas .area-head { display: flex; align-items: center; gap: 7px; }
#logo-areas .file-button { width: 100%; padding: 6px 10px; }
#logo-areas .area-file {
  color: var(--text-muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#logo-areas .part-pick {
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  text-align: left;
  flex: 1;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}
#logo-areas .part-pick[aria-pressed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
#logo-areas .part-count {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .view-presets, .view-presets.panel-hidden {
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
  }
}

@media (max-width: 760px) {
  .render-page .viewer-controls { width: auto; }
  .view-presets { position: relative; right: auto; bottom: auto; flex-wrap: wrap; }
}

/* A logo that may be dragged says so under the pointer. */
.render-stage canvas.moving { cursor: move; }

/* The note that a mark is being run in the other colour on this part. */
#logo-over { color: var(--text-secondary); }