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

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