/* Finished lettering downloads.
   Loaded only by phrase pages that opt in with data-downloads-first on <body>,
   so the shared words-and-phrases.css stays byte-identical for every other page. */

/* The page title already says what this is. A second heading and a second
   paragraph only pushed the goods below the fold. */
.phrase-downloads { padding-top: 4px; padding-bottom: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------- options --- */

.downloads-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.downloads-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.downloads-option > span {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.downloads-inks {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ink-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--soft);
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
}

.ink-swatch:hover { transform: scale(1.08); }

.ink-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}

.ink-custom {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--soft);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}

.downloads-segmented {
  display: inline-flex;
  border: 1px solid var(--soft);
  border-radius: 7px;
  overflow: hidden;
}

.downloads-segmented button {
  border: 0;
  background: var(--surface);
  color: var(--text-ink);
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
  cursor: pointer;
}

.downloads-segmented button + button { border-left: 1px solid var(--soft); }
.downloads-segmented button:hover { background: var(--wash); }

.downloads-segmented button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

/* ---------------------------------------------------------------- grid --- */

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.download-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--soft);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

/* One fixed stage height for every tile, so a one-line piece and a stacked
   piece sit on a common baseline in the grid even though their files have
   very different proportions. */
.download-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 208px;
  padding: 18px 22px;
  /* White, not --wash: the page itself is --wash, so a grey stage made every
     tile dissolve into the background. */
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}

.download-art img {
  display: block;
  width: auto;
  height: auto;
  /* Never fill the stage completely: a piece with tall ascenders or a deep
     swash otherwise sits hard against the edge. */
  max-width: 90%;
  max-height: 82%;
  object-fit: contain;
}

/* Preview backdrop only. The downloaded file is unaffected — a transparent
   PNG has to be previewed against something, and white ink is invisible
   on a light tile. */
[data-preview="dark"] .download-art { background: #23262a; }

.download-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px 0;
}

.download-style {
  font-size: 15px;
  color: var(--text-ink);
}

.download-role {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.download-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px 15px;
}

/* Each tile owns its colourways, so the grid is varied the moment it loads
   rather than being one design under a global picker. */
.card-inks { display: flex; gap: 7px; }

.card-inks .ink-swatch { width: 21px; height: 21px; }

.card-inks .ink-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink);
}

.download-action {
  padding: 8px 15px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.download-action:hover { background: #333; border-color: #333; }

.download-action:focus-visible,
.ink-swatch:focus-visible,
.downloads-segmented button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- note --- */

.downloads-note {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 78ch;
}

.downloads-note a { color: var(--text-ink); }

/* The studio keeps working, but it is no longer the first thing asked of
   someone who searched for this exact phrase. */
.phrase-customise-lead {
  padding-top: 30px;
  margin-bottom: -6px;
}

.phrase-customise-lead h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 25px);
}

.phrase-customise-lead p {
  margin: 0;
  max-width: 64ch;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .downloads-grid { grid-template-columns: 1fr; gap: 18px; }
  .downloads-options { gap: 12px 18px; }
  .download-art { min-height: 150px; }
}
/* A browsable collection of finished pieces, rather than a configuration form. */
.finished-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:5px 0 24px}.finished-heading h2{font-size:28px;margin:0 0 7px}.finished-heading p{color:var(--muted);font-size:15px;margin:0;line-height:1.6}.finished-heading>a{color:var(--ink);font-size:14px;white-space:nowrap}.downloads-options{justify-content:flex-end;border:0;padding:0;margin-bottom:18px}.downloads-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}.download-card{border:0;border-radius:0;background:transparent;overflow:visible}.download-art{height:250px;border:0;border-radius:7px;padding:26px;background:#fff}.download-art img{max-width:94%;max-height:90%}.download-meta{padding:15px 0 0;align-items:center}.download-style{font-size:16px}.download-foot{padding:15px 0 0;flex-direction:column;align-items:stretch;gap:16px}.card-inks{min-height:24px;padding-left:3px}.piece-downloads{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.piece-downloads .download-action{padding:9px 12px;font-size:12px;border-radius:5px}.download-white{border:1px solid #bbb;border-radius:5px;padding:9px 12px;font:12px Cal,Arial,sans-serif;background:white;color:#222;cursor:pointer}.download-white:hover{background:#eee}.download-white:disabled{opacity:.5;cursor:wait}.download-white:focus-visible{outline:3px solid #222;outline-offset:3px}.piece-format-note{font-size:11px;color:var(--muted)}.downloads-status{font-size:13px;min-height:22px;color:var(--muted);margin:18px 0 0}.downloads-note{margin-top:12px}.download-card:nth-child(4n+2) .download-art{background:#f0f1ed}.download-card:nth-child(4n+3) .download-art{background:#f0edf2}.download-card:nth-child(4n) .download-art{background:#edf1f3}[data-preview="dark"] .download-card .download-art{background:#23262a}@media(max-width:1000px){.downloads-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.downloads-grid{grid-template-columns:1fr;gap:32px}.finished-heading{align-items:start;flex-direction:column;gap:12px}.downloads-options{justify-content:flex-start}.download-art{height:260px}}@media(prefers-reduced-motion:reduce){.download-art{transition:none}.ink-swatch:hover{transform:none}}
.gratitude-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 23px}.gratitude-piece{min-width:0}.gratitude-art{height:245px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:26px;text-align:center;gap:24px}.gratitude-word{font-size:49px;line-height:1.15;max-width:100%;text-wrap:balance;overflow-wrap:normal}.gratitude-detail{font:8px Cal Sans,Arial,sans-serif;letter-spacing:1.3px;line-height:1.7;max-width:100%}.gratitude-piece h3{font-size:16px;margin:14px 0 5px;font-weight:500}.gratitude-piece>p{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 14px}.gratitude-piece .download-action{font-family:inherit;cursor:pointer}.more-lettering{margin-top:38px;border-top:1px solid var(--line);padding-top:18px}.more-lettering>summary{font-size:15px;cursor:pointer;margin-bottom:22px}.downloads-options{display:none}@media(max-width:1000px){.gratitude-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.gratitude-gallery{grid-template-columns:1fr}.gratitude-art{height:255px}.gratitude-word{font-size:54px}}
/* Compact piece footer with explicit download action and format choices. */
.gratitude-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 0;min-height:43px}.gratitude-footer h3{margin:0;font-size:15px;line-height:1.4;min-width:0}.gratitude-download-menu{position:relative;flex-shrink:0}.gratitude-download-menu summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;border:1px solid #bcbcbc;border-radius:5px;padding:7px 11px;font-size:12px;line-height:16px;background:white;color:#222}.gratitude-download-menu summary::-webkit-details-marker{display:none}.gratitude-download-menu summary:hover,.gratitude-download-menu[open] summary{background:#171717;color:white;border-color:#171717}.gratitude-download-menu summary:focus-visible{outline:3px solid #222;outline-offset:3px}.gratitude-download-options{position:absolute;right:0;top:calc(100% + 5px);z-index:3;width:190px;padding:5px;border:1px solid #ccc;border-radius:6px;background:white;box-shadow:0 2px 6px #0001}.gratitude-download-options button{display:block;width:100%;text-align:left;border:0;border-radius:3px;background:white;color:#222;padding:10px;font:12px Cal,Arial,sans-serif;cursor:pointer}.gratitude-download-options button:hover{background:#f0f0f0}.gratitude-download-options button:disabled{opacity:.5;cursor:wait}.gratitude-gallery{row-gap:27px}.gratitude-piece:last-child .gratitude-word{font-size:43px}
.finished-heading-compact{justify-content:flex-end;margin:0 0 16px}.finished-heading-compact>a{font-size:13px}@media(max-width:640px){.finished-heading-compact{align-items:flex-end;flex-direction:row}}

/* The gratitude artwork is a generated file now, not CSS-rendered text, so the
   panel's padding and centring live inside the image. */
.gratitude-art.is-image { padding: 0; display: block; overflow: hidden; height: auto; aspect-ratio: 760 / 492; }
.gratitude-art.is-image img { display: block; width: 100%; height: auto; object-fit: contain; }

.gratitude-download-options .download-action {
  display: block;
  padding: 10px;
  border: 0;
  border-radius: 3px;
  background: white;
  color: #222;
  font: 12px Cal, Arial, sans-serif;
  text-align: left;
  text-decoration: none;
}
.gratitude-download-options .download-action:hover { background: #f0f0f0; }

/* Grouped collections (Happy Birthday wishes): a titled row per group, and the
   full wish under each card so it can be copied into the card by hand. */
.wishes-heading { justify-content: space-between; align-items: end; margin: 6px 0 22px; }
.wishes-heading h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 6px; }
.wishes-heading p { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.6; }
.wishes-heading > a { font-size: 13px; flex-shrink: 0; }
.gratitude-groups { display: grid; gap: 44px; }
.gratitude-group-head { margin: 0 0 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.gratitude-group-head h3 { margin: 0 0 4px; font-size: 19px; }
.gratitude-group-head p { margin: 0; font-size: 14px; color: var(--muted); }
.gratitude-footer h4 { margin: 0; font-size: 15px; line-height: 1.4; min-width: 0; font-weight: 500; }
.gratitude-wish { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 8px; }
.gratitude-wish p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-ink); }
.wish-copy, .wish-customize { flex-shrink: 0; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wish-copy:hover, .wish-customize:hover { color: var(--ink); }
.wish-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.wish-copy:focus-visible, .wish-customize:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (max-width: 640px) {
  .wishes-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gratitude-groups { gap: 34px; }
}

.birthday-card-guide { padding-top: 64px; }
.birthday-card-guide h2, .birthday-faq h2 { margin: 0 0 18px; font-size: clamp(24px, 2.6vw, 30px); }
.birthday-card-guide-grid { max-width: 72ch; color: var(--text-ink); line-height: 1.65; }
.birthday-card-guide-grid p { margin: 0 0 14px; }
.birthday-card-guide-grid ol { margin: 0 0 14px; padding-left: 22px; }
.birthday-card-guide-grid li { margin-bottom: 8px; }
.birthday-faq { padding-top: 56px; }


/* Top of a phrase page: the hero carries the intro, so the gallery heading stays compact. */
.wishes-heading-compact { align-items: center; margin: 0 0 14px; }
.wishes-heading-compact h2 { font-size: 20px; margin: 0; }

/* Lower guides (card or note guide, FAQ) share the writing-tips layout:
   label and heading on the left, content on the right, one white band. */
.phrase-guide { border-top: 0; }
.phrase-guide-body { max-width: 650px; color: var(--text-ink); font-size: 17px; line-height: 1.65; }
.phrase-explainer .phrase-guide-body p { margin: 0 0 14px; font-size: 17px; }
.phrase-guide-body ol { margin: 0 0 14px; padding-left: 22px; }
.phrase-guide-body li { margin-bottom: 10px; }
.phrase-guide-body h3 { margin: 22px 0 10px; font-size: 17px; }
.christmas-sayings, .holiday-sayings { margin: 0 0 14px; padding-left: 22px; }
.christmas-sayings .quote-source, .holiday-sayings .quote-source { color: var(--muted); font-size: 15px; }
.christmas-sayings .quote-source::before, .holiday-sayings .quote-source::before { content: "— "; }
.christmas-sayings .wish-customize, .holiday-sayings .wish-customize { margin-left: 6px; }
.phrase-guide-body.faq-grid { border-top: 0; }
.phrase-guide .faq-item { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
.phrase-guide .faq-item:first-child { padding-top: 0; }
.phrase-guide .faq-item h3 { margin: 0; font-size: 17px; }
.phrase-explainer .faq-item p { margin: 0; font-size: 15px; }