/* SMVrater look: a bright scorecard with one loud thing on it, the score sticker.
   Paper is lilac, ink is plum, outlines are drawn in ink. Colour sits in the sticker, the bars and the main button.
   Shared by the server-rendered pages (pages.cjs) and the logged-in app (public/app.html). */
@font-face { font-family: "Bagel"; src: url(/fonts/bagel.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(/fonts/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --bg: #F6F1FF; --card: #FFFFFF; --ink: #1F1235; --mute: #6B5A8A; --line: #E4DAF7;
  --acc: #FF4D8D; --vio: #6C3BFF; --sun: #FFD23F; --mint: #19C9A3; --bad: #D61F45;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); font: 500 16px/1.55 "Bricolage", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg) radial-gradient(circle at 1px 1px, #E4DAF7 1.2px, transparent 0) 0 0 / 22px 22px;
}
main { max-width: 560px; margin: 0 auto; padding: 22px 16px 56px; }
a { color: var(--vio); text-underline-offset: 2px; }
h1 { font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; }
h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; margin: 26px 0 6px; }
h3 { font-size: 16px; font-weight: 800; margin: 18px 0 0; }
p.sub { color: var(--mute); margin: 0 0 20px; }
ol, ul { color: var(--mute); padding-left: 20px; margin: 6px 0 0; }
li { margin: 6px 0; }
code { background: var(--line); padding: 1px 5px; border-radius: 5px; font-size: 14px; }
:focus-visible { outline: 3px solid var(--vio); outline-offset: 2px; }

/* top bar + footer (server-rendered pages) */
.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.brand { font-family: "Bagel", "Bricolage", sans-serif; font-size: 24px; color: var(--ink); text-decoration: none; }
.top a.link { color: var(--ink); font-weight: 700; font-size: 14.5px; }
footer { margin-top: 36px; border-top: 2px solid var(--ink); padding-top: 14px; }
.fine, footer { color: var(--mute); font-size: 12.5px; }
.fine a, footer a { color: var(--mute); }
footer a { margin-right: 12px; display: inline-block; padding: 3px 0; }

/* cards and form parts */
.card { background: var(--card); border: 2.5px solid var(--ink); border-radius: 20px; padding: 16px; margin-bottom: 16px; }
label.f { display: block; font-size: 14px; color: var(--mute); margin: 12px 0 4px; }
input[type=email], input[type=password], input.txt {
  width: 100%; padding: 13px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font: inherit; font-size: 16px;
}
input.txt { margin-bottom: 8px; }
input::placeholder { color: #A99BC4; }
.chk { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; color: var(--mute); }
.chk input, .q input[type=radio] { accent-color: var(--acc); width: 18px; height: 18px; flex: none; margin-top: 2px; }
.hp { position: absolute; left: -9999px; }
.err { color: var(--bad); font-weight: 700; margin-top: 12px; }

/* buttons: the main one is a sticker you press flat */
.btn, button {
  display: block; width: 100%; padding: 14px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--acc);
  color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; text-align: center; text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .08s, box-shadow .08s;
}
.btn:active, button:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button.sec, .tabs button, .rec button { background: #fff; box-shadow: none; font-weight: 700; }
.buy { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.buy button { flex: 1; min-width: 150px; }
.buy button + button { background: var(--sun); }
.buy small { display: block; font-weight: 500; font-size: 12.5px; }
.buy .price { display: block; font-size: 26px; line-height: 1.1; font-weight: 800; }
.buy .per { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.buy { padding-top: 10px; }
.renew { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.renew input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; }
.renew span:first-of-type { flex: 1; min-width: 0; }
.renewerr { flex-basis: 100%; color: var(--bad); font-weight: 700; }
.buy button.popular { position: relative; box-shadow: 0 0 0 3px var(--ink); }
.buy .badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--sun); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

/* photo / voice / questions switch */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs button { flex: 1; padding: 11px 6px; border-radius: 99px; }
.tabs button.on { background: var(--sun); box-shadow: 3px 3px 0 var(--ink); }
.seg { display: flex; gap: 8px; margin-bottom: 14px; }
.seg label { flex: 1; text-align: center; padding: 11px; border: 2px solid var(--ink); border-radius: 12px; cursor: pointer; font-weight: 700; background: #fff; }
.seg input { display: none; }
.seg label:has(input:checked) { background: var(--ink); color: #fff; }
.drop { display: block; border: 2.5px dashed var(--vio); border-radius: 16px; padding: 22px; text-align: center; color: var(--mute); cursor: pointer; background: #FBF8FF; }
.drop img { max-width: 100%; max-height: 340px; border-radius: 12px; display: block; margin: 0 auto; }
.passage { border: 2px solid var(--ink); border-radius: 14px; padding: 14px; background: #FFF8DC; font-size: 15.5px; margin: 0 0 12px; }
.rec { display: flex; gap: 8px; align-items: center; }
.rec button { flex: 1; }
.timer { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; }
audio { width: 100%; margin-top: 12px; }

/* the score sticker: the one loud element */
.big {
  display: inline-block; font-family: "Bagel", "Bricolage", sans-serif; font-size: 64px; line-height: 1; color: var(--ink);
  background: var(--sun); border: 3px solid var(--ink); border-radius: 24px; padding: 14px 20px 10px;
  box-shadow: 6px 6px 0 var(--ink); transform: rotate(-3deg); margin: 6px 0 14px 4px;
}
.big span { font-family: "Bricolage", sans-serif; font-weight: 800; color: var(--ink) !important; opacity: .55; }
.tier { display: inline-block; vertical-align: top; margin: 22px 0 0 14px; font-weight: 800; font-size: 17px; background: var(--ink); color: #fff; padding: 5px 12px; border-radius: 99px; transform: rotate(2deg); }
#out .big, #smv .big { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: rotate(8deg) scale(.4); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #out .big, #smv .big { animation: none; } .btn, button { transition: none; } }

/* stat bars, one colour each */
.row { margin: 14px 0 5px; display: flex; justify-content: space-between; font-weight: 800; }
.bar { height: 14px; background: var(--line); border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--acc); border-right: 2px solid var(--ink); border-radius: 99px 0 0 99px; }
.bar:nth-of-type(8n+4) i, .bar:nth-of-type(8n+5) i { background: var(--vio); }
.bar:nth-of-type(8n+6) i, .bar:nth-of-type(8n+7) i { background: var(--mint); }
.bar:nth-of-type(8n) i, .bar:nth-of-type(8n+1) i { background: var(--sun); }

/* path, chart, questionnaire, share */
.steps { list-style: none; margin: 12px 0 0; padding: 0; color: var(--ink); font-size: 15px; }
.steps li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; margin: 0; }
.steps .dot { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); color: var(--ink); font-size: 13px; font-weight: 800; line-height: 20px; text-align: center; background: #fff; }
.steps li.done .dot { background: var(--mint); }
.steps li.done span.t { color: var(--mute); }
.steps li.now span.t { font-weight: 800; }
.chart { width: 100%; height: auto; display: block; margin-top: 6px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--mute); margin-top: 6px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; border: 1.5px solid var(--ink); }
.delta { margin: 10px 0 0; font-size: 15px; }
.q { margin: 18px 0 0; }
.q p { margin: 0 0 8px; font-weight: 800; }
.q label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; margin-bottom: 6px; cursor: pointer; font-size: 15px; background: #fff; }
.q label:has(input:checked) { background: var(--sun); }
.share { margin-top: 20px; padding-top: 16px; border-top: 2px dashed var(--ink); }
.share p { margin: 0 0 10px; }
.share .alt { display: flex; gap: 8px; margin-top: 12px; }
.share .alt a { flex: 1; text-align: center; padding: 10px 6px; border: 2px solid var(--ink); border-radius: 12px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 700; background: #fff; }

/* landing: a sample scorecard next to the pitch */
.sample { position: relative; background: #fff; border: 2.5px solid var(--ink); border-radius: 24px; padding: 18px 16px 16px; margin: 22px 0 26px; transform: rotate(1.2deg); box-shadow: 7px 7px 0 var(--vio); }
.sample .tag { position: absolute; top: -13px; right: 16px; background: var(--mint); border: 2px solid var(--ink); border-radius: 99px; padding: 2px 10px; font-size: 12.5px; font-weight: 800; }

/* landing step 3: the basic rating, and what the full rating adds */
.basicScore { margin: 12px 0 4px; }
.basicScore .big { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@media (prefers-reduced-motion: reduce) { .basicScore .big { animation: none; } }
.locked { list-style: none; padding: 0; margin: 8px 0 0; }
.locked li { position: relative; padding: 9px 12px 9px 40px; margin: 8px 0; border: 2px dashed var(--ink); border-radius: 14px; font-weight: 700; }
.locked li::before { content: "\1F512"; position: absolute; left: 12px; top: 8px; }
/* in your own words: transcript with fillers and hedges marked, filler counts */
.tabs button { font-size: 15px; padding: 11px 4px; }
.said { border: 2px solid var(--ink); border-radius: 14px; padding: 14px; background: #fff; font-size: 15.5px; line-height: 1.7; }
mark.fw { background: var(--sun); color: var(--ink); border-radius: 5px; padding: 1px 4px; font-weight: 700; }
mark.hw { background: none; color: inherit; border-bottom: 2px dashed #FF4D8D; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.chip { border: 2px solid var(--ink); border-radius: 99px; padding: 3px 11px; font-size: 14px; background: #FFF8DC; }

/* age option (all ages 18+ or by my age) */
.ageseg label { font-size: 14.5px; padding: 9px; }
.agein { display: block; margin: -4px 0 14px; font-weight: 700; }
.agein input { width: 90px; margin-left: 8px; padding: 9px 10px; border: 2px solid var(--ink); border-radius: 10px; font: inherit; }
.agein[hidden] { display: none; }
.agein small { display: block; font-weight: 400; color: var(--mute); margin-top: 6px; }
.agenote { margin: 6px 0 0; }

/* language switcher (i18n.cjs) */
.langsw { font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); background: transparent; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 8px; margin-right: 8px; cursor: pointer; max-width: 9.5em; }
.langbar { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.legalnote { border: 2px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-size: 14px; background: #FFF6D6; }

/* cartoon art + demo video (art.cjs, 2026-10-15) */
.bgart { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bgart svg { display: block; width: 100%; height: auto; overflow: visible; }
.bgart .dd { position: absolute; width: 40px; opacity: .45; animation: smvbob 7s ease-in-out infinite; }
.bgart .d1 { left: 3%; top: 12%; } .bgart .d2 { right: 4%; top: 18%; animation-delay: -2s; }
.bgart .d3 { left: 2%; top: 44%; width: 64px; animation-delay: -4s; } .bgart .d4 { right: 2%; top: 52%; width: 60px; animation-delay: -1s; }
.bgart .d5 { left: 15%; top: 60%; animation-delay: -3s; } .bgart .d6 { right: 17%; top: 48%; width: 60px; animation-delay: -5s; }
.bgart .d7 { left: 12%; top: 28%; animation-delay: -6s; } .bgart .d8 { right: 12%; top: 36%; animation-delay: -2.5s; }
.bgart .pp { position: absolute; bottom: 8px; display: none; }
.bgart .pp img { height: clamp(260px, 38vh, 420px); }
.bgart .p1 { left: 2vw; } .bgart .p2 { right: 2vw; }
@media (max-width: 899px) { .bgart .dd { opacity: .28; width: 28px; } .bgart .d3, .bgart .d4, .bgart .d6, .bgart .d7, .bgart .d8 { display: none; } }
@media (min-width: 1180px) { .bgart .pp { display: block; } .bgart .dd { opacity: .7; width: 48px; } .bgart .d3, .bgart .d4, .bgart .d6 { width: 78px; } }
@keyframes smvbob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .bgart .dd { animation: none; } }
.hero-art { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; max-width: 560px; margin: -4px auto 10px; padding-bottom: 6px; }
.hero-art::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 12px; border-radius: 50%; background: var(--ink); opacity: .08; z-index: -1; }
.hero-art .fig { flex: 1 1 0; display: flex; justify-content: center; }
.hero-art .fig img { height: clamp(150px, 42vw, 230px); }
.hero-art .hs { position: absolute; width: 26px; } .hero-art .h1 { left: 24%; top: 4%; } .hero-art .h2 { right: 27%; top: 30%; }
.fig { position: relative; display: inline-block; line-height: 0; }
.fig img { display: block; width: auto; max-width: 100%; }
.signno { position: absolute; display: flex; align-items: center; justify-content: center; font: 400 clamp(16px, 4.6vw, 30px)/1 "Bagel", sans-serif; color: var(--ink); }
.demo { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 18px 0 8px; }
.demo .sample { flex: 1 1 260px; margin: 22px 0 26px; }
.phone { margin: 0; width: 190px; flex: 0 0 auto; text-align: center; }
.phone video { display: block; width: 100%; aspect-ratio: 9 / 16; border: 4px solid var(--ink); border-radius: 26px; background: var(--ink); box-shadow: 6px 6px 0 var(--acc); object-fit: cover; }
.phone figcaption { font-size: 12px; color: var(--mute); margin-top: 10px; line-height: 1.35; }
.fun { display: inline-block; margin: 6px 0 0 8px; padding: 3px 10px; border: 2px dashed var(--ink); border-radius: 99px; background: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; vertical-align: middle; }
/* opt-in progress saves */
.savenote { display: block; margin-top: 2px; }
.savebox { margin-top: 16px; padding-top: 14px; border-top: 2px dashed #E4DAF7; }
.savebox > button { margin-top: 10px; }
.savedok { margin-top: 16px; font-size: 14.5px; font-weight: 700; }
.saveup { margin-top: 16px; }
.slist { list-style: none; padding: 0; margin: 10px 0 0; }
.sitem { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid #E4DAF7; }
.sitem .smedia.photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; border: 2px solid var(--ink); display: block; }
.sitem .smedia.voice { flex: 0 0 46%; }
.sitem .smedia.voice audio { width: 100%; }
.sitem .sbody { flex: 1; min-width: 0; }
.sitem .chg { font-size: 13px; margin-left: 6px; }
/* rewards: streak, Glow points, level, check-in, badges, shop */
.game { background: linear-gradient(135deg, #FFF8DC 0%, #FFFFFF 55%, #F1E9FF 100%); }
.gstats { display: flex; gap: 8px; }
.gstat { flex: 1; text-align: center; border: 2px solid var(--ink); border-radius: 14px; padding: 8px 4px; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.gstat b { display: block; font-family: "Bagel", "Bricolage", sans-serif; font-size: 26px; line-height: 1.1; font-weight: 400; }
.gstat small { display: block; font-size: 11.5px; color: var(--mute); font-weight: 700; }
.gstat.flame b { color: #FF6A1A; }
.gstat.flame.off b { color: var(--mute); }
.gstat.pts b { color: var(--vio); }
.gstat.lvl { background: var(--sun); }
.flamei { display: inline-block; transform-origin: 50% 90%; animation: flick 1.6s ease-in-out infinite; }
@keyframes flick { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.08); } }
.lvlbar { margin-top: 12px; }
.lvlbar .bar i { background: var(--vio) !important; }
.task { margin-top: 12px; padding: 12px; border: 2px dashed var(--ink); border-radius: 14px; background: #fff; }
.task .opt { display: block; margin: 8px 0; }
.task .opt input { margin-right: 8px; }
.task button { margin-top: 10px; }
.done-today { margin: 12px 0 0; font-weight: 800; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bdg { border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; font-size: 13px; font-weight: 800; background: var(--sun); }
.bdg.locked { background: #fff; color: var(--mute); border-style: dashed; font-weight: 700; }
.game details { margin-top: 12px; border-top: 2px dashed var(--line); padding-top: 10px; }
.game summary { cursor: pointer; font-weight: 800; }
.earn { list-style: none; padding: 0; margin: 8px 0 0; }
.earn li { display: flex; justify-content: space-between; gap: 10px; color: var(--ink); font-size: 14.5px; border-bottom: 1px solid var(--line); padding: 5px 0; margin: 0; }
.earn li b { color: var(--vio); white-space: nowrap; }
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.shop .item { border: 2px solid var(--ink); border-radius: 14px; padding: 10px; background: #fff; display: flex; flex-direction: column; }
.shop .item p { margin: 4px 0 8px; font-size: 12.5px; color: var(--mute); flex: 1; }
.shop .item button { padding: 8px; font-size: 14px; box-shadow: 2px 2px 0 var(--ink); background: var(--sun); }
/* share sheet */
.shgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.shgrid button { padding: 9px 4px; font-size: 13px; font-weight: 800; background: #fff; box-shadow: 2px 2px 0 var(--ink); border-radius: 12px; }
.shgrid button i { display: block; font-style: normal; font-size: 18px; line-height: 1.2; }
.share > button[data-sh] { margin-top: 4px; }
.earnline { margin: 10px 0 0; font-weight: 700; color: var(--vio) !important; }
@media (max-width: 380px) { .shgrid { grid-template-columns: repeat(3, 1fr); } .shop { grid-template-columns: 1fr; } }
/* toast + confetti */
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; max-width: 92vw; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 18px; font-weight: 800; box-shadow: 4px 4px 0 var(--sun); }
.toast small { display: block; font-weight: 600; color: var(--sun); }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
@media (prefers-reduced-motion: reduce) { .flamei { animation: none; } }