/* The OG image maker (/og-image-generator), on the tools' tool.css: on the left the words, the logo and photo, light or
   dark, and Download PNG; on the right the well, the picture above X's and LinkedIn's cards at their true widths. */

/* The title is set as a heading, the line under it as text, between hairlines, as the previewers' editor is. */
.maker .title {
  min-height: 0; padding: 0 0 14px; border-top: 0;
  font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance;
}
.maker .tool .title:focus-visible { border-top: 0; }
.line {
  display: block; width: 100%; height: 52px; padding: 0; border: 0; border-top: 1px solid var(--hair); background: none; outline: none;
  font-size: 16px; letter-spacing: -0.005em; color: var(--ink); transition: border-color .15s ease-out;
}
.line::placeholder { color: var(--muted); opacity: 1; }
.tool .line:focus-visible { outline: none; border-top-color: var(--ink); }

/* The logo and the photo, a row each: the image, what it is, and Remove. */
.images { margin: 0; padding: 0; list-style: none; }
.images .row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.images img { flex: none; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--well); }
.images .row:first-child img { object-fit: contain; padding: 6px; }
.images .about { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.35; }
.images .about b { font-weight: 600; color: var(--ink); }
.images .about span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Light or dark: the picture's two grounds as swatches, the chosen one ringed in ink. */
.grounds { display: flex; margin-left: auto; margin-right: -8px; }
.grounds button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.grounds button::before {
  content: ""; width: 26px; height: 26px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(36, 17, 12, .16);
  transition: box-shadow .15s ease-out;
}
.grounds [data-ground="light"]::before { background: #f5f4f0; }
.grounds [data-ground="dark"]::before { background: #151413; box-shadow: inset 0 0 0 1px rgba(255, 245, 233, .14); }
.grounds [aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--ink); }
.tool .grounds button:focus-visible { outline-offset: -2px; }

/* Download PNG: the one ink button. */
.maker .editor .btn { display: flex; width: 100%; margin-top: 20px; }
.hint { min-height: 20px; margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.hint.bad { color: var(--bad); }

/* The picture on the well, at X's frame width, a hairline at its edge so a light picture doesn't melt into the well. */
.maker .stage { display: flex; flex-direction: column; align-items: stretch; gap: 56px; padding: 44px 24px 40px; }
.picture { max-width: 100%; margin: 0 auto; }
.picture canvas { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 12px; box-shadow: 0 0 0 .5px var(--hair), 0 1px 2px rgba(36, 17, 12, .06); }

@media (max-width: 759px) {
  .maker .stage { gap: 44px; padding: 24px 0 32px; }
  .picture { width: 100% !important; }
  .picture canvas { border-radius: 0; box-shadow: none; }
}