/* Decor-only refinements. The host Wave5 stylesheet remains authoritative. */
.settings-section:has([data-action^="decor-"]) .settings-section-body {
  display: grid;
  gap: 12px;
}

.settings-section:has([data-action^="decor-"]) [data-action^="decor-"] {
  justify-self: stretch;
}

.settings-section:has([data-decor-coloring-result]) [data-decor-coloring-result],
.settings-section:has([data-decor-signs-result]) [data-decor-signs-result],
.settings-section:has([data-decor-puzzle-result]) [data-decor-puzzle-result],
.settings-section:has([data-decor-monogram-result]) [data-decor-monogram-result],
.settings-section:has([data-decor-seal-result]) [data-decor-seal-result] {
  min-width: 0;
  margin-top: 4px;
}

.settings-section:has([data-decor-coloring-result]) .coloring-check-canvas,
.settings-section:has([data-decor-monogram-result]) .monogram-diagnostic-map,
.settings-section:has([data-decor-seal-result]) .seal-diagnostic-plan,
.settings-section:has([data-decor-puzzle-result]) .puzzle-guide-plan {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, #f3eee5 78%, transparent);
}

.settings-section:has([data-decor-coloring-result]) .coloring-check-canvas svg,
.settings-section:has([data-decor-monogram-result]) .monogram-diagnostic-map svg,
.settings-section:has([data-decor-seal-result]) .seal-diagnostic-plan svg,
.settings-section:has([data-decor-puzzle-result]) .puzzle-guide-plan svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
}

.settings-section:has([data-decor-coloring-result]) .detail-note,
.settings-section:has([data-decor-signs-result]) .detail-note,
.settings-section:has([data-decor-puzzle-result]) figcaption,
.settings-section:has([data-decor-monogram-result]) figcaption,
.settings-section:has([data-decor-seal-result]) figcaption {
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .settings-section:has([data-action^="decor-"]) * {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}

/* Tree's existing shared dialog, now reachable from its product settings. */
.tree-layout-dialog .tree-layout-tools {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}
.tree-style-actions,
.tree-layout-dialog .tree-layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block: 12px;
}
.tree-layout-dialog .tree-layout-tools .input {
  min-width: 0;
  width: 100%;
}
.tree-layout-dialog .tree-layout-canvas {
  display: block;
  width: 100%;
  height: 440px;
  background: var(--stage);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  touch-action: none;
  user-select: none;
}
.tree-layout-dialog [data-layout-id] { cursor: grab; }
.tree-layout-dialog [data-layout-id]:focus-visible rect {
  stroke: var(--orange);
  stroke-width: 3;
}
.tree-layout-dialog [data-layout-id]:focus-visible { outline: none; }
.tree-version { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.tree-people-dialog .tree-person-actions,
.monogram-style-pairs { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 12px; }
.tree-people-dialog .tree-caption-details textarea { width: 100%; resize: vertical; min-height: 64px; }
.tree-people-dialog .tree-label-thumb { max-width: 220px; margin-block: 12px; }
.tree-people-dialog .tree-label-thumb svg { display: block; width: 100%; max-height: 110px; }
.monogram-style-pairs .button { flex: 1 1 190px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.monogram-style-pairs .button[aria-pressed="true"] { border-color: var(--orange); }
.monogram-style-pairs small { font-weight: 400; }
.monogram-type-details .field { margin-top: 12px; }
@media (max-width: 600px) {
  .tree-layout-dialog .tree-layout-tools { grid-template-columns: 1fr 1fr; }
  .tree-layout-dialog .tree-layout-tools .field:first-child { grid-column: 1 / -1; }
  .tree-layout-dialog .tree-layout-canvas { height: 340px; }
}
