/* returns.css - Solar & Lunar Returns: monochrome paper-cutout duality.
   body.solar = light paper, black cut shapes.  body.lunar = the exact inverse: black night, white cut shapes. */
:root{--sans:"Inter","Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;--sym:"Segoe UI Symbol","Noto Sans Symbols","Apple Symbols","DejaVu Sans",sans-serif;
  --bgc:#ecebe7;--paper:#fafaf7;--fg:#0b0b0b;--mute:#575757;--shadow:#0b0b0b;--field:#e2e1dc;--dots:rgba(0,0,0,.10)}
body.lunar{--bgc:#080808;--paper:#161616;--fg:#f2f2ee;--mute:#a9a9a9;--shadow:#e4e4df;--field:#262626;--dots:rgba(255,255,255,.08)}
*{box-sizing:border-box}
html{background:#ecebe7;overflow-x:hidden}
html:has(body.lunar){background:#080808}
body{margin:0;min-height:100vh;color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.6;text-align:center;overflow-x:clip;transition:color .5s}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .9s ease}
.bgS{background-color:#ecebe7;background-image:radial-gradient(rgba(0,0,0,.10) 1.3px,transparent 1.5px);background-size:15px 15px}
.bgL{background-color:#080808;background-image:radial-gradient(rgba(255,255,255,.09) 1.3px,transparent 1.5px);background-size:15px 15px;opacity:0}
body.lunar .bgL{opacity:1}body.lunar .bgS{opacity:0}
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
header.hero,main,.f23-foot{position:relative;z-index:3}
a{color:var(--fg)}
h1,h2,h3{font-family:var(--sans);margin:0}

/* hero: a cut-paper sun and a crescent moon */
header.hero{max-width:980px;margin:0 auto;padding:56px 16px 8px}
.duo{display:flex;align-items:center;justify-content:center;gap:clamp(22px,8vw,90px)}
.disc{position:relative;width:clamp(86px,22vw,140px);aspect-ratio:1;border:0;padding:0;cursor:pointer;background:none;transition:transform .5s,opacity .5s;opacity:.38}
.disc[aria-selected=true]{opacity:1;transform:scale(1.14)}
.disc:hover{opacity:.9}
.disc:focus-visible{outline:3px solid var(--fg);outline-offset:8px;border-radius:50%}
/* sun: solid core + ring + triangular rays, all cut from one colour */
.disc.sun::before{content:"";position:absolute;inset:-22%;border-radius:50%;background:repeating-conic-gradient(var(--fg) 0 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 53%,#000 70%,transparent 71%);mask:radial-gradient(circle,transparent 52%,#000 53%,#000 70%,transparent 71%);animation:spin 80s linear infinite}
.disc.sun::after{content:"";position:absolute;inset:14%;border-radius:50%;background:var(--fg);box-shadow:0 0 0 7px var(--bgc),0 0 0 11px var(--fg);transition:box-shadow .5s}
/* moon: crescent made by an offset shadow */
.disc.moon::before{content:"";position:absolute;inset:6%;border-radius:50%;box-shadow:inset -22px 8px 0 0 var(--fg);transform:rotate(-18deg)}
.disc.moon::after{content:"";position:absolute;width:9%;height:9%;border-radius:50%;background:var(--fg);right:14%;top:22%;box-shadow:-14px 26px 0 -1px var(--fg),6px 52px 0 -2px var(--fg)}
.duo .and{font-weight:800;font-size:clamp(22px,5vw,36px)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero h1{font-size:clamp(34px,9vw,84px);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;line-height:.95;margin:22px 0 8px;text-shadow:5px 5px 0 var(--bgc),7px 7px 0 var(--mute);transition:color .5s}
.hero .sub{font-size:clamp(15px,2.4vw,19px);color:var(--mute);margin:0;letter-spacing:.04em}
.modes{display:flex;gap:10px;justify-content:center;margin:20px 0 0;flex-wrap:wrap}
.modes button{font-family:var(--sans);font-weight:800;letter-spacing:.14em;font-size:12px;padding:13px 20px;border-radius:999px;border:0;background:var(--field);color:var(--fg);cursor:pointer;transition:all .35s}
.modes button[aria-selected=true]{background:var(--fg);color:var(--paper)}
.modes button:focus-visible{outline:3px solid var(--fg);outline-offset:3px}

main{max-width:1040px;margin:0 auto;padding:0 16px 20px}
/* paper pieces: a cut shape (::before) over an offset shadow copy (::after) */
.card{--cut:polygon(0 14px,22px 0,calc(100% - 40px) 7px,100% 0,calc(100% - 9px) calc(100% - 24px),100% 100%,48px calc(100% - 8px),0 100%);
  position:relative;isolation:isolate;margin:34px 0;padding:32px 30px;border:0;background:none}
.card:nth-of-type(2n){--cut:polygon(0 0,calc(100% - 26px) 10px,100% 20px,calc(100% - 6px) 55%,100% calc(100% - 12px),70% 100%,30px calc(100% - 9px),8px calc(100% - 24px))}
.card:nth-of-type(3n){--cut:polygon(16px 8px,50% 0,100% 12px,calc(100% - 14px) calc(100% - 16px),calc(100% - 50px) 100%,0 calc(100% - 6px),6px 40%)}
.card::before,.card::after{content:"";position:absolute;inset:0;clip-path:var(--cut)}
.card::before{background:var(--paper);z-index:-1;transition:background .5s}
.card::after{background:var(--shadow);transform:translate(10px,10px);z-index:-2;transition:background .5s}
.card h2{font-size:clamp(18px,3vw,26px);font-weight:900;text-transform:uppercase;letter-spacing:.03em;margin-bottom:10px}
.card h3{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:16px 0 6px}
.lead{font-size:1.12em;max-width:760px;margin-left:auto;margin-right:auto}
.small{font-size:15px;color:var(--mute)}
em.t{font-style:normal;font-weight:800;background:linear-gradient(transparent 62%,var(--field) 62%)}

form.f{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 16px;text-align:center}
.f label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);align-items:stretch}
.f input,.f select{font:inherit;font-family:var(--sans);font-size:17px;color:var(--fg);background:var(--field);border:0;border-radius:0;padding:11px 12px;width:100%;text-align:center;text-align-last:center;color-scheme:light}
body.lunar .f input,body.lunar .f select{color-scheme:dark}
.f input:focus,.f select:focus{outline:3px solid var(--fg);outline-offset:0}
.f .wide{grid-column:1/-1}
.f .chk{flex-direction:row;align-items:center;justify-content:center;gap:9px;text-transform:none;letter-spacing:0;font-weight:500;font-size:16px;color:var(--fg)}
.f .chk input{width:auto}
.hint{font-size:14px;color:var(--mute);margin:0}
.err{color:var(--fg);font-weight:800;min-height:1.3em;margin:0;grid-column:1/-1}
button.go,button.ghost{font-family:var(--sans);font-weight:800;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border:0;transition:all .3s}
button.go{font-size:14px;padding:16px 30px;border-radius:999px;color:var(--paper);background:var(--fg)}
button.go:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--mute)}
button.ghost{font-size:11px;padding:12px 14px;background:var(--field);color:var(--fg);border-radius:0}
button.ghost:hover{background:var(--fg);color:var(--paper)}
button:focus-visible{outline:3px solid var(--fg);outline-offset:3px}
.row{display:flex;gap:8px;align-items:flex-end}.row label{flex:1;min-width:0}
.otherplace{display:contents}.otherplace[hidden]{display:none}
@media(min-width:700px){.f .row{grid-column:span 2}}

/* results */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0 4px}
.gl{padding:18px 14px;background:var(--fg);color:var(--paper);transform:rotate(-1.2deg);clip-path:polygon(0 4px,100% 0,calc(100% - 3px) 100%,5px calc(100% - 3px))}
.gl:nth-child(2n){transform:rotate(1deg)}.gl:nth-child(3n){transform:rotate(-.5deg)}
.gl b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.gl .big{font-weight:900;font-size:20px;margin:5px 0}
.gl .big span{font-family:var(--sym);font-family:var(--sans)}
.gl p{margin:0;font-size:15px;line-height:1.45;opacity:.9}
.twocol{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:center}
@media(max-width:820px){.twocol{grid-template-columns:1fr}}
.wheel{width:100%;height:auto;display:block}
.wheel .sg{font-size:24px;font-family:var(--sym)}
.wheel .bg{font-size:20px;font-family:var(--sym)}
.legend{font-size:14px;color:var(--mute);text-align:center;margin:8px 0 0}
.legend span{font-family:var(--sym);margin:0 4px 0 12px;color:var(--fg)}
ul.brief{margin:8px auto 0;padding:0;list-style:none;display:grid;gap:14px;max-width:460px}
ul.brief li::before{content:attr(data-g);display:block;font-family:var(--sym);font-size:20px;line-height:1.2}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:16px}
th{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding:8px 8px}
td{padding:8px 8px;border:0}
tbody tr:nth-child(even) td{background:var(--field)}
td.g{font-family:var(--sym);font-size:19px;width:30px}
tr.ang td{background:var(--fg)!important;color:var(--paper);font-weight:800}
.tag{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:2px 8px;margin-left:6px;background:var(--fg);color:var(--paper)}
tr.ang .tag{background:var(--paper);color:var(--fg)}
ul.hits{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;text-align:center}
ul.hits li{background:var(--field);padding:14px 18px;clip-path:polygon(0 3px,100% 0,calc(100% - 4px) 100%,3px calc(100% - 4px))}
ul.hits li.hard{background:var(--fg);color:var(--paper)}
ul.hits .nm{font-weight:900;font-size:15px;letter-spacing:.03em}
ul.hits .nm span{font-family:var(--sym)}
ul.hits li.hard .small{color:var(--paper);opacity:.75}
ul.hits p{margin:4px auto 0;font-size:16px;max-width:680px}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:14px 0 0}
button.pick{font:inherit;font-family:var(--sans);font-size:14px;color:var(--fg);background:var(--field);border:0;padding:12px;cursor:pointer;line-height:1.4;text-align:center;transition:transform .2s}
button.pick b{display:block;font-size:14px;font-weight:900;letter-spacing:.03em}
button.pick:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--mute)}
button.pick[aria-pressed=true]{background:var(--fg);color:var(--paper)}
@media(max-width:560px){body{font-size:16.5px}.card{padding:26px 18px;margin:28px 0}table{font-size:14.5px}td,th{padding:6px 3px}.hide-sm{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}