/*
  Card maker (/cards). Loaded only by this page, after moments.css, whose
  tokens it uses.

  These faces are the same files cards.js embeds into downloads (its FONTS
  list), so the preview is measured and drawn with exactly the fonts the file
  will carry. Fraunces and Inter are also loaded from Google Fonts for the
  site itself; both declarations point at the same font, so either serves.
*/

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url("/cards/fonts/fraunces-latin.woff2?v=2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: block;
  src: url("/cards/fonts/fraunces-italic-latin.woff2?v=2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url("/cards/fonts/inter-latin.woff2?v=2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url("/cards/fonts/bodoni-moda-latin.woff2?v=2") format("woff2");
}
@font-face {
  font-family: "Pinyon Script";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/cards/fonts/pinyon-script-latin.woff2?v=2") format("woff2");
}

.cards {
  padding: 56px 0 96px;
}

.cards-head {
  max-width: 640px;
  margin-bottom: 40px;
}
.cards-head h1 {
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 14px;
}
.cards-head p:last-child {
  margin: 0;
  color: var(--muted);
}

.cards-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

/* --- Form -------------------------------------------------------------- */

.cards-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 36px;
  min-width: 0;
}
.cards-form legend {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
  margin-bottom: 14px;
}

.cards-templates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.cards-template {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cards-template input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cards-template:has(input:checked) {
  border-color: var(--sage);
  box-shadow: 0 0 0 2px var(--sage);
}
.cards-template:has(input:focus-visible) {
  outline: 2px solid var(--sage-deep);
  outline-offset: 3px;
}
.cards-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--shell);
  border-radius: 10px;
}
/* The svg box fills the thumb and the card is fitted inside it, so every
   thumb is the same size whatever the card's shape; drop-shadow follows the
   drawn card, not the box. */
.cards-thumb svg {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  filter: drop-shadow(0 1px 3px rgba(80, 46, 40, 0.16));
}
.cards-template-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.cards-template-size {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
}

.cards-field {
  margin-bottom: 18px;
}
.cards-field label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.cards-optional {
  font-weight: 400;
  color: var(--muted);
}
.cards-field input {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.cards-field input:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px var(--sage-tint);
}
.cards-field input[aria-invalid="true"] {
  border-color: #b4532a;
}
.cards-help {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.cards-error {
  font-size: 14px;
  color: #b4532a;
  margin: 6px 0 0;
  line-height: 1.5;
}
.cards-check {
  display: inline-block;
  font-size: 14px;
  color: var(--sage-deep);
  margin-top: 6px;
}

.cards-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.cards-format {
  flex: 1 1 180px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  line-height: 1.35;
}
.cards-format:has(input:checked) {
  border-color: var(--sage);
  box-shadow: 0 0 0 1px var(--sage);
}
.cards-format input {
  margin: 3px 0 0;
  accent-color: var(--sage);
}
.cards-format strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}
.cards-format span {
  font-size: 13px;
  color: var(--muted);
}

.cards-download[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.cards-inapp {
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--amber-tint);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.cards-inapp button {
  font: inherit;
  font-weight: 600;
  color: var(--sage-deep);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Preview ----------------------------------------------------------- */

.cards-preview-col {
  position: sticky;
  top: 96px;
}
.cards-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 32px;
  background: var(--shell);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}
.cards-preview svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(64vh, 620px);
  box-shadow: var(--shadow-md);
}
.cards-preview-caption {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin: 12px 0 0;
}

@media (max-width: 900px) {
  .cards {
    padding-top: 32px;
  }
  .cards-head {
    margin-bottom: 24px;
  }
  .cards-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .cards-preview-col {
    position: static;
    order: -1;
  }
  .cards-preview {
    min-height: 0;
    padding: 20px;
  }
  .cards-preview svg {
    max-height: 52vh;
  }
}

@media (max-width: 520px) {
  .cards-templates {
    gap: 8px;
  }
  .cards-template {
    padding: 8px;
  }
  .cards-template-name {
    font-size: 13px;
  }
  .cards-template-size {
    font-size: 12px;
  }
  .cards-download {
    width: 100%;
  }
}