/*
 * CAP Brand Tools: site styles.
 *
 * Every page links the hosted Civil Air Patrol design system first, then this
 * file:
 *
 *   <link rel="stylesheet" href="https://cap-design-system.netlify.app/ds/v1/cap.css">
 *   <link rel="stylesheet" href="brand-tools.css">
 *
 * The hosted stylesheet brings the fonts, the --cap-* tokens, and every cap-*
 * class, so a design change made in the design system reaches these pages
 * without a redeploy here. This file holds only what is specific to Brand
 * Tools: page layout, the generators' previews, and a few classes the page
 * scripts set. It never copies a hex value; anything custom uses the tokens.
 *
 *   1. Base                  A light reset, inside the design system's
 *                            components layer at zero specificity, so every
 *                            cap-* rule still wins over it
 *   2. Home page             bt-* layout
 *   3. Generator and form    bt-* layout, plus the script-set classes
 *      pages
 *   4. Certificate generator The wide-preview workspace and the
 *                            certificate preview itself
 */

/* ------------------------------------------------------------------ */
/* 1. Base                                                             */
/* ------------------------------------------------------------------ */

@layer components {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  :where(html) {
    -webkit-text-size-adjust: 100%;
    /* In-page links land below the sticky header. */
    scroll-padding-top: 5rem;
    scroll-behavior: smooth;
  }

  :where(h1, h2, h3, h4, p, ul, ol, figure) {
    margin: 0;
  }

  :where(img, svg) {
    display: block;
    max-width: 100%;
  }

  :where(button) {
    font: inherit;
  }

  /* A display rule would otherwise unhide closed dialogs. */
  :where([hidden]) {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* 2. Home page                                                        */
/*                                                                     */
/* Layout for this site only. Built from the tokens, prefixed `bt-` so */
/* it never collides with a design-system class.                       */
/* ------------------------------------------------------------------ */

/* Header: the links and the one action sit together on the right. */
.bt-header-end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* A row of buttons. */
.bt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.bt-hero-actions { margin-top: 2.5rem; }

/* Section heading: an h2 and one supporting line, then the content. */
.bt-section-head { max-width: 48rem; }
.bt-section-head .cap-prose { margin-top: 1.25rem; }
.bt-section-body { margin-top: 2.5rem; }

/* Tool and submission cards: icon, title, copy, then the action at the foot. */
.bt-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 900px) {
  .bt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .bt-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.bt-card .cap-card-title { margin-top: 1.25rem; }
.bt-card-copy { margin-top: 0.5rem; }
.bt-card-foot {
  margin-top: auto;
  padding-top: 1.5rem;
}

.bt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-paper);
  color: var(--cap-ink);
}
.bt-icon svg {
  width: 1.375rem;
  height: 1.375rem;
  stroke-width: 1.6;
}

/* What a tool hands back: a row of badges. */
.bt-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}

/* Ink call-out band before the footer. */
.bt-band { padding-block: 3rem; }
@media (min-width: 640px) {
  .bt-band { padding-block: 3.5rem; }
}
.bt-band-title {
  margin-top: 0.75rem;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
}
.bt-band-copy {
  margin-top: 0.375rem;
  color: color-mix(in srgb, var(--cap-white) 70%, transparent);
}

/* The change log opens from the footer, styled like the links beside it. */
.bt-footer-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: color-mix(in srgb, var(--cap-white) 70%, transparent);
  cursor: pointer;
  transition: color 150ms;
}
.bt-footer-button:hover { color: var(--cap-white); }
.bt-footer-button:focus-visible {
  outline: 2px solid var(--cap-white);
  outline-offset: 3px;
}

/* Dialogs: cap-sheet, opened and closed by form-modal.js and changelog-modal.js. */
.bt-sheet--frame {
  max-width: 52rem;
  overflow: hidden;
}
.bt-sheet-frame {
  display: block;
  width: 100%;
  height: min(78dvh, 760px);
  border: 0;
}

/* Change log entries, rendered into the sheet by changelog-modal.js. */
.change-log-entry + .change-log-entry {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cap-line);
}
.change-log-entry h3 {
  font-family: var(--cap-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--cap-ink);
}
.change-log-entry__date {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--cap-slate) 80%, transparent);
}
.change-log-entry ul {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-left: 1.25rem;
  font-size: var(--cap-text-small);
  line-height: 1.6;
}
.change-log-entry__empty,
#change-log-content > p {
  font-size: var(--cap-text-small);
  line-height: 1.6;
}
.change-log-entry__empty { margin-top: 0.75rem; }

/* ------------------------------------------------------------------ */
/* 3. Generator and form pages                                         */
/*                                                                     */
/* A few class names here (callout-toggle, copy-status, show, error,   */
/* is-collapsed, white-preview) are set by the page scripts, so they   */
/* keep their original names.                                          */
/* ------------------------------------------------------------------ */

/* The page you're on, in the header links. */
.cap-header-nav a[aria-current="page"] {
  background: var(--cap-paper);
  color: var(--cap-ink);
}

/* Set by the signature script to hide sections that don't apply to a signature type. */
.hidden { display: none !important; }

/* With three tool links, the header nav waits for desk widths so nothing crowds the logo. */
@media (max-width: 1023px) {
  .cap-header-nav.bt-nav-lg { display: none; }
}

/* Touch targets: every tap target in the chrome is at least 44px. */
.cap-header-brand { min-height: 2.75rem; }
.cap-header .cap-btn--sm { min-height: 2.75rem; }
.cap-footer-nav {
  row-gap: 0;
  margin-top: 1.25rem;
}
.cap-footer-nav a,
.bt-footer-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* Tool pages run wider than the 64rem reading measure to fit a form and a preview. */
.cap-container.bt-wide { max-width: 80rem; }

/* Intro: a slim ink band with the page's h1 and one line about it. */
.bt-intro { padding-block: 2.5rem; }
@media (min-width: 640px) {
  .bt-intro { padding-block: 3.5rem; }
}
.bt-intro .cap-display { font-size: clamp(1.875rem, 4vw, 2.75rem); }
.bt-intro-lede {
  max-width: 42rem;
  margin-top: 1rem;
  color: color-mix(in srgb, var(--cap-white) 80%, transparent);
}

/* Workspace: the form on the left and a sticky preview on the right, on paper. */
.bt-workspace {
  padding: 2rem var(--cap-gutter) 4rem;
  background: var(--cap-paper);
}
@media (min-width: 640px) {
  .bt-workspace { padding: 2.5rem var(--cap-gutter-wide) 5rem; }
}
.bt-workspace-inner {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .bt-workspace-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.bt-workspace--single .bt-workspace-inner {
  max-width: 48rem;
  grid-template-columns: minmax(0, 1fr);
}
.bt-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
@media (min-width: 1024px) {
  .bt-sticky {
    position: sticky;
    top: calc(var(--cap-header-height-wide) + 1.5rem);
  }
}

/* Card content flows with even spacing. */
.bt-flow > * + * { margin-top: 1.25rem; }
.bt-card-head { max-width: 40rem; }
.bt-card-head > * + * { margin-top: 0.375rem; }

/* A long form split into sections inside one card. */
.bt-form-section + .bt-form-section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--cap-line);
}
.bt-form-section > .bt-card-head + * { margin-top: 1.25rem; }

/* Fields */
:is(.cap-field, .bt-fieldset) + :is(.cap-field, .bt-fieldset) { margin-top: 1.25rem; }
.bt-label-note {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: color-mix(in srgb, var(--cap-slate) 85%, transparent);
}
.bt-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.bt-fieldset > legend {
  margin-bottom: 0.4375rem;
  padding: 0;
}
.cap-input:disabled {
  background: var(--cap-paper);
  cursor: not-allowed;
}
/* Set by the business card script on a field that breaks a rule. */
.cap-input.error {
  border-color: var(--cap-red);
  background: color-mix(in srgb, var(--cap-red) 4%, var(--cap-white));
}
/* A select that only needs to be as wide as its options. */
.bt-select-auto { width: auto; }

/* Controls that sit side by side from 640px. */
.bt-row { display: grid; gap: 0.5rem; }
.bt-row + .bt-row { margin-top: 0.5rem; }
@media (min-width: 640px) {
  .bt-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt-row--type { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .bt-row--phone { grid-template-columns: 9.5rem minmax(0, 1fr) 9.5rem; }
}

/* Radio and checkbox options. */
.bt-choices { display: grid; gap: 0.5rem; }
@media (min-width: 640px) {
  .bt-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bt-choice-other {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.bt-choice-other label { cursor: pointer; }
.bt-choice-other .cap-input {
  flex: 1 1 12rem;
  width: auto;
  min-height: 2.75rem;
  padding-block: 0.5rem;
}

/* Collapsible guidance: callout-toggle is wired up by the page script. */
.bt-callout {
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-card);
  background: var(--cap-paper);
}
.bt-callout--static { padding: 1rem 1.125rem 1.125rem; }
.bt-callout-title {
  font-family: var(--cap-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cap-ink);
}
.callout-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: var(--cap-control-height);
  padding: 0.75rem 1.125rem;
  border: 0;
  border-radius: var(--cap-radius-card);
  background: transparent;
  font-family: var(--cap-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cap-ink);
  text-align: left;
  cursor: pointer;
}
.callout-toggle:focus-visible {
  outline: 2px solid var(--cap-yellow);
  outline-offset: 2px;
}
.callout-toggle__icon {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cap-slate);
}
.callout-content { padding: 0 1.125rem 1.125rem; }
.callout-content.is-collapsed { display: none; }
.bt-list {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
  font-size: var(--cap-text-small);
  line-height: 1.6;
}
.bt-steps { margin-top: 0.75rem; }
.bt-callout--static .bt-list,
.bt-callout--static .cap-small { margin-top: 0.5rem; }

/* A warning that flashes in (the two-line duty position limit). */
.bt-flash:not(.show) { display: none; }

/* Brand standards review: what the generator flagged and how to fix it. */
.bt-review {
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--cap-red) 25%, var(--cap-white));
  border-radius: var(--cap-radius-card);
  background: color-mix(in srgb, var(--cap-red) 5%, var(--cap-white));
  color: var(--cap-ink);
  font-size: var(--cap-text-small);
  line-height: 1.55;
}
.bt-review--inset { margin-bottom: 1.5rem; }
.bt-review h3 {
  font-family: var(--cap-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--cap-red-dark);
}
.bt-review > p { margin-top: 0.25rem; }
.bt-review ul {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-left: 1.25rem;
}
.bt-review-items {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}
.bt-review-item {
  padding: 0.875rem 1rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-white);
}
.bt-review-item > * + * { margin-top: 0.25rem; }
.bt-review-item-title {
  font-weight: 700;
  color: var(--cap-red-dark);
}

/* Copy confirmation under the signature buttons (the script sets these classes). */
.copy-status {
  display: none;
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-paper);
  font-size: var(--cap-text-small);
  line-height: 1.5;
  color: var(--cap-ink);
}
.copy-status.show { display: block; }
.copy-status--success {
  border-color: transparent;
  background: var(--cap-success-bg);
  color: var(--cap-success);
}
.copy-status--error {
  border-color: color-mix(in srgb, var(--cap-red) 25%, var(--cap-white));
  background: color-mix(in srgb, var(--cap-red) 6%, var(--cap-white));
  color: var(--cap-red-dark);
}

/* Preview surfaces */
.bt-preview {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-paper);
  overflow: auto;
}
.bt-preview--white { background: var(--cap-white); }
.bt-preview-actions { margin-top: 1.25rem; }
.bt-preview-actions + .cap-hint { margin-top: 0.75rem; }

/* Logo generator canvas. A white logo previews on ink so it stays visible. */
.bt-canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-white);
}
.bt-canvas.white-preview { background: var(--cap-ink); }

/* Signature preview: the generated signature carries its own inline styles. */
.bt-signature-preview { min-height: 12rem; }

/* Business card PDF preview, with the overlay shown while warnings are open. */
.bt-pdf-frame {
  position: relative;
  min-height: 20rem;
  margin-top: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-paper);
}
.bt-pdf-frame iframe {
  display: block;
  width: 100%;
  height: 72vh;
  min-height: 32rem;
  border: 0;
  background: var(--cap-white);
}
@media (max-width: 639px) {
  .bt-pdf-frame iframe { height: 62vh; min-height: 26rem; }
}
.bt-pdf-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--cap-paper) 85%, transparent);
}
.bt-pdf-overlay p {
  max-width: 20rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-white);
  font-size: var(--cap-text-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--cap-ink);
  text-align: center;
}

/* Tom Select (the searchable emblem pickers) dressed as cap-input. */
.ts-wrapper.cap-input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}
.ts-wrapper .ts-control {
  min-height: var(--cap-control-height) !important;
  padding: 0.6875rem 0.875rem !important;
  border: 1px solid var(--cap-line-dark) !important;
  border-radius: var(--cap-radius-control) !important;
  background: var(--cap-white) !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  color: var(--cap-ink) !important;
}
.ts-wrapper .ts-control input { font-size: 1rem !important; }
.ts-wrapper.focus .ts-control { border-color: var(--cap-ink) !important; }
.ts-dropdown {
  z-index: 40 !important;
  max-height: 20rem !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 1px solid var(--cap-line-dark) !important;
  border-radius: var(--cap-radius-control) !important;
  background: var(--cap-white) !important;
  box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--cap-ink) 25%, transparent) !important;
  font-size: var(--cap-text-small) !important;
  color: var(--cap-ink) !important;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header {
  white-space: normal;
  word-break: break-word;
}
.ts-dropdown .active { background: color-mix(in srgb, var(--cap-blue) 6%, var(--cap-white)) !important; }
/* Roomier options for fingers. */
@media (pointer: coarse) {
  .ts-dropdown .option {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Submission forms shown inside the home page sheet: the sheet supplies the chrome. */
.embed .cap-skip-link,
.embed .cap-header,
.embed .bt-intro,
.embed .cap-footer,
.embed .bt-embed-hide { display: none; }
.embed .bt-workspace {
  padding: 1rem;
  background: var(--cap-white);
}
.embed .bt-workspace .cap-card { border: 0; padding: 0.5rem; background: transparent; }

/* ------------------------------------------------------------------ */
/* 4. Certificate generator                                            */
/*                                                                     */
/* The certificate is landscape, so its preview gets the wider column. */
/* Everything inside .certificate-preview is the certificate itself:   */
/* the exports capture it as-is, so it keeps its own type and literal  */
/* ink colors on purpose, like the other generators' output. The       */
/* script sets preview-draggable, is-dragging, award-mode,             */
/* preview-custom-image, and the image-list__* classes, so those names */
/* must stay.                                                          */
/* ------------------------------------------------------------------ */

/* minmax(0, ...) lets the certificate scroll inside its frame on phones
   instead of stretching the page past the screen. */
.bt-workspace--wide-preview .bt-workspace-inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .bt-workspace--wide-preview .bt-workspace-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.bt-field-group > * + * { margin-top: 1.25rem; }
.bt-row.bt-row--spaced { margin-top: 1.25rem; }
/* Side-by-side fields line up; the design system's stacked-field gap doesn't apply. */
@media (min-width: 640px) {
  .bt-row > .cap-field + .cap-field { margin-top: 0; }
}
.bt-callout-action { margin-top: 0.75rem; }
.bt-export-format { margin-top: 1.25rem; }
.bt-status { margin-top: 0.75rem; }
.bt-status:empty { display: none; }
.bt-file-input.cap-input {
  min-height: var(--cap-control-height);
  padding-block: 0.5rem;
  cursor: pointer;
}

/* Uploaded Activities graphics. */
.image-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.image-list:empty { display: none; }
.image-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-paper);
}
.image-list__thumb {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  object-fit: contain;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-white);
}
.image-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--cap-text-small);
  color: var(--cap-slate);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-list__remove { flex-shrink: 0; }

/* The certificate preview. */
.bt-certificate-frame { padding: 0.75rem; }

.certificate-preview {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 11 / 8.5;
  margin: 0 auto;
  background: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: normal;
  color: #111;
  /* Sizes below are in cqw (percent of the certificate's width), so the
     certificate keeps the same proportions at any screen size. They match
     the original desktop layout, where the preview was 866px wide. */
  container-type: inline-size;
}
.certificate-preview img { max-width: none; }

/* While an export renders, html2canvas measures font baselines with a probe
   (an inline image next to text) appended to <body>. Keep that image inline,
   or the base reset's display: block shifts every exported line down. */
.bt-exporting > div:last-child > img {
  display: inline;
  max-width: none;
}

.certificate-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.preview-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(var(--drag-scale, 1));
  text-align: center;
  color: #111;
  white-space: nowrap;
}

.achievement-number {
  top: 24.5%;
  width: 84%;
  font-size: 3.695cqw;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: #0a2c85;
  white-space: normal;
}
.achievement-title {
  top: 34.2%;
  font-size: 2.771cqw;
  font-weight: 700;
  color: #17307a;
}
.cadet-name {
  top: 44.7%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.926cqw;
  color: #111;
}
.cadet-rank {
  top: 53.3%;
  font-size: 2.540cqw;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #163b8f;
}
.certificate-preview.award-mode .cadet-name { top: 41.8%; }
.certificate-preview.award-mode .cadet-rank { top: 50.5%; }

.presented-line {
  top: 64.4%;
  font-size: 2.079cqw;
  font-weight: 700;
  color: #222;
}
.unit-line {
  top: 68.4%;
  font-size: 1.963cqw;
  font-style: italic;
  font-weight: 700;
  color: #222;
}
.left-signer-name,
.right-signer-name {
  top: 87.3%;
  font-size: 2.079cqw;
  color: #111;
}
.left-signer-title,
.right-signer-title {
  top: 91%;
  font-size: 1.732cqw;
  color: #222;
}
.left-signer-name,
.left-signer-title { left: 28.5%; }
.right-signer-name,
.right-signer-title { left: 73.7%; }
.right-signer-title {
  width: 19%;
  line-height: 1.2;
  white-space: normal;
}

.preview-rank-image,
.preview-ribbon-image,
.preview-custom-image {
  position: absolute;
  top: 50%;
  width: auto;
  object-fit: contain;
  transform: translate(-50%, -50%) translate(var(--drag-x, 0px), var(--drag-y, 0px)) scale(var(--drag-scale, 1));
}
.preview-rank-image { left: 22%; height: 10.393cqw; display: none; }
.preview-ribbon-image { left: 79%; height: 4.273cqw; display: none; }
.preview-custom-image { left: 50%; height: 13.857cqw; max-width: 70%; }

.preview-draggable {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.preview-draggable.is-dragging { cursor: grabbing; }
.preview-draggable:focus-visible {
  outline: 2px solid var(--cap-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* On small screens the certificate keeps a readable size and scrolls sideways. */
@media (max-width: 768px) {
  .certificate-preview { min-width: 640px; }
}