/* Shared foundation for every Roomie page: font, tokens, keyframes and the
   few components (buttons, toggles, option rows) used on more than one page. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url(../assets/fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --pink:#FF46B7; --pink-hover:#F02AA3; --pink-tint:#FFE3F3; --pink-ink:#B8006F;
  --ink:#1C1519; --muted:#5E5159; --bg:#FFFBFD; --white:#fff;
  --line:#F3E4EC; --line-2:#EADCE3; --line-3:#F0E2EA;
  --track-off:#DCCBD4; --box-off:#CDBFC7; --error:#C4005F;
  --yellow:#FFE14D; --yellow-hover:#FFD81F;
  --bouncy:cubic-bezier(.3,1.6,.5,1);
  /* Section colour; quiz pages override these per section. */
  --c:var(--pink); --tint:var(--pink-tint); --sink:var(--pink-ink);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);font-family:Manrope,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%}
input,textarea,button{font-family:inherit}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(var(--r,0deg))}}
@keyframes rise{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(1)}}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}

.bob{animation:bob 4s ease-in-out infinite}

/* Buttons ---------------------------------------------------------------- */
.btn{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;font-weight:800;border-radius:999px;transition:transform .15s,background .2s,opacity .2s}
.btn:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.btn-pink{background:var(--pink);color:#fff;font-size:17px;padding:17px 26px}
.btn-pink:hover{background:var(--pink-hover);color:#fff;transform:translateY(-2px)}
.btn-pink:active{transform:scale(.97)}
.btn-pink[disabled]{opacity:.6;cursor:progress;transform:none}
.btn-dark{background:var(--ink);color:#fff;font-size:17px;padding:17px 26px;text-decoration:none;display:block}
.btn-dark:hover{color:#fff;transform:translateY(-2px)}
.btn-dark:active{transform:scale(.97)}

/* Yes/no switch ---------------------------------------------------------- */
.switch{width:52px;height:30px;border-radius:99px;background:var(--track-off);position:relative;transition:background .2s;flex-shrink:0}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--bouncy)}
.is-on .switch{background:var(--c)}
.is-on .switch::after{transform:translateX(22px)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto!important}}