/* Craving DNA — frontend styles. Palette matched to the live League of Cooking
   theme (muted lavender / plum) with a dusty-rose accent for hierarchy on the
   top match, clean line-icon aesthetic, no emoji. Soft-UI depth (dual shadow),
   press feedback, and reduced-motion support throughout. */
.cdna-app {
    --cdna-bg:        #f9f7fb;   /* palette7 */
    --cdna-surface:   #ffffff;
    --cdna-ink:       #2a2a2a;   /* body text */
    --cdna-plum:      #4a3f54;   /* palette3 — headings */
    --cdna-muted:     #6b5f78;   /* palette5 — secondary / accent-strong */
    --cdna-lav:       #b8a9c4;   /* palette1 — soft accent */
    --cdna-lav-2:     #d4c5d9;   /* palette2 */
    --cdna-line:      #e7e1ee;
    --cdna-rose:      #c98a94;   /* dusty rose — reserved for the single top highlight */
    --cdna-rose-deep: #a8616d;
    --shadow-rgb:     74, 63, 84;
    max-width: 660px; margin: 0 auto; padding: 8px;
    font-family: 'Lora', Georgia, serif; color: var(--cdna-ink);
}
.cdna-screen { text-align: center; padding: 38px 18px; animation: cdna-fade .5s cubic-bezier(.2,.8,.2,1); }
@keyframes cdna-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.cdna-app :focus-visible {
    outline: 2px solid var(--cdna-plum); outline-offset: 3px; border-radius: 6px;
}

/* SEO content — real static HTML around the interactive app so search engines
   have something to crawl and index without executing JavaScript. Styled to
   read like normal editorial content, not like the app UI. */
.cdna-seo { max-width: 700px; margin: 0 auto; padding: 8px 18px 40px; font-family: 'Lora', Georgia, serif; color: var(--cdna-ink, #2a2a2a); }
.cdna-seo-block { margin: 34px 0; }
.cdna-seo-block h2 {
    font-family: 'Playfair Display', Georgia, serif; color: var(--cdna-plum, #4a3f54);
    font-size: 24px; font-weight: 700; margin: 0 0 14px; line-height: 1.3;
}
.cdna-seo-block h3 {
    font-family: 'Playfair Display', Georgia, serif; color: var(--cdna-plum, #4a3f54);
    font-size: 18px; font-weight: 700; margin: 20px 0 8px;
}
.cdna-seo-block p, .cdna-seo-block li { font-size: 16px; line-height: 1.7; color: var(--cdna-ink, #2a2a2a); }
.cdna-seo-steps { margin: 0; padding-left: 22px; }
.cdna-seo-steps li { margin: 6px 0; }
.cdna-seo-block a { color: var(--cdna-muted, #6b5f78); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cdna-seo-block a:hover { color: var(--cdna-plum, #4a3f54); }
.cdna-seo-faq-item { margin: 0; padding: 18px 0; border-top: 1px solid var(--cdna-line); }
.cdna-seo-faq-item:first-of-type { border-top: none; padding-top: 0; }
.cdna-seo-faq-item h3 { font-size: 16.5px; margin: 0 0 4px; }
.cdna-seo-faq-item p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .cdna-app *, .cdna-app *::before, .cdna-app *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
}

.cdna-app h2, .cdna-app h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--cdna-plum); margin: 12px 0 14px; line-height: 1.28; font-weight: 700;
}
.cdna-app h2 { font-size: 31px; }
.cdna-app h2 em { color: var(--cdna-muted); font-style: italic; }
.cdna-app h3 { font-size: 21px; }
.cdna-lead { color: var(--cdna-muted); font-size: 16px; line-height: 1.6; margin: 0 auto; max-width: 460px; }
.cdna-hint { margin-top: 16px; font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: .4px; color: #9a90a6; text-transform: uppercase; }
.cdna-mt { margin-top: 28px !important; }

/* Icons (inline SVG use currentColor) */
.cdna-ic { display: inline-block; vertical-align: middle; }
.cdna-mark { color: var(--cdna-muted); margin-bottom: 6px; }
.cdna-mark svg { width: 50px; height: 50px; }

/* Buttons — rounded-rect (not full pill) so primary actions read as
   distinct from the fully-round chip/selection controls below. */
.cdna-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; padding: 13px 28px;
    min-height: 48px; max-width: 100%; white-space: nowrap;
    background: linear-gradient(155deg, var(--cdna-muted), var(--cdna-plum)); color: #fff; border: none; border-radius: 14px;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .2px;
    cursor: pointer; touch-action: manipulation;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
    box-shadow: 0 6px 18px rgba(var(--shadow-rgb), .2), inset 0 1px 0 rgba(255,255,255,.16);
}
.cdna-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--shadow-rgb), .28), inset 0 1px 0 rgba(255,255,255,.16); }
.cdna-btn:active { transform: translateY(0) scale(.96); box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .22); transition-duration: .08s; }
.cdna-btn-big { padding: 16px 36px; font-size: 16px; }
.cdna-btn-ghost { background: transparent; color: var(--cdna-muted); box-shadow: none; border: 1.5px solid var(--cdna-lav); }
.cdna-btn-ghost:hover { background: #fff; border-color: var(--cdna-muted); color: var(--cdna-plum); box-shadow: 0 4px 14px rgba(var(--shadow-rgb),.1); }
.cdna-btn-ghost:active { transform: scale(.97); }
.cdna-btn .cdna-ic svg { width: 18px; height: 18px; }

/* Step nav — back button + progress dots, shown on the sliders/chips steps
   so the quiz never feels like a dead end with no way back. */
.cdna-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cdna-back {
    display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 6px 4px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--cdna-muted);
    cursor: pointer; touch-action: manipulation; transition: color .15s, transform .15s;
}
.cdna-back:hover { color: var(--cdna-plum); transform: translateX(-2px); }
.cdna-back .cdna-ic svg { width: 15px; height: 15px; }
.cdna-ic-back { transform: scaleX(-1); }
.cdna-steps { display: flex; align-items: center; gap: 5px; }
.cdna-step-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--cdna-line); transition: width .25s, background .25s; }
.cdna-step-dot.on { width: 18px; background: var(--cdna-muted); }

/* Sliders */
.cdna-slider-row { display: flex; align-items: center; gap: 14px; margin: 28px 0; position: relative; }
.cdna-app h3 + .cdna-slider-row { margin-top: 46px; }
.cdna-side {
    flex: 0 0 82px; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
    color: var(--cdna-plum); letter-spacing: .2px; line-height: 1.25;
    word-break: keep-all; overflow-wrap: normal; hyphens: none;
}
.cdna-side.r { text-align: right; }
.cdna-range {
    flex: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    height: 44px; background: transparent; outline: none; cursor: pointer; touch-action: pan-y;
    --val: 50%;
}
.cdna-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, var(--cdna-muted) 0%, var(--cdna-muted) var(--val), var(--cdna-line) var(--val), var(--cdna-line) 100%);
}
.cdna-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--cdna-line); }
.cdna-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--cdna-muted); }
.cdna-range::-webkit-slider-thumb {
    -webkit-appearance: none; margin-top: -11px; width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 2px solid var(--cdna-muted); cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--shadow-rgb),.22); transition: transform .12s;
}
.cdna-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.cdna-range::-webkit-slider-thumb:active { transform: scale(1.05); }
.cdna-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--cdna-muted); cursor: pointer; }

/* Live percentage bubble that follows the thumb while dragging. */
.cdna-range-bubble {
    position: absolute; top: -8px; transform: translate(-50%, -100%);
    background: var(--cdna-plum); color: #fff; font-family: 'Inter', sans-serif;
    font-size: 11.5px; font-weight: 700; white-space: nowrap; letter-spacing: .2px;
    padding: 4px 9px; border-radius: 8px; pointer-events: none;
    box-shadow: 0 4px 10px rgba(var(--shadow-rgb), .25);
}
.cdna-range-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--cdna-plum);
}

/* Chips — check icon is absolutely positioned so it never reserves layout
   space; the label stays truly centered in the pill whether selected or not. */
.cdna-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 16px 0; }
.cdna-chip {
    position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
    padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--cdna-line);
    background: #fff; color: var(--cdna-plum); font-family: 'Inter', sans-serif;
    font-size: 14px; font-weight: 500; cursor: pointer; touch-action: manipulation;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.cdna-chip:hover { border-color: var(--cdna-lav); background: var(--cdna-bg); }
.cdna-chip:active { transform: scale(.94); transition-duration: .08s; }
.cdna-chip.on { background: var(--cdna-muted); border-color: var(--cdna-muted); color: #fff; box-shadow: 0 4px 12px rgba(var(--shadow-rgb),.2); }
.cdna-chip-check {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0;
    transition: opacity .15s, transform .15s;
}
.cdna-chip.on .cdna-chip-check { opacity: 1; transform: translateY(-50%) scale(1); }
.cdna-chip-check svg { width: 14px; height: 14px; display: block; }
.cdna-chip-label { transition: padding-left .15s; }
.cdna-chip.on .cdna-chip-label { padding-left: 18px; }

/* Decoding */
.cdna-decoding { padding: 62px 18px; }
.cdna-loader { position: relative; width: 64px; height: 64px; margin: 0 auto 8px; color: var(--cdna-muted); }
.cdna-loader svg { width: 64px; height: 64px; }
.cdna-loader .cdna-ring { position: absolute; inset: 0; border: 3px solid var(--cdna-line); border-top-color: var(--cdna-muted); border-radius: 50%; animation: cdna-spin 1s linear infinite; }
@keyframes cdna-spin { to { transform: rotate(360deg); } }
.cdna-pulse { animation: cdna-pulse 1.2s ease-in-out infinite; color: var(--cdna-muted); }
@keyframes cdna-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.cdna-scanlines { width: 66%; max-width: 300px; height: 5px; margin: 22px auto 0; background: var(--cdna-line); border-radius: 999px; overflow: hidden; }
.cdna-scan-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--cdna-lav), var(--cdna-muted)); border-radius: 999px; animation: cdna-scan 2.1s ease forwards; }
@keyframes cdna-scan { to { width: 100%; } }

/* DNA card */
.cdna-card {
    background: var(--cdna-surface);
    border: 1px solid var(--cdna-line); border-radius: 20px; padding: 26px 28px;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px rgba(var(--shadow-rgb), .10);
    text-align: left;
}
.cdna-card-title {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 2.5px; color: var(--cdna-muted); text-transform: uppercase; margin-bottom: 18px;
}
.cdna-card-title .cdna-ic svg { width: 16px; height: 16px; }
.cdna-bar-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.cdna-bar-label { flex: 0 0 100px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; color: var(--cdna-plum); }
.cdna-bar { flex: 1; height: 8px; background: var(--cdna-bg); border-radius: 999px; overflow: hidden; position: relative; }
.cdna-bar-fill {
    position: absolute; inset: 0; width: 100%; transform-origin: left; transform: scaleX(0);
    background: linear-gradient(90deg, var(--cdna-lav), var(--cdna-muted)); border-radius: 999px;
    transition: transform 1s cubic-bezier(.2,.8,.3,1);
}
.cdna-bar-pct { flex: 0 0 42px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; color: var(--cdna-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Result cards */
.cdna-result {
    display: flex; align-items: center; gap: 16px; margin: 14px 0; padding: 12px;
    background: var(--cdna-surface); border: 1px solid var(--cdna-line); border-radius: 16px;
    text-decoration: none !important; color: inherit; text-align: left;
    transition: transform .15s, box-shadow .2s, border-color .2s;
    animation: cdna-rise .5s cubic-bezier(.2,.8,.2,1) both;
}
.cdna-result:nth-of-type(1) { animation-delay: 0ms; }
.cdna-result:nth-of-type(2) { animation-delay: 70ms; }
.cdna-result:nth-of-type(3) { animation-delay: 140ms; }
@keyframes cdna-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cdna-result:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--shadow-rgb), .16); border-color: var(--cdna-lav); }
.cdna-result:active { transform: translateY(-1px) scale(.99); }
.cdna-result img, .cdna-noimg {
    width: 96px; height: 96px; object-fit: cover; border-radius: 12px; flex-shrink: 0;
    background: var(--cdna-bg); display: flex; align-items: center; justify-content: center; color: var(--cdna-lav);
}
.cdna-noimg svg { width: 34px; height: 34px; }
.cdna-perfect { border: 1.5px solid var(--cdna-rose); box-shadow: 0 12px 28px rgba(168, 97, 109, .16); }
.cdna-perfect:hover { border-color: var(--cdna-rose-deep); box-shadow: 0 14px 32px rgba(168, 97, 109, .22); }
.cdna-perfect .cdna-tag { color: var(--cdna-rose-deep); }
.cdna-tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--cdna-muted); margin-bottom: 5px; }
.cdna-tag .cdna-ic svg { width: 14px; height: 14px; }
.cdna-result-title { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--cdna-plum); }
.cdna-result-meta { margin-top: 5px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--cdna-muted); display: flex; align-items: center; gap: 4px; }
.cdna-result-meta strong { color: var(--cdna-plum); }
.cdna-ic-inline { display: inline-flex; }
.cdna-ic-inline svg { width: 13px; height: 13px; margin-right: 1px; }

/* Homepage promo banner — static teaser linking to the full quiz. Real
   recipe photos in an offset collage instead of a generic icon-in-a-circle
   hero card, so it reads as "food site" rather than "SaaS landing page". */
.cdna-promo { max-width: 780px; }
.cdna-promo-card {
    display: grid; grid-template-columns: 1fr 190px; align-items: center; gap: 32px;
    text-align: left; text-decoration: none !important; color: inherit;
    background: var(--cdna-surface);
    border: 1px solid var(--cdna-line); border-radius: 24px; padding: 34px 34px;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 34px rgba(var(--shadow-rgb), .12);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .2s;
}
.cdna-promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 20px 44px rgba(var(--shadow-rgb), .18);
    border-color: var(--cdna-lav);
}
.cdna-promo-card:active { transform: translateY(-1px) scale(.995); }
.cdna-promo-card h2 { margin-top: 10px; }
.cdna-promo-btn { margin-top: 22px; pointer-events: none; }
.cdna-promo-collage { position: relative; height: 150px; }
.cdna-promo-collage-img {
    position: absolute; width: 108px; height: 108px; object-fit: cover; border-radius: 18px;
    box-shadow: 0 10px 24px rgba(var(--shadow-rgb), .22), 0 0 0 4px var(--cdna-surface);
}
.cdna-promo-collage-img.c1 { top: 0; right: 30px; transform: rotate(-6deg); z-index: 3; }
.cdna-promo-collage-img.c2 { top: 38px; right: 0; transform: rotate(5deg); z-index: 2; width: 92px; height: 92px; }
.cdna-promo-collage-img.c3 { top: 78px; right: 56px; transform: rotate(-3deg); z-index: 1; width: 80px; height: 80px; }

@media (max-width: 640px) {
    .cdna-promo-card { grid-template-columns: 1fr; text-align: center; padding: 32px 24px; }
    .cdna-promo-collage { height: 120px; margin: 0 auto; width: 100%; max-width: 260px; order: -1; }
    .cdna-promo-collage-img.c1 { right: 50%; margin-right: -40px; }
    .cdna-promo-collage-img.c2 { right: 50%; margin-right: -110px; }
    .cdna-promo-collage-img.c3 { right: 50%; margin-right: 30px; }
}

/* Example / category recipe cards inside the static SEO content — real
   photos in a grid, not a bulleted text link list. */
.cdna-seo-example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 4px; }
.cdna-seo-example-card { margin: 0; }

.cdna-seo-shelf { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 0 6px; scroll-snap-type: x proximity; }
.cdna-seo-shelf-item {
    flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none !important; color: inherit; scroll-snap-align: start;
}
.cdna-seo-shelf-item img, .cdna-seo-shelf-item .cdna-noimg {
    width: 84px; height: 84px; object-fit: cover; border-radius: 14px;
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .12); transition: transform .15s, box-shadow .2s;
}
.cdna-seo-shelf-item:hover img, .cdna-seo-shelf-item:hover .cdna-noimg {
    transform: translateY(-2px); box-shadow: 0 8px 18px rgba(var(--shadow-rgb), .2);
}
.cdna-seo-shelf-title {
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; line-height: 1.3;
    color: var(--cdna-plum); text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 480px) {
    .cdna-promo-card { padding: 32px 20px; border-radius: 20px; }
    .cdna-app h2 { font-size: 25px; }
    .cdna-side { flex-basis: 70px; font-size: 11.5px; }
    .cdna-result img, .cdna-noimg { width: 74px; height: 74px; }
    .cdna-result-title { font-size: 16px; }
    .cdna-btn-big { padding: 15px 20px; font-size: 14.5px; }
}

@media (max-width: 360px) {
    .cdna-btn-big { font-size: 13.5px; letter-spacing: 0; padding: 14px 14px; }
    .cdna-btn-big .cdna-ic svg { width: 15px; height: 15px; }
}