/* dating-barometer/_quiz.antlers.html — moved out of the template on 2026-10-21 (owner: "move inline css and js to cached files"); edit here, the template loads it with {{ zz_asset:css }} */
/* ------- dating-barometer quiz, design: specs/dating-barometer-design.html ------- */
/* Palette + fonts. Design uses Google-hosted Libre Franklin / Caveat; external
resources are not allowed here, so system stacks approximate them. */
#barometer{
--bq-cream:#f4eee1; --bq-cream-2:#ece5d4; --bq-ink:#2b2620; --bq-ink-2:#443d34;
--bq-terra:#a33d2e; --bq-terra-2:#b8543f; --bq-green:#3e7a4e; --bq-green-2:#4c8f5d;
--bq-muted:#6d6455; --bq-faded:#8a7f6d; --bq-line:#d8cdb6; --bq-idle:#b5aa93;
--bq-sans:'Libre Franklin',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
--bq-hand:'Caveat','Segoe Script','Bradley Hand','Savoye LET','Comic Sans MS',cursive;
max-width:430px;margin:0 auto;color:var(--bq-ink);font-family:var(--bq-sans);
}
#barometer [hidden]{display:none!important}
#barometer h1,#barometer h2{color:var(--bq-ink);text-transform:none;border:0;padding:0}
/* ---- intro phase ---- */
.bq-intro{padding:10px 0 20px;text-align:center}
.bq-kicker{font:700 12px/1.5 var(--bq-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bq-faded)}
.bq-intro h1{font:900 clamp(30px,8.6vw,42px)/1.05 var(--bq-sans);letter-spacing:-.03em;margin:14px 0 0;text-wrap:balance}
.bq-lead{font:500 15px/1.6 var(--bq-sans);color:var(--bq-muted);margin:14px auto 0;max-width:480px}
.bq-quiz-title{padding:6px 0 0;text-align:center}
.bq-quiz-title h1{font:900 clamp(24px,6.4vw,32px)/1.1 var(--bq-sans);letter-spacing:-.03em;margin:8px 0 4px;text-wrap:balance;color:var(--bq-ink);text-transform:none;border:0;padding:0}
.bq-hero{display:flex;justify-content:center;align-items:flex-end;margin-top:26px}
.bq-polaroid{position:relative;width:250px;max-width:70%;background:#fff;padding:9px 9px 32px;
box-shadow:var(--sh-md);transform:rotate(-2deg)}
.bq-polaroid img{width:100%;height:220px;object-fit:cover;object-position:top;display:block;background:var(--bq-cream-2)}
.bq-polaroid-cap{position:absolute;bottom:6px;left:16px;font:600 17px var(--bq-hand);color:#55504a}
.bq-stamp{width:96px;height:96px;margin:0 0 18px -22px;border:2.5px solid var(--bq-terra);border-radius:50%;
transform:rotate(7deg);display:flex;align-items:center;justify-content:center;text-align:center;
background:rgba(244,238,225,.96);box-shadow:var(--sh-md);z-index:2;
font:700 22px/1.05 var(--bq-hand);color:var(--bq-terra);padding:6px;box-sizing:border-box}
.bq-startrow{display:flex;justify-content:center;margin-top:26px}
.bq-note{font:600 15px var(--bq-hand);color:var(--bq-faded);margin-top:12px}
/* ---- shared buttons ---- */
.bq-cta{appearance:none;cursor:pointer;border:0;background:var(--bq-terra);color:#fff;text-align:center;
font:700 17px var(--bq-sans);padding:16px 44px;border-radius:var(--r-ctl);box-shadow:3px 3px 0 var(--bq-ink)}
.bq-next{appearance:none;cursor:pointer;border:0;background:var(--bq-terra);color:#fff;
font:700 15px var(--bq-sans);padding:14px 34px;border-radius:var(--r-ctl);box-shadow:3px 3px 0 var(--bq-ink)}
.bq-next.is-off{background:var(--bq-idle);cursor:default}
.bq-backbtn{appearance:none;cursor:pointer;border:0;background:none;font:700 14px var(--bq-sans);
color:var(--bq-muted);padding:12px 4px}
.bq-backbtn:hover{color:var(--bq-terra)}
/* ---- quiz phase ---- */
.bq-screen{padding:12px 0 20px}
.bq-progress{display:flex;align-items:center;gap:12px}
.bq-steplabel{font:700 18px var(--bq-hand);color:var(--bq-terra);white-space:nowrap}
.bq-bar{flex:1;height:10px;border:1.5px solid var(--bq-ink);border-radius:2px;overflow:hidden;background:#fff}
.bq-fill{display:block;height:100%;width:0;transition:width .35s ease;
background:repeating-linear-gradient(-45deg,var(--bq-terra),var(--bq-terra) 4px,var(--bq-terra-2) 4px,var(--bq-terra-2) 8px)}
.bq-fill.is-green{background:repeating-linear-gradient(-45deg,var(--bq-green),var(--bq-green) 4px,var(--bq-green-2) 4px,var(--bq-green-2) 8px)}
.bq-screen h2{font:900 30px/1.15 var(--bq-sans);letter-spacing:-.02em;margin:20px 0 4px;text-wrap:balance}
/* question as a chat message from the scout (the original quiz was a chat) */
.bq-chat{display:flex;align-items:flex-start;gap:12px;margin:22px 0 4px}
.bq-avatar{flex:0 0 68px;width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:top;
border:1.5px solid var(--bq-ink);background:var(--bq-cream-2);box-shadow:2px 2px 0 rgba(43,38,32,.18)}
.bq-bubble{position:relative;background:#fff;border:1.5px solid var(--bq-ink);border-radius:var(--r-ctl);
padding:12px 16px;box-shadow:2.5px 2.5px 0 rgba(43,38,32,.18)}
.bq-bubble:before{content:"";position:absolute;left:-7px;top:26px;width:11px;height:11px;background:#fff;
border-left:1.5px solid var(--bq-ink);border-bottom:1.5px solid var(--bq-ink);transform:rotate(45deg)}
.bq-screen .bq-bubble h2{font-size:21px;line-height:1.25;margin:0}
.bq-multihint{font:600 16px var(--bq-hand);color:var(--bq-terra)}
.bq-multihint.bq-flash{animation:bqFlash .5s ease}
@keyframes bqFlash{0%,100%{transform:none}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}
.bq-opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bq-opt{appearance:none;cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;
background:#fff;color:var(--bq-ink);border:1.5px solid var(--bq-ink);border-radius:var(--r-ctl);
padding:13px 16px;font:600 14.5px/1.4 var(--bq-sans);flex:1 1 300px;min-height:44px;box-sizing:border-box}
.bq-opt .bq-opt-label{flex:1}
.bq-screen h2 i{font-style:italic;font-weight:400;font-size:.62em;opacity:.75}
.bq-opt .bq-opt-label i{font-style:italic;font-weight:400;font-size:.9em;opacity:.75}
.bq-opt .bq-opt-check{font:700 18px var(--bq-hand);min-width:14px}
.bq-opt.is-selected{background:var(--bq-ink);color:var(--bq-cream);box-shadow:2.5px 2.5px 0 var(--bq-terra)}
.bq-cheer{font:600 18px var(--bq-hand);color:var(--bq-green);margin-top:16px;transform:rotate(-1deg)}
.bq-foot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;
border-top:1.5px solid var(--bq-line);padding-top:16px;gap:12px}
/* inputs (birthdate / country / email card) */
.bq-input{font:500 15px var(--bq-sans);padding:13px 14px;border:1.5px solid var(--bq-ink);border-radius:var(--r-ctl);
background:#fff;color:var(--bq-ink);outline:none;width:100%;box-sizing:border-box;display:block}
.bq-input::placeholder{color:var(--bq-idle)}
.bq-input:focus{border-color:var(--bq-terra)}
.bq-input.is-invalid{border-color:var(--bq-terra);box-shadow:2px 2px 0 var(--bq-terra)}
.bq-fieldwrap{margin-top:18px;max-width:340px}
.bq-fieldwrap.is-wide{max-width:520px}
.bq-textarea{display:block;width:100%;min-height:112px;resize:vertical;line-height:1.45} /* the free-text follow-up (owner 2026-10-20) */
.bq-hint{font:600 15px var(--bq-hand);color:var(--bq-faded);margin-top:8px}
.bq-errnote{font:700 12px var(--bq-sans);color:var(--bq-terra);margin-top:6px}
/* country autocomplete */
.bq-country{position:relative}
.bq-ac{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);background:#fff;
border:1.5px solid var(--bq-ink);border-radius:var(--r-ctl);max-height:220px;overflow-y:auto;
box-shadow:3px 3px 0 rgba(43,38,32,.25);display:none}
.bq-ac.is-open{display:block}
.bq-ac button{appearance:none;display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
border-bottom:1px solid var(--bq-line);padding:11px 13px;font:500 14px var(--bq-sans);color:var(--bq-ink-2)}
.bq-ac button:last-child{border-bottom:0}
.bq-ac button:hover{background:var(--bq-cream)}
.bq-ac-empty{padding:11px 13px;font:500 13px var(--bq-sans);color:var(--bq-faded)}
/* ---- email gate ---- */
.bq-card{background:#fff;border:1.5px solid var(--bq-ink);border-radius:var(--r-card);padding:22px;margin-top:22px}
.bq-card .bq-emlead{font:600 20px var(--bq-hand);color:var(--bq-green)}
.bq-card h2{font:900 24px/1.2 var(--bq-sans);letter-spacing:-.02em;margin:8px 0 16px}
.bq-fields{display:flex;flex-direction:column;gap:10px}
.bq-card .bq-input{background:var(--bq-cream)}
.bq-optin{cursor:pointer;display:flex;gap:10px;align-items:flex-start;margin-top:12px;background:none;border:0;
padding:0;text-align:left;appearance:none;font:400 12.5px/1.5 var(--bq-sans);color:var(--bq-ink-2)}
.bq-box{flex-shrink:0;width:18px;height:18px;border:1.5px solid var(--bq-ink);border-radius:var(--r-card);background:#fff;
display:inline-flex;align-items:center;justify-content:center;color:#fff;font:700 13px var(--bq-sans)}
.bq-optin.is-on .bq-box{background:var(--bq-terra)}
.bq-submit{width:100%;padding:15px;margin-top:16px;font-size:15px}
.bq-backrow{display:flex;justify-content:center;margin-top:18px}
/* ---- result phase ---- */
.bq-result-head{text-align:center}
.bq-donestamp{display:inline-flex;width:96px;height:96px;border:2.5px solid var(--bq-green);border-radius:50%;
transform:rotate(6deg);flex-direction:column;align-items:center;justify-content:center;background:#fff}
.bq-donestamp .a{font:700 34px/1 var(--bq-hand);color:var(--bq-green)}
.bq-donestamp .b{font:700 12px var(--bq-sans);letter-spacing:.12em;line-height:1.15;text-align:center;padding:0 8px;color:var(--bq-green);text-transform:uppercase}
.bq-result-head h2{font:900 32px/1.1 var(--bq-sans);letter-spacing:-.02em;margin:16px 0 6px}
.bq-result-sub{font:600 20px var(--bq-hand);color:var(--bq-terra)}
/* result cards 6-20 open five at a time as the list end scrolls into view (_quiz revealOnScroll) */
.bar-card.is-later{display:none}
.bar-more{height:1px}
.bq-loading{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:26px;
font:600 15px var(--bq-sans);color:var(--bq-ink-2)}
.bq-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--bq-line);border-top-color:var(--bq-terra);
animation:bqSpin .8s linear infinite;flex:0 0 22px}
@keyframes bqSpin{to{transform:rotate(360deg)}}
.bq-error{text-align:center;margin-top:26px}
.bq-error p{margin:0 0 14px;font:600 15px/1.5 var(--bq-sans);color:var(--bq-terra)}
/* result cards (markup from dating-barometer/cards.blade.php) — the town pages'
provider box (geo/show .geo-provider): round rank, logo, name + stars, compatibility,
matched-tag chips, links row, "More info" expander; the whole row clicks out. */
#barometer .bar-results{display:flex;flex-direction:column;gap:14px;margin-top:24px}
#barometer .bar-card{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;background:#fff;
border:1.5px solid var(--bq-ink);border-radius:var(--r-card);padding:16px 18px 16px 16px;color:var(--bq-ink);text-align:left}
#barometer .bar-card:hover{box-shadow:var(--sh-sm)}
#barometer .bar-card .go{position:absolute;inset:0;z-index:1}
#barometer .bar-rank{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--bq-terra);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font:800 15px var(--bq-sans);box-shadow:2px 2px 0 var(--bq-ink)}
#barometer .bar-card:first-child .bar-rank{background:var(--bq-ink);box-shadow:2px 2px 0 var(--bq-terra)}
#barometer .bar-card .lg{flex:0 0 120px;display:flex;align-items:center;justify-content:center;min-height:44px}
#barometer .bar-card .lg img{max-width:120px;max-height:48px;width:auto;height:auto;object-fit:contain}
#barometer .bar-card .mid{flex:1;min-width:200px}
#barometer .bar-card .n{font:800 16px var(--bq-sans);display:block;color:var(--bq-ink)}
#barometer .bar-card .stars{font-size:13px;letter-spacing:1px;margin-left:6px;vertical-align:1px;white-space:nowrap}
#barometer .bar-card .stars .on{color:#e8a33d}
#barometer .bar-card .stars .off{color:var(--bq-line)}
#barometer .bar-card .sim{display:block;margin-top:3px;font:700 17px var(--bq-hand);color:var(--bq-green)}
#barometer .bar-card .sim .members{font:400 12.5px var(--bq-sans);color:var(--bq-muted)}
#barometer .bar-card .ttags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
#barometer .bar-card .ttags i{font:600 12px var(--bq-sans);font-style:normal;border:1px solid var(--bq-idle);
border-radius:999px;padding:3px 9px;color:var(--bq-ink-2);background:var(--bq-cream)}
#barometer .bar-card .links{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
#barometer .bar-card .cta-link{position:relative;z-index:2;font:800 12.5px var(--bq-sans);color:#fff;background:var(--bq-terra);
border-radius:var(--r-ctl);padding:7px 12px;box-shadow:2px 2px 0 var(--bq-ink);text-decoration:none}
#barometer .bar-card .rev{position:relative;z-index:2;font:700 12px var(--bq-sans);color:var(--bq-terra);text-decoration:underline}
#barometer .bar-card .more{position:relative;z-index:2;cursor:pointer;background:none;border:1.5px solid var(--bq-ink);
border-radius:999px;font:700 12px var(--bq-sans);color:var(--bq-ink);padding:5px 11px;white-space:nowrap}
#barometer .bar-card .more::after{content:" ▾";font-size:12px}
#barometer .bar-card.open .more::after{content:" ▴"}
#barometer .bar-card .extra{display:none;width:100%;border-top:1.5px dashed var(--bq-idle);margin-top:2px;padding-top:14px}
#barometer .bar-card.open .extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 28px;align-items:start}
#barometer .bar-card .extra .cell{min-width:0}
#barometer .bar-card .extra .cell + .cell{border-left:1px dashed var(--bq-line);padding-left:22px;margin-left:-14px}
#barometer .bar-card .extra h4{font:700 12px var(--bq-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--bq-faded);margin:0 0 8px}
#barometer ul.bar-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
#barometer .bar-points li{position:relative;padding:0 0 0 22px;border:0;font:400 13px/1.45 var(--bq-sans);color:var(--bq-ink-2)}
#barometer .bar-points li:before{content:"✓";position:absolute;left:2px;top:-1px;font:700 15px var(--bq-hand);color:var(--bq-green)}
#barometer .bar-card .agebar{display:flex;align-items:center;gap:7px;margin-bottom:3px;font:600 12px var(--bq-sans);color:var(--bq-muted)}
#barometer .bar-card .agebar .al{flex:0 0 34px}
#barometer .bar-card .agebar .ab{flex:1;font:400 12px/1 monospace;letter-spacing:1px;color:#efe8d8;overflow:hidden;white-space:nowrap}
#barometer .bar-card .agebar .ab .on{color:var(--bq-terra)}
#barometer .bar-card .agebar .ap{flex:0 0 30px;text-align:right}
#barometer .bar-card .facts{font:400 12.5px/1.9 var(--bq-sans);color:var(--bq-ink-2)}
#barometer .bar-card .facts b{font-weight:800}
#barometer .bar-card .badge-free{display:inline-block;background:#d3e6c8;color:#2c5e17;border-radius:var(--r-ctl);font:700 12px var(--bq-sans);padding:2px 7px}
#barometer .bar-card .tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
#barometer .bar-card .chip{background:#efe8d8;border:1px solid var(--bq-idle);border-radius:999px;font:600 12px var(--bq-sans);color:var(--bq-ink-2);padding:3px 9px}
#barometer .bar-card .extra .op{font:400 12.5px/1.55 var(--bq-sans);color:var(--bq-ink-2);grid-column:1/-1;margin:0;
border-top:1px dashed var(--bq-line);padding-top:12px;font-style:italic}
@media(max-width:600px){#barometer .bar-card .lg{flex-basis:88px}#barometer .bar-card .lg img{max-width:88px}
#barometer .bar-card.open .extra{grid-template-columns:1fr}
#barometer .bar-card .extra .cell + .cell{border-left:0;padding-left:0;margin-left:0;border-top:1px dashed var(--bq-line);padding-top:12px}}
/* entrance animation */
.bq-in{animation:bqIn .28s ease-out both}
@keyframes bqIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.bq-in{animation:none}.bq-fill{transition:none}}
/* ---- review-page embed (mode="embed"): full card width, collapsed startup ---- */
#barometer.bq-embed{max-width:none;scroll-margin-top:calc(var(--hdr-h,74px) + 56px)}
.bq-startup{padding:4px 0 6px;text-align:left}
.bq-startup .bq-chat{margin:6px 0 0}
.bq-avatar-wrap{flex:0 0 68px}
.bq-avatar-wrap img{width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:top;display:block;
border:1.5px solid var(--bq-ink);background:var(--bq-cream-2);box-shadow:2px 2px 0 rgba(43,38,32,.18)}
.bq-startup .bq-bubble{flex:1 1 auto;min-width:0}
.bq-startup .bq-bubble p{margin:0;font:500 15px/1.55 var(--bq-sans);color:var(--bq-ink-2)}
.bq-startup .bq-startrow{margin-top:20px}
.bq-startup .bq-note{text-align:center}
#barometer.bq-embed .bq-screen{padding-top:4px}