/* ==========================================================================
   Crunchy Pup — Dog AI Profile Builder v5 (/tools/dog-ai-profile/)
   Loaded only on that page. Everything is scoped under .dap (or dap-*
   classes) so nothing here can change another page. Colors, type and
   buttons come from main.css.

   ORGANIZED BY SCREEN: shared bits → welcome → name → map → question
   (chips, Mad Lib, breed search) → picker sheet → stamp → finish →
   celebrations → toast → print.
   ========================================================================== */

.dap {
  --dap-paper: #FDFBF9;
  --dap-ink: var(--kelp);
  --dap-chip-line: #B9B1A3;
  --dap-soft: #EDF1EC;
  padding-top: var(--header-h);
}
.dap :focus-visible { outline: 3px solid var(--kelp); outline-offset: 3px; }
.dap [tabindex="-1"]:focus { outline: none; }
.dap .btn { min-height: 48px; }
.dap .btn .dap-icon { width: 1.15em; height: 1.15em; }
.dap .btn .dap-paw { width: 1.1em; height: 1.1em; fill: currentColor; }

/* Icons */
.dap-icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.25em; }
.dap-paw { fill: currentColor; }
.dap-battery rect.is-on { fill: currentColor; stroke: none; }
.dap-battery rect:not(.is-on):not(:first-child) { stroke: none; fill: none; }

/* Small text-style buttons */
.dap .dap-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0.6rem 0.2rem;
  min-height: 44px;
  color: var(--kelp);
  font: 600 var(--text-xs) / 1.3 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.dap .dap-link:hover { color: var(--kelp-deep); }
.dap .dap-link .dap-icon { width: 1.1em; height: 1.1em; }
.dap-sep { color: var(--slate); margin: 0 0.5rem; }

.dap-stage { padding-top: clamp(1.25rem, 4vw, 2.75rem); padding-bottom: clamp(3rem, 7vw, 5rem); max-width: 860px; }
.dap-card {
  background: var(--dap-paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: 0 10px 30px -22px rgba(34, 34, 34, 0.35);
}
.dap-card + .dap-card { margin-top: 1.25rem; }
.dap-card--quiet { background: transparent; box-shadow: none; }
.dap-builder-title { font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); margin: 0.2rem 0 0.4rem; }
.dap-q-title { font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.35rem); color: var(--charcoal); line-height: 1.18; margin: 0.25rem 0 0.5rem; }
.dap-panel-title { font-size: var(--text-h3); margin-bottom: 0.35rem; }
.dap-hint { color: #55524D; font-size: var(--text-sm); margin: 0 0 1.25rem; max-width: 62ch; }
.dap-micro { font-size: var(--text-xs); color: var(--slate); margin: 0.75rem 0 0; line-height: 1.7; }
.dap-lead { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; color: var(--kelp); margin-bottom: 1rem; }
.dap-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.dap-actions--center { justify-content: center; }
.dap-field-label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kelp); margin: 0 0 0.45rem; }
.dap .eyebrow .dap-icon { margin-right: 0.3rem; }

.dap .dap-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--dap-chip-line);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--charcoal);
  font: 400 1rem / 1.5 var(--font-body); /* 16px keeps iPhones from zooming in */
}
.dap .dap-input:focus { border-color: var(--kelp); outline: none; box-shadow: 0 0 0 3px var(--kelp-16); }
.dap .dap-input::placeholder { color: #8A847C; }
.dap .dap-textarea { min-height: 7.5rem; resize: vertical; }

.dap-alert {
  margin: 0 0 1.25rem;
  padding: 0.8rem 1rem;
  background: #F4E7DD;
  border-left: 3px solid var(--sweet-potato);
  border-radius: 0 8px 8px 0;
  font-size: var(--text-xs);
  line-height: 1.6;
  max-width: none;
}
.dap-note-line {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin: 0 0 1rem; padding: 0.75rem 0.9rem;
  background: var(--dap-soft); border-radius: 10px;
  font-size: var(--text-xs); line-height: 1.6; color: #3E4A42;
}
.dap-note-line .dap-icon { color: var(--kelp); margin-top: 0.1em; }

.dap-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 1.5rem;
}
.dap-nav-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.25rem 1rem; margin-left: auto; }
@media (max-width: 559px) {
  .dap-nav { flex-direction: column-reverse; align-items: stretch; }
  .dap-nav > .btn, .dap-nav-right { width: 100%; }
  .dap-nav-right { flex-direction: column-reverse; align-items: stretch; margin-left: 0; }
  .dap-nav-right .dap-link { justify-content: center; }
}

/* ---- Welcome ---------------------------------------------------------- */
.dap-intro { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-top: clamp(2.5rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
@media (min-width: 880px) { .dap-intro { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.75fr); } }
.dap-h1 { font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.9rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0.35rem 0 1.25rem; }
.dap-h1-accent { color: var(--kelp); }
.dap-quickfacts { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dap-quickfacts li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  background: var(--dap-soft); color: var(--kelp);
  font-size: var(--text-xs); font-weight: 600;
}
.dap-example-link { display: flex; flex-wrap: wrap; align-items: center; margin: 0.5rem 0 0; font-size: var(--text-xs); color: var(--slate); }
.dap-file-label { cursor: pointer; }
.dap-file-input:focus-visible + .dap-file-label { outline: 3px solid var(--kelp); outline-offset: 2px; border-radius: 4px; }

.dap-features { background: var(--dap-paper); border-block: 1px solid var(--line); padding: 1.5rem 0; }
.dap-features-grid { display: grid; gap: 1rem 2rem; }
@media (min-width: 760px) { .dap-features-grid { grid-template-columns: repeat(3, 1fr); } }
.dap-features p { margin: 0; font-size: var(--text-xs); color: var(--slate); }
.dap-features .dap-feature-title { display: flex; align-items: baseline; font-size: var(--text-sm); font-weight: 600; color: var(--charcoal); margin-bottom: 0.2rem; }
.dap-feature-num { flex-shrink: 0; width: 2rem; margin-right: 0.6rem; font: 400 1.5rem / 1 var(--font-display); color: var(--sweet-potato); }
@media (min-width: 760px) { .dap-features p:not(.dap-feature-title) { padding-left: 2.6rem; } }

/* ---- Stamp card (welcome preview + map + stamp screen) --------------- */
.dap-stampcard {
  background: var(--warm-sand);
  border: 1px solid var(--line);
  padding: 0.9rem;
  border-radius: 6px;
  transform: rotate(1deg);
  max-width: 440px;
  width: 100%;
  justify-self: center;
}
.dap-stampcard-inner { border: 1px dashed #A8B5A4; border-radius: 4px; padding: clamp(1rem, 3vw, 1.5rem); }
.dap-stampcard-title { font: 400 1.35rem / 1.2 var(--font-display); color: var(--kelp); text-align: center; margin: 0 0 1rem; }
.dap-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem 0.4rem; }
.dap-stamp { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.dap-stamp-ring {
  display: grid; place-items: center;
  width: clamp(44px, 12vw, 64px); aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed #B7AE9E;
  color: #B7AE9E;
}
.dap-stamp-ring .dap-icon { width: 46%; height: 46%; }
.dap-stamp-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0; color: var(--slate); line-height: 1.2; }
.dap-stamp.is-earned .dap-stamp-ring {
  border: 2.5px solid var(--kelp);
  box-shadow: inset 0 0 0 3px var(--warm-sand), inset 0 0 0 4.5px var(--kelp);
  background: var(--dap-soft);
  color: var(--kelp);
}
.dap-stamp.is-earned .dap-stamp-label { color: var(--kelp); }
.dap-stamp.is-earned:nth-child(odd) .dap-stamp-ring { transform: rotate(-8deg); }
.dap-stamp.is-earned:nth-child(even) .dap-stamp-ring { transform: rotate(6deg); }
.dap-stamp.is-skipped { opacity: 0.45; }
.dap-stamp.is-skipped .dap-stamp-ring { border-style: dotted; }
.dap-stamp.is-new .dap-stamp-ring { animation: dap-stamp-in 0.7s cubic-bezier(.2, 1.4, .4, 1) 0.15s both; }
/* Welcome preview: stamps thump onto the card one by one */
.dap-stampcard.is-preview .dap-stamp-ring { animation: dap-stamp-in 0.6s cubic-bezier(.2, 1.4, .4, 1) both; }
.dap-stamp--d0 .dap-stamp-ring { animation-delay: 0.4s !important; }
.dap-stamp--d1 .dap-stamp-ring { animation-delay: 0.65s !important; }
.dap-stamp--d2 .dap-stamp-ring { animation-delay: 0.9s !important; }
.dap-stamp--d3 .dap-stamp-ring { animation-delay: 1.15s !important; }
.dap-stamp--d4 .dap-stamp-ring { animation-delay: 1.4s !important; }
.dap-stamp--d5 .dap-stamp-ring { animation-delay: 1.65s !important; }
.dap-stamp--d6 .dap-stamp-ring { animation-delay: 1.9s !important; }
@keyframes dap-stamp-in {
  0% { opacity: 0; transform: scale(1.8) rotate(-18deg); }
  60% { opacity: 1; transform: scale(0.92) rotate(-4deg); }
  100% { opacity: 1; }
}
@media (max-width: 559px) { .dap-intro > .dap-stampcard { display: none; } }

/* ---- Name screen ------------------------------------------------------ */
.dap-card--name { text-align: center; max-width: 620px; margin: 0 auto; }
.dap-card--name .dap-hint { margin-inline: auto; }
.dap-hello { width: 64px; height: 64px; margin: 0 auto 0.5rem; color: var(--kelp); animation: dap-wag 1.8s ease-in-out 0.3s 2; }
.dap-hello .dap-paw { width: 100%; height: 100%; }
@keyframes dap-wag { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.dap .dap-input--big { font: 400 clamp(1.5rem, 1.2rem + 1.5vw, 2rem) / 1.3 var(--font-display); text-align: center; padding: 0.9rem 1rem; max-width: 420px; }
.dap-greet { min-height: 1.6em; margin: 0.9rem 0 0; font: 400 var(--text-lg) / 1.4 var(--font-display); color: var(--kelp); }
.dap-card--name .dap-nav { text-align: left; }

/* ---- Profile map ------------------------------------------------------ */
.dap-map-head { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 1.5rem; }
@media (min-width: 760px) { .dap-map-head { grid-template-columns: minmax(0, 1fr) 320px; } }
.dap-map-head .dap-stampcard { transform: rotate(-1deg); }
/* Phones: the map's stamp card shrinks to one row so the chapters show sooner */
@media (max-width: 759px) {
  .dap-map-head .dap-stampcard { padding: 0.6rem; max-width: none; }
  .dap-map-head .dap-stampcard-inner { padding: 0.75rem 0.6rem; }
  .dap-map-head .dap-stampcard-title { font-size: 1.05rem; margin-bottom: 0.6rem; }
  .dap-map-head .dap-stamps { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
  .dap-map-head .dap-stamp-ring { width: 100%; max-width: 42px; }
  .dap-map-head .dap-stamp-label { display: none; }
}
.dap-map-head .dap-hint { margin-bottom: 0; }
.dap-chapter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.dap-chapter {
  background: var(--dap-paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.dap-chapter.is-next { border-color: var(--kelp); box-shadow: 0 10px 28px -18px rgba(46, 74, 57, 0.6); }
.dap-chapter.is-done { background: #F5F7F2; border-color: #C8D3C6; }
.dap-chapter.is-skipped { background: transparent; border-style: dashed; }
.dap-chapter.is-skipped .dap-chapter-main { opacity: 0.6; }
.dap .dap-chapter-main {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  width: 100%; padding: 1rem 1.1rem 0.6rem; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.dap .dap-chapter-main:hover .dap-chapter-icon { transform: rotate(-8deg) scale(1.06); }
.dap-chapter-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--dap-soft); color: var(--kelp); transition: transform 0.25s ease;
}
.dap-chapter-icon .dap-icon { width: 26px; height: 26px; }
.dap-chapter.is-done .dap-chapter-icon { background: var(--kelp); color: var(--beige); }
.dap-chapter-text { display: grid; gap: 0.1rem; min-width: 0; }
.dap-chapter-num { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.dap-upnext { color: var(--sweet-potato); }
.dap-chapter-title { font: 400 1.35rem / 1.2 var(--font-display); color: var(--kelp); }
.dap-chapter-blurb { font-size: var(--text-xs); color: #55524D; line-height: 1.45; }
.dap-pill {
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--line);
  font-size: 0.6875rem; font-weight: 700; color: var(--slate); background: #fff;
}
.dap-pill.is-done { background: var(--kelp); border-color: var(--kelp); color: var(--beige); }
.dap-pill.is-skipped { border-style: dashed; }
.dap-chapter-actions { display: flex; flex-wrap: wrap; gap: 0 1rem; padding: 0 1.1rem 0.3rem calc(1.1rem + 48px + 0.9rem); }
.dap-chapter-actions .dap-link { color: var(--slate); font-weight: 600; min-height: 40px; padding-block: 0.4rem; }
@media (max-width: 479px) {
  .dap .dap-chapter-main { grid-template-columns: auto minmax(0, 1fr); }
  .dap-chapter-main .dap-pill { grid-column: 2; justify-self: start; }
  .dap-chapter-actions { padding-left: 1.1rem; }
}
.dap-map-foot { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.dap-map-tools { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
@media (max-width: 559px) { .dap-map-foot .btn { width: 100%; } }

/* ---- Question screen -------------------------------------------------- */
.dap-step-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.dap-step-sec { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--kelp); }
.dap-progress-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.dap-dots { list-style: none; display: flex; flex: 1; max-width: 360px; gap: 5px; margin: 0; padding: 0; }
.dap-dot { flex: 1 1 0; min-width: 6px; max-width: 30px; width: auto; height: 7px; border-radius: 10px; background: var(--line); transition: background 0.3s ease, width 0.3s ease; }
.dap-dot.is-done { background: var(--kelp); }
.dap-dot.is-current { background: var(--kelp-hover); flex-grow: 1.8; max-width: 46px; }
.dap-progress-text { font-size: 0.75rem; font-weight: 700; color: var(--slate); white-space: nowrap; }
.dap-cheer { min-height: 1.4em; margin: 0.75rem 0 0; font: 400 1.1rem / 1.4 var(--font-display); color: var(--kelp); opacity: 0; }
.dap-cheer.is-on { animation: dap-cheer 2.2s ease both; }
@keyframes dap-cheer { 0% { opacity: 0; transform: translateY(6px); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.dap-step-foot { text-align: center; margin: 0.5rem 0 0; }
.dap-step-foot .dap-link { color: var(--slate); }

/* Chips: the tap buttons */
.dap-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.dap .dap-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 48px;
  padding: 0.6rem 1.05rem;
  background: #fff;
  border: 1.5px solid var(--dap-chip-line);
  border-radius: 999px;
  color: var(--charcoal);
  font: 600 var(--text-sm) / 1.25 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.dap .dap-chip:hover { border-color: var(--kelp); background: var(--dap-soft); }
.dap .dap-chip:active { transform: scale(0.95); }
.dap .dap-chip[aria-pressed="true"] { background: var(--kelp); border-color: var(--kelp); color: var(--beige); }
.dap-chip-check { display: none; width: 1.05em; height: 1.05em; }
.dap-chip-check .dap-icon { width: 100%; height: 100%; stroke-width: 2.4; }
.dap .dap-chip[aria-pressed="true"] .dap-chip-check { display: inline-flex; }
.dap .dap-chip[aria-pressed="true"] .dap-chip-check path { stroke-dasharray: 24; animation: dap-draw 0.35s ease both; }
@keyframes dap-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.dap .dap-chip.is-pop { animation: dap-pop 0.42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes dap-pop { 0% { transform: scale(0.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
.dap .dap-chip.is-unsure, .dap .dap-chip.is-none { border-style: dashed; background: transparent; }
.dap .dap-chip.is-unsure[aria-pressed="true"], .dap .dap-chip.is-none[aria-pressed="true"] { background: #55524D; border-color: #55524D; border-style: solid; }
.dap .dap-chip.is-custom { border-style: solid; }

/* Big single-choice buttons stack into full-width rows */
.dap-card > .dap-chips:not(.dap-chips--grid):not(.dap-chips--size) { gap: 0.55rem; }

/* Age grid: number tiles */
.dap-chips--grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
@media (min-width: 560px) { .dap-chips--grid { grid-template-columns: repeat(6, 1fr); } }
.dap .dap-chips--grid .dap-chip { justify-content: center; border-radius: 12px; aspect-ratio: 1.15; padding: 0.3rem; font: 400 1.6rem / 1 var(--font-display); }
.dap .dap-chips--grid .dap-chip .dap-chip-check { position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; }
.dap .dap-chips--grid .dap-chip.is-wide { grid-column: span 2; aspect-ratio: auto; font-size: 1.2rem; }
.dap .dap-chips--grid .dap-chip.is-unsure { grid-column: 1 / -1; aspect-ratio: auto; min-height: 48px; font: 600 var(--text-sm) / 1.25 var(--font-body); }

/* Weight: paw prints that grow with size */
.dap-chips--size { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
@media (min-width: 560px) { .dap-chips--size { grid-template-columns: repeat(3, 1fr); } }
.dap .dap-chips--size .dap-chip { flex-direction: column; justify-content: flex-end; gap: 0.35rem; border-radius: 14px; min-height: 96px; text-align: center; }
.dap .dap-chips--size .dap-chip .dap-chip-check { position: absolute; top: 8px; right: 8px; }
.dap .dap-chips--size .dap-chip.is-unsure { grid-column: 1 / -1; min-height: 48px; flex-direction: row; justify-content: center; }
.dap-sizepaw { color: var(--kelp); display: grid; place-items: end center; height: 42px; }
.dap-chip[aria-pressed="true"] .dap-sizepaw { color: var(--beige); }
.dap-sizepaw .dap-paw { width: 17px; height: 17px; }
.dap-sizepaw--2 .dap-paw { width: 22px; height: 22px; }
.dap-sizepaw--3 .dap-paw { width: 27px; height: 27px; }
.dap-sizepaw--4 .dap-paw { width: 32px; height: 32px; }
.dap-sizepaw--5 .dap-paw { width: 37px; height: 37px; }
.dap-sizepaw--6 .dap-paw { width: 42px; height: 42px; }

.dap-exact { margin-top: 1.1rem; }
.dap-exact-row { display: flex; gap: 0.5rem; max-width: 280px; }
.dap-exact-row .dap-input { flex: 1; }
.dap-unit { display: flex; border: 1.5px solid var(--dap-chip-line); border-radius: 10px; overflow: hidden; }
.dap .dap-unit-btn { min-width: 52px; border: 0; background: #fff; font: 700 var(--text-xs) / 1 var(--font-body); color: var(--slate); cursor: pointer; }
.dap .dap-unit-btn[aria-pressed="true"] { background: var(--kelp); color: var(--beige); }

/* Coat color swatches */
.dap-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(34, 34, 34, 0.25); flex-shrink: 0; }
.dap-swatch--black { background: #232323; }
.dap-swatch--white { background: #FFFFFF; }
.dap-swatch--brown { background: #7A5232; }
.dap-swatch--chocolate { background: #4E3022; }
.dap-swatch--tan { background: #C9A57A; }
.dap-swatch--gold { background: #D8A84E; }
.dap-swatch--red { background: #A5532C; }
.dap-swatch--cream { background: #F1E3C6; }
.dap-swatch--gray { background: #8B8D8E; }
.dap-swatch--brindle { background: repeating-linear-gradient(60deg, #6B4A2E 0 3px, #2E2219 3px 6px); }
.dap-swatch--spotted { background: radial-gradient(circle at 30% 35%, #232323 0 2.5px, transparent 3px), radial-gradient(circle at 70% 65%, #232323 0 2.5px, transparent 3px), #FFFFFF; }
.dap-swatch--merle { background: radial-gradient(circle at 35% 40%, #3A3F45 0 3px, transparent 3.5px), radial-gradient(circle at 70% 70%, #3A3F45 0 2.5px, transparent 3px), #A9B0B6; }
.dap-swatch--tricolor { background: conic-gradient(#232323 0 33%, #C9A57A 0 66%, #FFFFFF 0); }

/* "Add your own" */
.dap-other { display: flex; gap: 0.5rem; margin-top: 0.9rem; max-width: 460px; }
.dap-other .dap-input { flex: 1; padding-block: 0.65rem; }
.dap .dap-other-btn { min-height: 48px; padding: 0.5rem 1.1rem; }

/* Breed search */
.dap-picked { display: flex; flex-wrap: wrap; gap: 0.45rem; min-height: 44px; align-items: center; margin-bottom: 0.75rem; }
.dap-picked-empty { font-size: var(--text-xs); color: var(--slate); }
.dap .dap-tag {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 40px; padding: 0.4rem 0.6rem 0.4rem 0.9rem; border-radius: 999px;
  border: 0; background: var(--kelp); color: var(--beige);
  font: 600 var(--text-xs) / 1.2 var(--font-body); cursor: pointer;
  animation: dap-pop 0.4s cubic-bezier(.2, 1.6, .4, 1);
}
.dap-tag .dap-icon { width: 1em; height: 1em; stroke-width: 2.2; }
#dap-breed-search { margin-bottom: 0.9rem; }

/* ---- Mad Lib ----------------------------------------------------------- */
.dap-madlib {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: 400 clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem) / 2.1 var(--font-display);
  color: var(--charcoal);
  /* ruled notebook lines */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2.1em - 1px), #E7E1D5 calc(2.1em - 1px), #E7E1D5 2.1em);
  background-position: 0 0.35em;
}
.dap-madlib-corner { position: absolute; top: 0.6rem; right: 0.7rem; color: #A8B5A4; }
.dap-madlib-corner .dap-icon { width: 26px; height: 26px; }
.dap .dap-blank {
  display: inline;
  outline-offset: 2px;
  padding: 0.05em 0.35em;
  margin: 0 0.05em;
  background: var(--dap-soft);
  border: 0;
  border-bottom: 2.5px solid var(--kelp);
  border-radius: 6px 6px 2px 2px;
  font: inherit;
  line-height: 1.3;
  color: var(--kelp);
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.dap .dap-blank:hover { background: #DCE5DA; }
.dap-blank-ph { font: italic 600 0.62em / 1 var(--font-body); letter-spacing: 0.02em; color: #6E8B74; vertical-align: 0.15em; }
.dap .dap-blank:not(.is-filled) { border-bottom-style: dashed; }
.dap .dap-blank.is-filled { background: transparent; text-decoration: none; }
.dap .dap-blank.is-hint { animation: dap-nudge 1.6s ease-in-out 0.6s 3; }
@keyframes dap-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(46, 74, 57, 0); } 50% { box-shadow: 0 0 0 6px rgba(46, 74, 57, 0.16); } }
.dap .dap-blank.is-inked { animation: dap-ink 0.8s ease both; }
@keyframes dap-ink { 0% { background: #CFE0CB; transform: scale(1.06); } 100% { background: transparent; transform: none; } }
.dap-ml-count { font-size: var(--text-xs); font-weight: 600; color: var(--slate); margin: 0.75rem 0 0; }

/* ---- Picker sheet (opens from a Mad Lib blank) ----------------------- */
body.dap-sheet-open { overflow: hidden; }
.dap-sheet-backdrop { position: fixed; inset: 0; background: rgba(34, 34, 34, 0.38); z-index: 300; animation: dap-fade 0.2s ease both; }
.dap-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 301;
  max-height: 82vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--beige);
  border-radius: 20px 20px 0 0;
  padding: 0.5rem clamp(1.1rem, 4vw, 2rem) calc(1.25rem + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 40px -20px rgba(34, 34, 34, 0.4);
  animation: dap-sheet-up 0.32s cubic-bezier(.2, .9, .3, 1) both;
}
@media (min-width: 760px) {
  .dap-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(640px, 92vw); border-radius: 18px; transform: translate(-50%, -50%); animation: dap-fade 0.2s ease both; padding-bottom: 1.5rem; }
}
@keyframes dap-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes dap-fade { from { opacity: 0; } to { opacity: 1; } }
.dap-sheet-grip { width: 44px; height: 5px; border-radius: 5px; background: var(--toasted-beige); margin: 0.25rem auto 0.75rem; }
@media (min-width: 760px) { .dap-sheet-grip { display: none; } }
.dap-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 0.75rem; }
.dap-sheet-title { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem); color: var(--charcoal); margin: 0; }
.dap .dap-sheet-x { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--warm-sand); color: var(--charcoal); cursor: pointer; }
.dap-sheet-hint { margin: -0.25rem 0 0.75rem; }
.dap-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; }

/* ---- Stamp earned ------------------------------------------------------ */
.dap-card--stamp { text-align: center; max-width: 640px; margin: 0 auto; }
.dap-card--stamp .dap-hint { margin-inline: auto; }
.dap-card--stamp .dap-stampcard { margin: 0.5rem auto 0; transform: rotate(-1deg); }
.dap-card--stamp .dap-micro .dap-link { color: var(--slate); }
.dap-bigstamp { display: flex; width: max-content; flex-direction: column; align-items: center; gap: 0.35rem; margin: 0.25rem auto 0.75rem; animation: dap-stamp-in 0.75s cubic-bezier(.2, 1.4, .4, 1) 0.1s both; }
.dap-bigstamp-ring {
  display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%;
  border: 4px solid var(--kelp); color: var(--kelp); background: var(--dap-soft);
  box-shadow: inset 0 0 0 5px var(--dap-paper), inset 0 0 0 7px var(--kelp);
  transform: rotate(-9deg);
}
.dap-bigstamp-ring .dap-icon { width: 50px; height: 50px; stroke-width: 1.4; }
.dap-bigstamp-ring .dap-paw { width: 52px; height: 52px; }
.dap-bigstamp-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kelp); }

/* ---- Finish screen ---------------------------------------------------- */
.dap-finish-hero { text-align: center; margin-bottom: 1.5rem; }
.dap-finish-hero .dap-lead { margin-bottom: 0; }
.dap-example { background: var(--warm-sand); border-left: 3px solid var(--sweet-potato); border-radius: 0 10px 10px 0; padding: 1.1rem 1.25rem 1.25rem; margin-bottom: 1.25rem; }
.dap-example p { font-size: var(--text-sm); margin: 0; max-width: 60ch; }
.dap-example .dap-example-title { font: 400 var(--text-h3) / 1.2 var(--font-display); color: var(--kelp); margin-bottom: 0.35rem; }
.dap-example .dap-actions { margin-top: 1rem; }

.dap-howto { border-color: var(--kelp); border-width: 1.5px; }
.dap-steps { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.dap-howto-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.dap-step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kelp); color: var(--beige); font: 400 1.4rem / 1 var(--font-display); }
.dap-howto-step h3 { font-size: 1.3rem; color: var(--charcoal); margin: 0.45rem 0 0.25rem; }
.dap-howto-step p { font-size: var(--text-sm); margin: 0 0 0.75rem; max-width: 60ch; }
.dap .dap-copy-main { width: 100%; max-width: 440px; }
.dap .dap-copy-main.is-copied { background: var(--kelp-pressed); }
.dap-apps { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dap .dap-app {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 46px; padding: 0.55rem 1rem;
  border: 1.5px solid var(--kelp); border-radius: 999px; background: #fff;
  color: var(--kelp); font-weight: 700; font-size: var(--text-sm); text-decoration: none;
}
.dap .dap-app:hover { background: var(--dap-soft); }

.dap-ideas { display: grid; gap: 0.75rem; }
@media (min-width: 680px) { .dap-ideas { grid-template-columns: repeat(2, 1fr); } }
.dap-idea { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.75rem; padding: 0.9rem 1rem 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.dap-idea-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dap-soft); color: var(--kelp); }
.dap-idea h3 { font-size: 1.15rem; color: var(--kelp); margin: 0.35rem 0 0.25rem; }
.dap-idea p { font-size: var(--text-xs); color: #55524D; margin: 0; line-height: 1.55; }

.dap-saveapps { display: grid; gap: 0.5rem; }
.dap-details { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.dap-details summary { cursor: pointer; padding: 0.9rem 1rem; font-weight: 700; font-size: var(--text-sm); color: var(--kelp); min-height: 48px; list-style-position: inside; }
.dap-details p { margin: 0; padding: 0 1rem 1rem; font-size: var(--text-sm); }
.dap-details a { font-weight: 600; }

.dap-downloads { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dap-downloads .btn { padding: 0.6rem 1.15rem; font-size: var(--text-xs); min-height: 46px; }
@media (max-width: 559px) { .dap-downloads .btn { width: 100%; } }

.dap-pv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.dap-tabs { display: flex; gap: 0.75rem; border-bottom: 1px solid var(--line); }
.dap .dap-tab {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  padding: 0.6rem 0.2rem; min-height: 44px; color: var(--slate); font: 700 var(--text-xs) / 1 var(--font-body); cursor: pointer;
}
.dap .dap-tab[aria-pressed="true"] { color: var(--kelp); border-bottom-color: var(--kelp); }
.dap-preview { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: clamp(1rem, 3vw, 1.6rem); max-height: 520px; overflow: auto; font-size: var(--text-sm); line-height: 1.65; overflow-wrap: anywhere; }
.dap-preview h2 { font-size: 1.6rem; margin: 0 0 0.5rem; color: var(--kelp); }
.dap-preview h3 { font-size: 1.2rem; margin: 1.25rem 0 0.35rem; color: var(--kelp); }
.dap-preview p, .dap-preview ul { margin: 0 0 0.6rem; }
.dap-preview ul { padding-left: 1.2rem; }
.dap-preview li { margin-bottom: 0.2rem; }
.dap-pv-flag { background: #F4E7DD; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: var(--text-xs); }
.dap .dap-editor { min-height: 22rem; font-size: 0.875rem; line-height: 1.7; }
.dap-nav--finish { border-top: 0; justify-content: center; }

/* ---- Celebrations ----------------------------------------------------- */
.dap-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 400; }
.dap-fly { position: fixed; z-index: 350; width: 18px; height: 18px; color: var(--kelp); pointer-events: none; animation: dap-fly 1s ease-out both; }
.dap-fly .dap-paw { width: 100%; height: 100%; }
.dap-fly--0 { animation-name: dap-fly-l; }
.dap-fly--2 { animation-name: dap-fly-r; animation-delay: 0.06s; }
.dap-fly--1 { animation-delay: 0.03s; }
@keyframes dap-fly { 0% { opacity: 0; transform: translateY(0) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1); } }
@keyframes dap-fly-l { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-14px, -38px) rotate(-25deg) scale(0.9); } }
@keyframes dap-fly-r { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -38px) rotate(25deg) scale(0.9); } }

/* Calm mode: no motion for people who ask their device for less */
@media (prefers-reduced-motion: reduce) {
  .dap *, .dap *::before, .dap *::after, .dap-sheet, .dap-sheet-backdrop { animation: none !important; transition: none !important; }
  .dap-cheer { opacity: 1; }
}

/* ---- Status pop-up for copy/download/save ---------------------------- */
.dap-toast {
  position: fixed; right: 1rem; bottom: 1rem; left: auto;
  max-width: min(360px, calc(100vw - 2rem));
  padding: 0.85rem 1.1rem; border-radius: 10px;
  background: var(--kelp); color: var(--beige);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.5;
  z-index: 320;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dap-toast.is-on { opacity: 1; transform: none; }
@media (max-width: 959px) { .dap-toast { left: 1rem; right: 1rem; max-width: none; bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 0.75rem); } }
@media (prefers-reduced-motion: reduce) { .dap-toast { transition: none; } }

/* ---- Print / Save as PDF: only the profile text --------------------- */
@media print {
  html::before, body::before, .veiled::before { display: none !important; }
  body { background: #fff !important; }
  .skip-link, .site-header, .site-footer, .tabbar, .dap-toast, .dap-confetti,
  .dap-finish > *:not(.dap-print-area), .dap-pv-head .dap-tabs, .dap-alert { display: none !important; }
  .dap { padding-top: 0; }
  .dap-stage { padding: 0; max-width: none; }
  .dap-card { border: 0; padding: 0; background: none; box-shadow: none; }
  .dap-preview { max-height: none; overflow: visible; border: 0; padding: 0; font-size: 11pt; }
}

/* Footer tagline spacing (this page's strict CSP doesn't allow inline styles) */
.site-footer .footer-tagline { margin-top: 0.75rem; }