/*
 * Styles shared only by SchoolMaker's public free-tool pages.
 * Layout, spacing, colors, and responsive behavior stay in Tailwind utilities;
 * this file is for native controls, generated documents, and print/export states.
 */

.free-tool-range {
  accent-color: #ef4444;
}

.free-tool-color {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.free-tool-color::-webkit-color-swatch-wrapper {
  padding: 0;
}

.free-tool-color::-webkit-color-swatch {
  border: 1px solid rgb(23 23 23 / 12%);
  border-radius: 0.5rem;
}

.free-tool-color::-moz-color-swatch {
  border: 1px solid rgb(23 23 23 / 12%);
  border-radius: 0.5rem;
}

.free-tool-document {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.free-tool-certificate {
  container-type: inline-size;
}

.free-tool-certificate__title {
  font-size: clamp(1.5rem, 7cqw, 4rem);
}

.free-tool-certificate__recipient {
  font-size: clamp(1.25rem, 5cqw, 3rem);
}

.free-tool-certificate[data-format="portrait"] {
  aspect-ratio: 3 / 4;
}

.free-tool-certificate[data-format="square"] {
  aspect-ratio: 1;
}

.free-tool-certificate[data-format="landscape"] {
  aspect-ratio: 1.414 / 1;
}

@media print {
  body:has(.free-tool-certificate) > :not(main),
  main:has(.free-tool-certificate) > :not(.free-tool-certificate-print-root),
  .free-tool-no-print {
    display: none !important;
  }

  .free-tool-certificate-print-root {
    margin: 0;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .free-tool-result-reveal {
    animation: none !important;
    transition: none !important;
  }
}