/* Collage shell only. Canvas/editor geometry selectors are intentionally untouched. */
[data-suite="collage"] {
  background:
    radial-gradient(circle at 86% 2%, #e5f0ec 0, transparent 27rem),
    linear-gradient(180deg, #fbfcfa 0%, #f5f7f5 100%);
  color: var(--suite-ink);
}

[data-suite="collage"] .back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--suite-border);
  border-radius: 999px;
  background: #ffffffc7;
  color: var(--suite-accent-strong);
  box-shadow: 0 1px 2px #17211d0a;
}

[data-suite="collage"] .back:hover {
  border-color: #a7ccbf;
  background: var(--suite-accent-soft);
}

[data-suite="collage"] .back:active { transform: translateY(1px); }

[data-suite="collage"] .tag {
  color: var(--suite-accent);
  letter-spacing: .14em;
}

[data-suite="collage"] h1 {
  color: var(--suite-ink);
  letter-spacing: -.065em;
}

[data-suite="collage"] .lead { color: var(--suite-muted); }

[data-suite="collage"] .toolbar {
  border-width: 1px;
  border-color: var(--suite-border);
  background: #ffffffed;
  box-shadow: var(--suite-shadow-md);
}

[data-suite="collage"] .canvas-wrap {
  border-color: var(--suite-border-strong);
  background: #ffffff;
  box-shadow: var(--suite-shadow-sm);
}

[data-suite="collage"] .canvas {
  background-color: #fcfdfc;
  background-image: repeating-linear-gradient(45deg, #ffffff 0 12px, #f4f6f5 12px 24px);
}

[data-suite="collage"] .upload {
  border-color: #8fc5b4;
  background: var(--suite-accent-soft);
  color: var(--suite-accent-strong);
  transition: color var(--suite-ease), background-color var(--suite-ease), border-color var(--suite-ease), box-shadow var(--suite-ease), transform var(--suite-ease);
}

[data-suite="collage"] .upload:hover {
  border-color: var(--suite-accent);
  background: #d9eee6;
  transform: translateY(-1px);
}

[data-suite="collage"] .upload:active { transform: translateY(0); }

[data-suite="collage"] button {
  background: var(--suite-accent);
  color: #fff;
  box-shadow: 0 2px 0 var(--suite-accent-strong), 0 4px 12px #087f651d;
}

[data-suite="collage"] button:hover {
  background: var(--suite-accent-strong);
  box-shadow: 0 2px 0 #044c3e, 0 7px 16px #087f6526;
  transform: translateY(-1px);
}

[data-suite="collage"] button:active {
  box-shadow: 0 1px 0 #044c3e;
  transform: translateY(1px);
}

[data-suite="collage"] button:disabled {
  background: #b8c3be;
  color: #f6f8f7;
}

[data-suite="collage"] select,
[data-suite="collage"] .settings input {
  border: 1px solid var(--suite-border-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--suite-ink);
  font: inherit;
}

[data-suite="collage"] select {
  min-height: 38px;
  padding: 0 30px 0 10px;
}

[data-suite="collage"] select:hover,
[data-suite="collage"] .settings input:hover { border-color: #94b9ac; }

[data-suite="collage"] .settings label,
[data-suite="collage"] .color-control,
[data-suite="collage"] .hint,
[data-suite="collage"] footer { color: var(--suite-muted); }

[data-suite="collage"] .hint {
  padding: 8px 10px;
  border-radius: var(--suite-radius-sm);
  background: var(--suite-surface-soft);
}

[data-suite="collage"] .preview-modal { background: #17211dd1; }

[data-suite="collage"] .preview-box {
  border-width: 1px;
  border-color: var(--suite-border);
  background: var(--suite-surface);
  box-shadow: 0 24px 70px #1017144d;
}

[data-suite="collage"] .preview-box > button {
  background: var(--suite-surface-soft);
  color: var(--suite-ink);
  box-shadow: none;
}

[data-suite="collage"] .preview-box > button:hover { background: #e5ebe8; }

[data-suite="collage"] #status[data-state="success"] {
  border-left: 3px solid var(--suite-success);
  background: #eaf7f0;
}

[data-suite="collage"] #status[data-state="error"] {
  border-left: 3px solid var(--suite-error);
  background: #fff0f0;
}

@media (max-width: 620px) {
  [data-suite="collage"] .toolbar { gap: 10px; }

  [data-suite="collage"] .toolbar > button,
  [data-suite="collage"] .toolbar > select,
  [data-suite="collage"] .toolbar > .upload {
    flex: 1 1 145px;
  }

  [data-suite="collage"] .toolbar > .settings,
  [data-suite="collage"] .toolbar > .hint { flex-basis: 100%; }
}

/* Keep native file controls available to keyboard and assistive technology. */
[data-suite="collage"] .upload input[type="file"] {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-suite="collage"] .upload:focus-within {
  outline: 3px solid #74111b;
  outline-offset: 3px;
}