/*
 * 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
 *   5. Banner and tablecloth The mockup and print-layout preview
 *      generator
 *   6. QR code generator     The code preview and the center-logo choices
 *   7. Envelope and mailing  The envelope and label-sheet preview, its
 *      label generator       guides and pager, and the address fields
 */

/* ------------------------------------------------------------------ */
/* 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;
  }
  @media (prefers-reduced-motion: reduce) {
    :where(html) { scroll-behavior: auto; }
  }

  :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;
}

/* Language button, added by i18n.js: "Español" on an English page, "English"
   on a Spanish one. The header copy shows where the header has room; on
   narrower screens the copy at the top of the page's first band takes over. */
.bt-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--cap-radius-control);
  background: transparent;
  color: var(--cap-slate);
  font-size: var(--cap-text-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.bt-lang svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.bt-lang:hover { background: var(--cap-paper); color: var(--cap-ink); }
.bt-lang:focus-visible { outline: 2px solid var(--cap-yellow); outline-offset: 3px; }

/* On an ink band, lined up with the heading below it. */
.bt-lang--band {
  margin: -0.75rem 0 0.75rem -0.75rem;
  color: inherit;
}
.bt-lang--band:hover { background: rgb(255 255 255 / 0.08); color: inherit; }

.bt-lang--header { display: none; }
@media (min-width: 900px) {
  .bt-lang--header { display: inline-flex; }
  .bt-lang--band { display: none; }
}

/* Spanish labels run longer, so on a phone a button wraps its label instead
   of pushing past the edge of the screen. */
@media (max-width: 479px) {
  :lang(es) main .cap-btn { white-space: normal; text-align: center; }
}

/* i18n.js hides a Spanish page for the moment it takes to swap in the text. */
.bt-i18n-pending body { visibility: hidden; }

/* Keyboard focus on form fields. The design system means to ring every field
   in yellow, but its later `.cap-input:focus { outline: none }` cancels the
   ring and leaves only a 1px border change. This puts the ring back, on Tom
   Select's searchable dropdowns too. */
.cap-input:focus-visible,
.ts-wrapper.focus .ts-control {
  outline: 2px solid var(--cap-yellow);
  outline-offset: 3px;
}

/* The footer's version line is white at 35% on ink in the design system,
   about 3.2:1 at 12px. At 55% it reaches about 5.7:1. */
.cap-footer-legal p + p { color: color-mix(in srgb, var(--cap-white) 55%, transparent); }

/* Between tablet and laptop widths the hero photo's aircraft sit behind the
   headline and the lede, and the design system's light wash leaves white text
   on a near-white fuselage. A deeper wash over the text column keeps the text
   readable there; the aircraft still show at the right. */
@media (min-width: 640px) and (max-width: 1279px) {
  .cap-hero-wash {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--cap-ink) 82%, transparent) 0,
      color-mix(in srgb, var(--cap-ink) 72%, transparent) 46rem,
      color-mix(in srgb, var(--cap-ink) 15%, transparent) 100%
    );
  }
}

/* What's new: a slim note under the home page header about the latest
   release, filled in and dismissed by changelog-modal.js. */
.bt-whats-new {
  padding: 0.5rem var(--cap-gutter);
  border-bottom: 1px solid var(--cap-line);
  background: var(--cap-paper);
  color: var(--cap-ink);
}
@media (min-width: 640px) {
  .bt-whats-new { padding-inline: var(--cap-gutter-wide); }
}
.bt-whats-new-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.bt-whats-new .cap-badge { flex-shrink: 0; }
.bt-whats-new-text {
  flex: 1;
  min-width: 0;
  font-size: var(--cap-text-small);
  line-height: 1.5;
}
.bt-whats-new .cap-icon-btn { margin-right: -0.625rem; }
@media (max-width: 479px) {
  .bt-whats-new-inner { align-items: flex-start; }
  .bt-whats-new .cap-badge { margin-top: 0.75rem; }
  .bt-whats-new-text { padding-block: 0.625rem; }
}

/* A button that reads as a link inside a sentence. */
.bt-text-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--cap-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cap-line-dark);
  cursor: pointer;
}
.bt-text-button:hover { text-decoration-color: currentColor; }
.bt-text-button:focus-visible {
  outline: 2px solid var(--cap-yellow);
  outline-offset: 3px;
}

/* 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; }

/* Home page search: products inside the tools that match (home-search.js),
   under the search box, above the tool cards. */
.bt-search-products { max-width: 40rem; margin-top: 1rem; }
.bt-search-products-title { margin: 0; font-weight: 600; }
.bt-search-results {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-white);
}
.bt-search-results li + li { border-top: 1px solid var(--cap-line); }
.bt-search-link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 44px;
  justify-content: center;
  padding: 0.625rem 1rem;
  color: inherit;
  text-decoration: none;
}
.bt-search-link:hover .bt-search-name,
.bt-search-link:focus-visible .bt-search-name { text-decoration: underline; }
.bt-search-name { font-weight: 600; color: var(--cap-ink); }
.bt-search-where { font-size: var(--cap-text-small); color: var(--cap-slate); }
.bt-section-body { margin-top: 2.5rem; }

/* The tool catalog. A search field and category chips sit on top
   (home-tools.js shows and runs them). Each category lists its tools under
   its name, or beside it on wide screens, where the name stays in view while
   its cards scroll past. */
.bt-finder { display: grid; gap: 1rem; }
.bt-finder-search { max-width: 30rem; }
.bt-finder-search .cap-input { width: 100%; }
/* The chip is a flex box, which drops the space before its count. */
.bt-finder-chips .cap-chip { gap: 0.375rem; }
.bt-chip-count {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
/* On a phone the chips stay on one line and scroll sideways, edge to edge,
   instead of stacking three rows deep above the cards. */
@media (max-width: 639px) {
  .bt-finder-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--cap-gutter) * -1);
    padding: 0.375rem var(--cap-gutter);
    scroll-padding-inline: var(--cap-gutter);
    scrollbar-width: none;
  }
  .bt-finder-chips::-webkit-scrollbar { display: none; }
  .bt-finder-chips .cap-chip { flex-shrink: 0; white-space: nowrap; }
}

.bt-tool-groups { margin-top: 2.5rem; }
/* A rule between categories; hidden ones don't count. */
.bt-tool-group:not([hidden]) ~ .bt-tool-group:not([hidden]) {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--cap-line);
}
.bt-tool-group-title {
  font-family: var(--cap-font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--cap-ink);
}
.bt-tool-group-summary { max-width: 40rem; margin-top: 0.375rem; }
.bt-tool-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .bt-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bt-tool-group {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .bt-tool-group-head { position: sticky; top: 6rem; }
  .bt-tool-grid { margin-top: 0; }
}

/* A tool card. The title's link covers the whole card, so a tap anywhere on
   it opens the tool; the arrow says so. */
.bt-tool {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .bt-tool { padding: 1.5rem; }
}
.bt-tool-head { display: flex; align-items: center; gap: 1rem; }
.bt-tool-title { flex: 1; min-width: 0; font-size: 1.125rem; }
.bt-tool-link { color: inherit; text-decoration: none; }
.bt-tool-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--cap-radius-card);
}
.bt-tool-link:focus-visible { outline: none; }
.bt-tool-link:focus-visible::after { outline: 2px solid var(--cap-yellow); outline-offset: 3px; }
.bt-tool:hover .bt-tool-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.bt-tool-arrow {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: color-mix(in srgb, var(--cap-slate) 70%, transparent);
  transition: color 150ms;
}
.bt-tool:hover .bt-tool-arrow,
.bt-tool:focus-within .bt-tool-arrow { color: var(--cap-ink); }
.bt-tool .bt-card-copy { margin-top: 1rem; }
/* File types line up along the bottom of each row of cards. */
.bt-tool .bt-outputs { margin-top: auto; padding-top: 1rem; }

/* No search results. */
.bt-tools-empty svg { color: var(--cap-slate); }
.bt-tools-empty .bt-actions { justify-content: center; margin-top: 0.25rem; }

/* Submission and offline cards: icon, title, copy, then the action at the foot. */
.bt-grid {
  display: grid;
  gap: 1rem;
}
@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. The
   body takes focus so a keyboard can scroll long release notes. */
#change-log-content:focus-visible {
  outline: 2px solid var(--cap-yellow);
  outline-offset: -2px;
}
.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: var(--cap-slate);
}
.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.                                          */
/* ------------------------------------------------------------------ */

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

/* Site header: the same on every page (scripts/lib/site-header.mjs writes it).
   The Apps menu shows at every width; Guidance and Submissions join it from
   768px, where the design system shows its header nav. */
.cap-header-inner { position: relative; }
.cap-header-nav.bt-nav { display: flex; }
.bt-nav-section { display: none; }
@media (min-width: 768px) {
  .bt-nav-section { display: inline-flex; }
  /* The menu repeats them for narrower screens, where the header can't. */
  .bt-apps-narrow { display: none !important; }
}
.cap-header-nav a { white-space: nowrap; }

/* On phones the Brand Portal button gives its room to the Apps menu, which
   links the portal too. */
@media (max-width: 479px) {
  .bt-header-portal { display: none; }
}

/* The Apps button reads like the header links beside it. */
.bt-apps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--cap-radius-control);
  background: transparent;
  color: var(--cap-slate);
  font: inherit;
  font-size: var(--cap-text-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.bt-apps-toggle:hover,
.bt-apps-toggle[aria-expanded="true"] { background: var(--cap-paper); color: var(--cap-ink); }
.bt-apps-toggle:focus-visible { outline: 2px solid var(--cap-yellow); outline-offset: 3px; }
.bt-apps-icon,
.bt-apps-chevron { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.bt-apps-toggle[aria-expanded="true"] .bt-apps-chevron { transform: rotate(180deg); }

/* The menu hangs below the header, lined up with its right edge. It's a
   bordered card like the rest of the system: no shadow. */
.bt-apps-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: var(--cap-gutter);
  left: var(--cap-gutter);
  z-index: 60;
  max-height: calc(100dvh - var(--cap-header-height) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  border: 1px solid var(--cap-line-dark);
  border-radius: var(--cap-radius-card);
  background: var(--cap-white);
  color: var(--cap-ink);
  white-space: normal;
}
@media (min-width: 640px) {
  .bt-apps-menu {
    left: auto;
    right: var(--cap-gutter-wide);
    width: 36rem;
    max-height: calc(100dvh - var(--cap-header-height-wide) - 1.5rem);
  }
}
.bt-apps-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .bt-apps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cap-header-nav .bt-apps-list a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-height: 2.75rem;
  height: 100%;
  padding: 0.625rem 0.75rem;
  white-space: normal;
}
.bt-apps-name { color: var(--cap-ink); font-weight: 600; }
.bt-apps-summary { color: var(--cap-slate); font-weight: 400; font-size: 0.8125rem; line-height: 1.35; }
/* The page you're on, in the menu. */
.cap-header-nav .bt-apps-list a[aria-current="page"] {
  padding-left: calc(0.75rem - 3px);
  border-left: 3px solid var(--cap-ink);
  background: var(--cap-paper);
}
.bt-apps-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--cap-line);
}

/* The "Brand Tools" label steps aside wherever the header is crowded; the
   logo still links home. The brand never shrinks, so a header that doesn't
   fit runs long (and the smoke test catches it) instead of the label sliding
   under the Apps button.
   - Spanish: "Herramientas de marca" doesn't fit beside the menu at any width.
   - English: not beside the Brand Portal button on phones (480-639px), nor
     beside Guidance and Submissions until 1,100px. */
.cap-header-brand { flex-shrink: 0; }
:lang(es) .cap-header-label { display: none; }
@media (min-width: 480px) and (max-width: 639px), (min-width: 768px) and (max-width: 1099px) {
  .cap-header-label { 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;
}
/* The footer's links sit in labeled columns: two across on a phone, then as
   many as fit, up to all six on a laptop. */
.cap-footer-nav.bt-footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .cap-footer-nav.bt-footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cap-footer-nav.bt-footer-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.bt-footer-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.bt-footer-heading {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cap-white);
}
.cap-footer-nav .bt-footer-group a,
.cap-footer-nav .bt-footer-group .bt-footer-button {
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: left;
}
/* With a mouse, the links sit closer; touch screens keep 44px targets. */
@media (pointer: fine) {
  .cap-footer-nav .bt-footer-group a,
  .cap-footer-nav .bt-footer-group .bt-footer-button { min-height: 2rem; }
}
.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);
}

/* Until the preview sits beside the form, it's a long scroll below it, so
   the intro offers a shortcut. */
.bt-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  color: var(--cap-white);
  font-size: var(--cap-text-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--cap-white) 45%, transparent);
}
.bt-jump:hover { text-decoration-color: currentColor; }
.bt-jump:focus-visible {
  outline: 2px solid var(--cap-white);
  outline-offset: 3px;
}
.bt-jump svg { width: 1rem; height: 1rem; flex-shrink: 0; }
@media (min-width: 1024px) {
  .bt-jump { display: none; }
}

/* 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;
  /* One column on phones, never wider than the screen, whatever is in it. */
  grid-template-columns: minmax(0, 1fr);
  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; }
/* Stacked callouts in the guidance card sit closer than other card content. */
.bt-callout + .bt-callout { margin-top: 0.75rem; }
/* "How to use this tool": numbered steps, then where the file lands. */
.bt-howto-note {
  margin-top: 0.75rem;
  color: var(--cap-slate);
}
.bt-list {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
  font-size: var(--cap-text-small);
  line-height: 1.6;
}
.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); }
/* On small phones a thinner frame leaves room for the 200px-wide logo in the
   email signature, which would otherwise be cut off at 320px. */
@media (max-width: 479px) {
  .bt-preview { padding: 0.5rem; }
}
.bt-preview-actions { margin-top: 1.25rem; }
.bt-preview-actions ~ .cap-hint { margin-top: 0.75rem; }

/* Logo generator canvas and EPS generator preview. 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; }
}
/* Phones get one card up close instead of a full sheet too small to read. */
.bt-pdf-frame.is-closeup {
  min-height: 12rem;
  padding: 0.75rem;
}
.bt-card-closeup {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 4;
  border: 1px solid var(--cap-line);
  background: var(--cap-white);
}
.bt-pdf-frame.is-closeup .cap-hint { margin-top: 0.75rem; }
.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; }
}

/* ------------------------------------------------------------------ */
/* 5. Banner and tablecloth generator                                  */
/*                                                                     */
/* The preview is one SVG: a mockup (table cover or grommeted banner)  */
/* or the print layout with its guides. The script sets is-mockup,     */
/* is-dark, and white-preview, so those names stay.                    */
/* ------------------------------------------------------------------ */

.bt-preview-mode { margin-top: 1.25rem; }
.bt-row + .cap-hint { margin-top: 0.5rem; }

/* A tall banner shrinks to fit the screen instead of running off it. */
.bt-banner-preview { max-height: 70vh; }
.bt-banner-preview.is-mockup { background: var(--cap-paper); }

.bt-mockup-edge {
  fill: none;
  stroke: var(--cap-line-dark);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bt-mockup-shadow {
  fill: var(--cap-ink);
  opacity: 0.12;
}
.bt-mockup-grommet,
.bt-mockup-grommet-hole { fill: var(--cap-paper); }

/* Print-layout guides, never part of the file. */
.bt-guides { color: var(--cap-slate); }
.bt-banner-preview.is-dark .bt-guides { color: var(--cap-white); }
.bt-guides > * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bt-guide-safe { stroke-dasharray: 6 4; }
.bt-guide-grommet { opacity: 0.6; }

/* A heads-up that doesn't block the download. */
.bt-status--warn {
  font-weight: 600;
  color: var(--cap-red-dark);
}

/* ------------------------------------------------------------------ */
/* 6. QR code generator                                                */
/* ------------------------------------------------------------------ */

/* The white tile sits on paper so its quiet zone shows. */
.bt-qr-preview {
  max-width: 26rem;
  margin-inline: auto;
  background: var(--cap-paper);
}
.bt-row + .bt-fieldset,
.bt-fieldset + .bt-field-group { margin-top: 1.25rem; }
.bt-choices + .cap-hint { margin-top: 0.5rem; }

/* ------------------------------------------------------------------ */
/* 7. Envelope and mailing label generator                             */
/*                                                                     */
/* The preview is one SVG: the envelope or label sheet as white paper, */
/* the art, and guides for the postal zones and label edges, which     */
/* never print. The script writes bt-paper and the bt-guide-* classes  */
/* into the SVG, so those names stay.                                  */
/* ------------------------------------------------------------------ */

.bt-envelope-preview {
  max-height: 70vh;
  background: var(--cap-paper);
}
.bt-paper {
  fill: var(--cap-white);
  stroke: var(--cap-line-dark);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bt-guide-zone,
.bt-guide-edge { stroke-dasharray: 6 4; }
.bt-guides > .bt-guide-used {
  fill: color-mix(in srgb, var(--cap-slate) 14%, transparent);
  stroke-dasharray: 6 4;
}
.bt-guides > .bt-guide-text {
  fill: currentColor;
  stroke: none;
  font-family: var(--cap-font-body, sans-serif);
  font-weight: 600;
}

.bt-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.bt-pager .cap-btn { min-width: 2.75rem; }
.bt-pager-label {
  min-width: 9rem;
  font-size: var(--cap-text-small);
  text-align: center;
  color: var(--cap-slate);
}

/* City, state, and ZIP code share a row from 640px. */
@media (min-width: 640px) {
  .bt-row--city { grid-template-columns: minmax(0, 1fr) 6rem 8rem; }
}
.bt-row--city + .cap-hint { margin-top: 0.5rem; }
.bt-row--city ~ .bt-fieldset { margin-top: 1.25rem; }
.bt-input-short { max-width: 8rem; }
.bt-address-list {
  min-height: 13rem;
  resize: vertical;
  line-height: 1.5;
}
.bt-field-group > .bt-actions + .bt-status { margin-top: 0.75rem; }

/* ------------------------------------------------------------------ */
/* 8. Letterhead generator                                             */
/*                                                                     */
/* The preview is a letter-size page drawn to scale: 1 in is 100cqw /  */
/* 8.5 of its frame, so type sizes in points become cqw. Like the other previews,   */
/* the page keeps the template's literal navy (#002060) and Calibri on */
/* purpose: it shows the official template, not this site's design.    */
/* The script writes the bt-letter* classes.                           */
/* ------------------------------------------------------------------ */

/* The frame is the container the page's cqw units measure. */
.bt-letter-frame { container-type: inline-size; }
.bt-letter {
  --in: calc(100cqw / 8.5);
  --pt: calc(var(--in) / 72);
  position: relative;
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
  padding: calc(var(--in) * 0.5) var(--in) var(--in);
  border: 1px solid var(--cap-line-dark);
  background: var(--cap-white);
  color: #000;
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  font-size: calc(var(--pt) * 12);
  line-height: 1.2;
}
.bt-letter p { margin: 0; }
.bt-letterhead {
  color: #002060;
  font-size: calc(var(--pt) * 11);
  text-align: center;
}
.bt-letter-seal {
  position: absolute;
  top: calc(var(--in) * 0.5 - var(--pt) * 6);
  width: var(--in);
  height: var(--in);
  object-fit: contain;
}
.bt-letter-seal--left { left: calc(var(--in) - var(--pt) * 37.5); }
.bt-letter-seal--right { left: calc(var(--in) + var(--pt) * 432.75); }
.bt-letter-body { margin-top: calc(var(--pt) * 28); }
.bt-letter-date { text-align: right; }
.bt-letter-gap { margin-top: calc(var(--pt) * 14) !important; }
.bt-letter-gap-lg { margin-top: calc(var(--pt) * 56) !important; }
.bt-letter-indent { text-indent: calc(var(--in) * 0.25); }
.bt-letter-signature {
  margin-top: calc(var(--pt) * 14);
  margin-left: calc(var(--in) * 3.25);
}
.bt-letter-fill { color: #5f6571; } /* placeholder gray, 5.6:1 on white */
.bt-letter-memo-more { padding-left: calc(var(--in) * 1.375); }
.bt-letter-body p { white-space: pre-wrap; }

/* ------------------------------------------------------------------ */
/* Subordinate Graphic Generator: the Every unit at once card.        */
/* ------------------------------------------------------------------ */
#batch > .cap-field,
#batch > .bt-actions,
#batch > .cap-choice,
#batch > .bt-fieldset { margin-top: 1.25rem; }
#batch > .bt-status:not(:empty) { margin-top: 0.75rem; }

/* ------------------------------------------------------------------ */
/* EPS Generator: stamp and embosser previews at their own size.      */
/* ------------------------------------------------------------------ */
.bt-product-preview { display: grid; place-items: center; padding: 1.5rem; }
.bt-product-preview svg { width: 100%; max-height: 18rem; }
.bt-product-guide { fill: none; stroke: #A3A8B3; stroke-width: 0.6; stroke-dasharray: 2 2; }

/* ------------------------------------------------------------------ */
/* Phone Lock Screen Generator                                         */
/*                                                                     */
/* The preview SVG draws its own phone, screen, and clock overlay, so  */
/* these rules only size it and drop the canvas frame around it.       */
/* ------------------------------------------------------------------ */
.bt-phone-toggle { margin-top: 1.25rem; }
.bt-phone-stage { display: flex; justify-content: center; }
.bt-canvas.bt-phone-preview {
  width: auto;
  max-width: 100%;
  height: 70vh;
  max-height: 44rem;
  min-height: 24rem;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ------------------------------------------------------------------ */
/* Leader Bio Sheet Generator                                          */
/*                                                                     */
/* The headshot is framed on a canvas the member drags, in the bio     */
/* template's photo frame. The preview is one SVG per page, stacked in */
/* .bt-bio-pages, set in the same Ubuntu and Rajdhani files the PDF    */
/* embeds. Kerning and ligatures are off because jsPDF uses neither,   */
/* so lines measure the same in both. Print shows only the copies the  */
/* script puts in .bt-bio-print, one SVG to a letter page.             */
/* ------------------------------------------------------------------ */
@font-face {
  font-family: "CAP Bio Ubuntu";
  src: url("bio-generator/assets/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "CAP Bio Rajdhani";
  src: url("bio-generator/assets/Rajdhani-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "CAP Bio Rajdhani";
  src: url("bio-generator/assets/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
.bt-photo-editor {
  max-width: 15rem;
  margin-top: 1rem;
  cursor: grab;
  touch-action: none;
}
.bt-photo-editor.is-dragging { cursor: grabbing; }
.bt-photo-editor:focus-visible { outline: 2px solid var(--cap-yellow); outline-offset: 3px; }
.bt-range {
  display: block;
  width: 100%;
  accent-color: var(--cap-blue);
}
#photoTools { margin-top: 1rem; }
.bt-bio-pages {
  display: grid;
  gap: 1rem;
  max-height: min(80vh, 60rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.bt-bio-pages svg { display: block; width: 100%; height: auto; }
.bt-bio-text {
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "kern" 0, "liga" 0;
  text-rendering: geometricPrecision;
}
.bt-bio-print { display: none; }

@media print {
  @page { size: letter; margin: 0; }
  body:has(.bt-bio-print) > :not(.bt-bio-print) { display: none !important; }
  .bt-bio-print { display: block; }
  .bt-bio-print svg {
    display: block;
    width: 8.5in;
    height: 11in;
    break-after: page;
  }
  .bt-bio-print svg:last-child { break-after: auto; }
}

/* Formal Headshot Generator: the preview with its framing guides, the
   standards checklist, and the adjustment sliders. */
.bt-headshot-preview {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
}
.bt-headshot-preview canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cap-radius-control);
  background: var(--cap-paper);
}
.bt-headshot-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bt-headshot-guides line {
  stroke: var(--cap-yellow);
  stroke-width: 4;
  stroke-dasharray: 18 14;
}
.bt-checks {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}
.bt-check {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-size: var(--cap-text-small);
}
.bt-check-mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.8rem;
}
.bt-check--ok .bt-check-mark {
  background: var(--cap-success-bg);
  color: var(--cap-success);
}
.bt-check--fix .bt-check-mark {
  background: color-mix(in srgb, var(--cap-red) 12%, var(--cap-white));
  color: var(--cap-red-dark);
}
.bt-slider input[type="range"] {
  width: 100%;
  accent-color: var(--cap-blue);
}
.bt-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.bt-headshot-preview canvas { touch-action: none; }
.bt-headshot-preview canvas[data-mode="place"] { cursor: grab; }
.bt-headshot-preview canvas[data-mode="place"]:active { cursor: grabbing; }
.bt-headshot-preview canvas[data-mode="cutout"] { cursor: crosshair; }
.bt-headshot-preview canvas:focus-visible {
  outline: 3px solid var(--cap-yellow);
  outline-offset: 3px;
}
.bt-cutout-tools { margin-top: 1rem; }
.bt-headshot-preview canvas[data-mode="cutout"][data-tool="hand"] { cursor: grab; }
.bt-zoom { align-items: center; }
.bt-zoom-level { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.bt-batch {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-paper);
}
.bt-batch .bt-actions { align-items: center; }
.bt-batch-position { flex: 1; min-width: 0; font-size: var(--cap-text-small); font-weight: 600; }
.bt-batch .cap-hint:empty { display: none; }

/* Brand Writing Check: the pasted text with each problem marked. */
.bt-marked {
  margin-top: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-white);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--cap-text-small);
  max-height: 32rem;
  overflow-y: auto;
}
.bt-marked mark {
  background: color-mix(in srgb, var(--cap-yellow) 55%, var(--cap-white));
  color: inherit;
  border-bottom: 2px solid var(--cap-red);
  padding: 0 0.1em;
}

/* Event Kit: the kit's pieces as a list of links. */
.bt-kit {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--cap-line);
  border-radius: var(--cap-radius-control);
  background: var(--cap-white);
}
.bt-kit li + li { border-top: 1px solid var(--cap-line); }
.bt-bio-pages:focus-visible {
  outline: 3px solid var(--cap-yellow);
  outline-offset: 3px;
}

/* Certificate preview: each movable line is easier to grab than its text.
   The extra area is invisible and doesn't move the text, which the
   downloads render from. */
.preview-text[role="button"]::before {
  content: "";
  position: absolute;
  inset: -8px -6px;
}

/* "New" on the home page cards of tools added since the last visit. */
.bt-new-badge { flex-shrink: 0; align-self: center; }