/* Skymate — flirty aesthetic.
   Rose is the primary; Bluesky blue survives only where it means Bluesky (the sign-in
   button, the "following" tag, links). Violet is the nemesis/clash colour, so the page
   never uses one hue for both "you two are perfect" and "never share a car".
   Every colour is defined on bare :root first; the dark blocks only redefine. */
:root{
  --bg:#FFF6F3; --paper:#FFFFFF; --ink:#2B1B2E; --ink2:#6C5567; --mute:#7F6A79; --line:#F2DEE4;
  --rose:#E0457B; --rose-soft:#FFE7EF; --rose-deep:#B22C5E; --rose-text:#A82657;
  --thorn:#7C5CBF; --thorn-soft:#EFE9FE;
  --sky:#1185FE; --sky-btn:#0B72E0; --sky-text:#0B5FBF; --sky-soft:#E6F1FF; --good:#2F9068;
  --heart:var(--rose); --heart-soft:var(--rose-soft);
  --bloom1:rgba(255,138,178,.32); --bloom2:rgba(255,196,150,.26);
  --shadow:0 1px 2px rgba(88,26,54,.05),0 10px 28px -14px rgba(88,26,54,.22);
  --shadow-lift:0 2px 4px rgba(88,26,54,.06),0 18px 40px -18px rgba(88,26,54,.34);
  --mono-s:52%; --mono-l:90%; --mono-ls:60%; --mono-ll:32%;
  --wash:rgba(224,69,123,.20); --chip:#FFFBFA;
  --btn-bg:#2B1B2E; --btn-fg:#FFF6F3; --pill-bg:#B22C5E; --pill-fg:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#170E16; --paper:#231524; --ink:#F9EAF0; --ink2:#D0B5C4; --mute:#A08596; --line:#3B2836;
    --rose:#FF7FA9; --rose-soft:#4A1E33; --rose-deep:#FFA9C4; --rose-text:#FF9CBE;
    --thorn:#B79CFF; --thorn-soft:#2B2148;
    --sky:#4CA2FF; --sky-btn:#2A7FD8; --sky-text:#4CA2FF; --sky-soft:#1C2E4A; --good:#63C79B;
    --bloom1:rgba(224,69,123,.30); --bloom2:rgba(150,90,255,.20);
    --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.7);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 18px 40px -18px rgba(0,0,0,.8);
    --mono-s:38%; --mono-l:28%; --mono-ls:62%; --mono-ll:84%;
    --wash:rgba(255,127,169,.26); --chip:#2B1A2B;
    --btn-bg:#F6D7E2; --btn-fg:#2B1B2E; --pill-bg:#5E2440; --pill-fg:#FFC2D6;
  }
}
:root[data-theme="dark"]{
  --bg:#170E16; --paper:#231524; --ink:#F9EAF0; --ink2:#D0B5C4; --mute:#A08596; --line:#3B2836;
  --rose:#FF7FA9; --rose-soft:#4A1E33; --rose-deep:#FFA9C4; --rose-text:#FF9CBE;
  --thorn:#B79CFF; --thorn-soft:#2B2148;
  --sky:#4CA2FF; --sky-btn:#2A7FD8; --sky-text:#4CA2FF; --sky-soft:#1C2E4A; --good:#63C79B;
  --bloom1:rgba(224,69,123,.30); --bloom2:rgba(150,90,255,.20);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 18px 40px -18px rgba(0,0,0,.8);
  --mono-s:38%; --mono-l:28%; --mono-ls:62%; --mono-ll:84%;
  --wash:rgba(255,127,169,.26); --chip:#2B1A2B;
  --btn-bg:#F6D7E2; --btn-fg:#2B1B2E; --pill-bg:#5E2440; --pill-fg:#FFC2D6;
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Karla,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* two soft blooms behind everything, so the page isn't a flat grey sheet */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(760px 460px at 12% -8%,var(--bloom1),transparent 62%),
             radial-gradient(680px 520px at 105% 6%,var(--bloom2),transparent 60%)}
.wrap{max-width:620px;margin:0 auto;padding:32px 20px 80px}
h1,h2,h3,.display{font-family:Fraunces,Georgia,"Times New Roman",serif;
  font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:600;letter-spacing:-.015em;text-wrap:balance;margin:0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
a{color:var(--rose-text);text-underline-offset:2px}
button{font:inherit;color:inherit;cursor:pointer}
.hidden{display:none!important}

/* header */
.brand{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:36px}
.brand h1{font-size:27px;font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 40}
.brand h1 span{color:var(--rose);font-style:italic;font-weight:700}
.who-bar{font-size:14px;color:var(--mute);display:flex;gap:10px;align-items:baseline}
.who-bar b{color:var(--ink2)}
.who-bar button{background:none;border:0;padding:0;color:var(--rose-text);font-weight:700}

/* intro */
.lede{font-size:35px;line-height:1.14;margin-bottom:18px;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.lede em{font-style:italic;font-weight:500;color:var(--rose-deep);
  background:linear-gradient(transparent 62%,var(--wash) 0);padding:0 .08em}
p{margin:0 0 14px;color:var(--ink2)}
.handle-row{display:flex;gap:8px;margin:24px 0 10px}
.handle-row .field{flex:1;display:flex;align-items:center;background:var(--paper);border:1.5px solid var(--line);
  border-radius:999px;padding:0 18px;box-shadow:var(--shadow)}
.handle-row .field span{color:var(--mute);font-weight:700}
.handle-row input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:18px;padding:13px 4px;color:var(--ink);outline:none}
.handle-row .field:focus-within{border-color:var(--rose);box-shadow:var(--shadow),0 0 0 4px var(--rose-soft)}
.btn{border:0;border-radius:999px;padding:13px 22px;font-weight:700;background:var(--btn-bg);color:var(--btn-fg);
  transition:transform .1s,box-shadow .16s,filter .16s;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
/* Bluesky blue is reserved for the one button that really is Bluesky. --sky-btn is a
   shade down from Bluesky's #1185FE so white label text clears 4.5:1; --sky itself stays
   the true brand blue for the tags and small type that sit ON a light ground. */
.btn.sky{background:var(--sky-btn);color:#fff}
.btn.rose{background:linear-gradient(120deg,var(--rose),#FF7E5F);color:#fff}
.btn.ghost{background:transparent;color:var(--ink2);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--rose);color:var(--rose-text);box-shadow:none}
.btn:focus-visible,.opt:focus-visible,.handle-row input:focus-visible{outline:3px solid var(--rose);outline-offset:2px}
.fine{font-size:14px;color:var(--mute)}
.pool{margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}
.pool .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:13px;padding:5px 12px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:var(--ink2)}

/* quiz */
.progress{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;margin-bottom:28px}
.progress i{display:block;height:5px;border-radius:999px;background:var(--line);transition:background .2s}
.progress i.done{background:linear-gradient(90deg,var(--rose),var(--rose-deep))}
.progress i.cur{background:var(--ink)}
.qnum{margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.prompt{font-size:39px;line-height:1.12;margin-bottom:26px;min-height:2.2em;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:14px 22px;
  font-size:18px;box-shadow:var(--shadow);transition:border-color .14s,transform .1s,box-shadow .16s,background .14s;
  display:flex;align-items:center;gap:14px}
.opt:hover{border-color:var(--rose);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.opt.picked{border-color:var(--rose);background:var(--rose-soft);color:var(--ink)}
.opt .k{font-family:Fraunces,Georgia,serif;font-variation-settings:"WONK" 1;font-size:13px;font-weight:700;
  color:var(--mute);width:22px;height:22px;flex:none;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;border:1.5px solid var(--line);transition:.14s}
.opt:hover .k{border-color:var(--rose);color:var(--rose)}
.opt.picked .k{background:var(--rose);border-color:var(--rose);color:#fff}
.qfoot{display:flex;justify-content:flex-start;align-items:center;margin-top:22px;gap:12px;flex-wrap:wrap}
.nav{display:flex;gap:8px}
.nav button{border:0;background:none;color:var(--ink2);font-weight:700;padding:8px 6px;border-radius:999px}
.nav button:hover:not(:disabled){color:var(--rose-text)}
.nav button:disabled{opacity:.35}

/* results */
.hero{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px 22px;align-items:center;
  background:var(--paper);border-radius:26px;padding:28px 28px 22px;box-shadow:var(--shadow-lift);
  margin-bottom:28px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--rose),#FF9E6D 55%,var(--thorn))}
.pct{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-weight:800;font-size:94px;line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.045em;
  color:var(--rose);background:linear-gradient(135deg,var(--rose),#FF8A5B);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pct small{font-size:.4em;letter-spacing:0;font-weight:600}
.hero .who{font-size:31px;line-height:1.1}
.hero .group{color:var(--mute);font-size:14px;margin-top:4px}
.hero .why{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;font-size:15px;color:var(--ink2)}
.why b{color:var(--ink);font-weight:700}
.why .clash{color:var(--thorn);font-weight:700}
.list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:64px 1fr;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row .p{font-family:Fraunces,Georgia,serif;font-variation-settings:"WONK" 1;font-weight:800;font-size:26px;
  font-variant-numeric:tabular-nums;color:var(--rose);letter-spacing:-.02em}
.row .n{font-weight:700}
.row .g{color:var(--mute);font-size:13px;margin-left:8px;font-weight:400}
.row .w{grid-column:2;font-size:14px;color:var(--ink2)}
.row .w .clash{color:var(--thorn);font-weight:700}
.row.bad .p{color:var(--thorn)}
.sec{margin:36px 0 10px;display:flex;justify-content:space-between;align-items:baseline}
.sec h2{font-size:23px}
.compare{display:flex;gap:8px;margin-top:10px}
.compare .field{flex:1;display:flex;align-items:center;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:0 16px}
.compare .field:focus-within{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-soft)}
.compare .field span{color:var(--mute);font-weight:700}
.compare input{flex:1;min-width:0;border:0;background:none;font:inherit;padding:11px 4px;color:var(--ink);outline:none}
.note{margin-top:28px;padding:14px 18px;border-radius:16px;background:var(--rose-soft);color:var(--ink2);font-size:14px}
.err{background:var(--rose-soft);color:var(--rose-text)}
.actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
@media (max-width:480px){
  .prompt{font-size:31px}.pct{font-size:74px}.hero{grid-template-columns:1fr}.lede{font-size:29px}
  /* Pill buttons need their label on one line. Below this width there isn't room beside
     a handle field, so the forms stack instead of squeezing the button into a blob. */
  .handle-row,.compare{flex-direction:column}
  .handle-row .btn,.compare .btn{width:100%}
  .actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}
  .btn:hover,.opt:hover{transform:none}}

/* people rows */
.row .n{display:inline-flex;align-items:center;gap:8px}
.av{width:22px;height:22px;border-radius:50%;background:var(--line);object-fit:cover;flex:none}
.av.mono{display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.02em;
  background:hsl(var(--h) var(--mono-s) var(--mono-l));color:hsl(var(--h) var(--mono-ls) var(--mono-ll))}
.av-lg{width:60px;height:60px;box-shadow:0 0 0 3px var(--rose-soft)}
.av-lg.mono{font-size:20px}
.hero .whoblock{display:flex;align-items:center;gap:16px;min-width:0}
.hero .face{display:block;flex:none}
.rel{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px;margin-left:8px;vertical-align:middle}
.rel.mutual{background:var(--pill-bg);color:var(--pill-fg)}
.rel.following,.rel.followed_by{background:var(--sky-soft);color:var(--sky-text)}
.row a{color:inherit;text-decoration:none}
.row a:hover{text-decoration:underline;text-decoration-color:var(--rose)}
.empty{padding:14px 0;color:var(--mute);font-size:15px;border-bottom:1px solid var(--line)}

.qfoot .finish{flex-basis:100%;padding:11px 20px;font-size:15px}
@media (min-width:520px){.qfoot .finish{flex-basis:auto;margin-left:auto}}

/* spicy toggle */
.switch{display:inline-flex;align-items:center;gap:10px;margin:14px 0 4px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:42px;height:24px;border-radius:999px;background:var(--line);flex:none;padding:2px;
  display:flex;transition:background .18s}
.switch .knob{width:20px;height:20px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(88,26,54,.35);
  transition:transform .18s}
.switch input:checked + .track{background:linear-gradient(120deg,var(--rose),#FF8A5B)}
.switch input:checked + .track .knob{transform:translateX(18px)}
.switch input:focus-visible + .track{outline:3px solid var(--rose);outline-offset:2px}
.switch-label{font-size:15px;color:var(--ink2);font-weight:700}
.switch.small{margin:0}
.switch.small .track{width:35px;height:21px}
.switch.small .knob{width:17px;height:17px}
.switch.small input:checked + .track .knob{transform:translateX(14px)}
.switch.small .switch-label{font-size:14px;font-weight:700}

/* all-matches view */
.btn.wide{width:100%;margin-top:30px}
.backlink{background:none;border:0;padding:0;color:var(--rose-text);font-weight:700;font-size:15px;margin-bottom:6px}
.tabs{display:flex;gap:6px;margin:4px 0 6px}
.tab{border:1.5px solid var(--line);background:var(--paper);color:var(--ink2);border-radius:999px;
  padding:6px 15px;font-size:14px;font-weight:700;transition:.14s}
.tab:hover{border-color:var(--rose);color:var(--rose-text)}
.tab.on{border-color:var(--pill-bg);background:var(--pill-bg);color:var(--pill-fg)}
.alist{border-top:1px solid var(--line);margin-top:8px}
.arow{display:grid;grid-template-columns:26px 54px 1fr;gap:12px;align-items:center;width:100%;text-align:left;
  padding:11px 0;border:0;border-bottom:1px solid var(--line);background:none}
.arow:hover .aname{text-decoration:underline;text-decoration-color:var(--rose)}
.arow .rank{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.arow .p{font-family:Fraunces,Georgia,serif;font-variation-settings:"WONK" 1;font-weight:800;font-size:21px;
  font-variant-numeric:tabular-nums;color:var(--rose);letter-spacing:-.02em}
.arow .who2{display:flex;align-items:center;gap:9px;min-width:0}
.aname{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .g{white-space:nowrap}
.arow.lo .p{color:var(--thorn)}
.awhy{font-size:14px;color:var(--ink2);padding:0 0 14px 92px;border-bottom:1px solid var(--line)}
.awhy .clash{color:var(--thorn);font-weight:700}
.awhy b{color:var(--ink)}
@media (max-width:480px){.arow{grid-template-columns:22px 46px 1fr;gap:9px}.awhy{padding-left:0}}

/* anyone's top match */
.duo{position:relative;background:var(--paper);border-radius:26px;padding:24px;box-shadow:var(--shadow-lift);
  margin-top:14px;overflow:hidden}
.duo::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--rose),#FF9E6D 55%,var(--thorn))}
.duo .faces{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}
.duo .side{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0}
.duo .side .nm{font-weight:700;font-size:15px;line-height:1.2;overflow-wrap:anywhere}
.duo .side .sub{font-size:12px;color:var(--mute)}
.duo .side a{color:inherit;text-decoration:none}
.duo .side a:hover{text-decoration:underline;text-decoration-color:var(--rose)}
.duo .score{font-family:Fraunces,Georgia,serif;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-weight:800;
  font-size:48px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.035em;
  color:var(--rose);background:linear-gradient(135deg,var(--rose),#FF8A5B);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.duo .why2{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.duo .why2 b{color:var(--ink)}
.duo .why2 .clash{color:var(--thorn);font-weight:700}
.duo .nem{margin-top:10px;font-size:13px;color:var(--mute)}
.av-md{width:46px;height:46px;box-shadow:0 0 0 3px var(--rose-soft)}
.av-md.mono{font-size:15px}

.chip.tap{cursor:pointer;font:inherit;font-size:13px;transition:.14s}
.chip.tap:hover{border-color:var(--rose);color:var(--rose-text);background:var(--rose-soft)}
.chip.tap:focus-visible{outline:3px solid var(--rose);outline-offset:2px}