/*
  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. Inter is also loaded from Google Fonts for the site itself; both
  declarations point at the same font, so either serves.
*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url("/cards/fonts/inter-latin.woff2?v=3") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("/cards/fonts/cormorant-garamond-600-latin.woff2?v=7") format("woff2");
}
@font-face {
  font-family: "Parisienne";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/cards/fonts/parisienne-latin.woff2?v=7") format("woff2");
}
@font-face {
  font-family: "Waterfall";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/cards/fonts/waterfall-latin.woff2?v=15") format("woff2");
}
@font-face {
  font-family: "Didact Gothic";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/cards/fonts/didact-gothic-latin.woff2?v=15") format("woff2");
}
@font-face {
  font-family: "Meow Script";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/cards/fonts/meow-script-latin.woff2?v=15") 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-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cards-size {
  position: relative;
  cursor: pointer;
}
.cards-size input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cards-size > span {
  display: block;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cards-size-unit {
  font-weight: 400;
  color: var(--muted);
}
.cards-size input:checked + span {
  border-color: var(--sage);
  background: var(--sage-tint);
  box-shadow: 0 0 0 1px var(--sage);
}
.cards-size input:focus-visible + span {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
}

/* Design tiles: each shows the design's header in its own font. */
.cards-designs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.cards-design {
  position: relative;
  cursor: pointer;
}
.cards-design input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.cards-design > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  color: #241d1a;
  text-align: center;
  line-height: 1.15;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cards-design input:checked + span {
  border-color: var(--sage);
  box-shadow: 0 0 0 2px var(--sage);
}
.cards-design input:focus-visible + span {
  outline: 2px solid var(--sage-deep);
  outline-offset: 2px;
}
.cards-design-memories {
  font-family: "Cormorant Garamond", Garamond, serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cards-design-love {
  font-family: "Waterfall", cursive;
  font-size: 34px;
}

.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-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-download {
    width: 100%;
  }
}