/* ayzoyo layout and components. No colour is written here: every colour comes from tokens.css. */

/* ===== base ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
[data-theme="vanta"]{color-scheme:dark}
[data-theme="pearl"]{color-scheme:light}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg-flat);color:var(--text);font:400 15px/1.45 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg),var(--bg-flat);pointer-events:none}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:manipulation}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sprite{position:absolute}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ruby-text);outline-offset:3px;border-radius:8px}
h1:focus-visible{outline:none}
.nojs{padding:40px 26px;text-align:center}

/* ===== screen frame ===== */
.screen{position:relative;display:flex;flex-direction:column;max-width:460px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:env(safe-area-inset-top) 0 calc(28px + env(safe-area-inset-bottom));animation:screen-in .2s ease-out both}
.screen.with-nav{padding-bottom:calc(122px + env(safe-area-inset-bottom))}
.screen.with-nav::after{content:"";position:fixed;left:0;right:0;bottom:0;height:112px;background:linear-gradient(transparent,var(--veil) 62%);pointer-events:none;z-index:4}
.screen.center{justify-content:center;align-items:center;text-align:center;gap:12px;padding-left:26px;padding-right:26px}
.screen.center .hero{width:100%}
.screen.center .btn{max-width:300px;margin-top:16px}
@keyframes screen-in{from{opacity:0}to{opacity:1}}
.pad{padding:0 26px}

.top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;flex:none;min-height:62px;padding:9px 20px}
.top .r{display:flex;gap:6px;margin-right:-10px}
.bar{display:flex;align-items:center;gap:2px;min-width:0;margin-left:-10px}
.ib{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%}
.logo{font:800 22px/1 var(--head);letter-spacing:-.02em}
.logo b{font-weight:800;color:var(--ruby)}
.ic{display:block;width:25px;height:25px;fill:none;stroke:var(--icon);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic.dimi{stroke:var(--icon-dim)}
.ic.ch{flex:none;width:17px;height:17px;stroke:var(--icon-dim);stroke-width:2.2}

/* ===== type ===== */
.t1{position:relative;z-index:1;padding:0 22px;font:800 clamp(24px,8.4vw,31px)/1.08 var(--head);letter-spacing:-.02em;text-align:center;text-wrap:balance}
.t1-sm{font-size:clamp(20px,6.6vw,25px);line-height:1.15}
.t2{position:relative;z-index:1;font:700 clamp(17px,5.6vw,20px)/1.25 var(--head);text-wrap:balance}
.t3{min-width:0;font:800 clamp(16px,5.2vw,21px)/1.15 var(--head);letter-spacing:-.01em}
.cap{margin:26px 0 12px;font:700 12.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.pad>.cap:first-child{margin-top:12px}
.sub{position:relative;z-index:1;color:var(--dim)}
.sub.left{margin:6px 0 16px;text-align:left}
.auth .sub{margin-top:14px;text-align:center}
.sm{font-size:12.5px;line-height:1.55;color:var(--faint);text-align:center}
.btn+.sm{margin-top:40px}
.sm a{padding:8px 0;color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* ===== eclipse (the o of the logo) ===== */
.hero{position:relative;display:grid;place-items:center;flex:none;--s:min(150px,42vw);height:calc(var(--s) + 56px)}
.hero-lg{--s:min(196px,54vw);height:calc(var(--s) + 60px)}
.hero-sm{--s:96px;height:150px}
.sky{position:absolute;inset:-56px 0;background:radial-gradient(42% 50% at 50% 50%,var(--glow),transparent);pointer-events:none}
.ecl{position:relative;width:var(--s);height:var(--s);border-radius:50%;background:var(--ecl-core);box-shadow:var(--ecl-shadow)}
.hero-sm .ecl{box-shadow:var(--ecl-shadow-sm)}
.ecl i{position:absolute;inset:33.6%;border-radius:50%;background:var(--ecl-eye);box-shadow:var(--ecl-eye-rim)}
.ecl::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:var(--ecl-shadow-sm);opacity:0;animation:corona 5s ease-in-out infinite;will-change:opacity}
@keyframes corona{50%{opacity:.85}}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--star);opacity:.7}
.s1{left:11%;top:22%}
.s2{right:13%;top:5%}
.s3{right:19%;bottom:3%;opacity:.4}
.s4{left:17%;bottom:7%;opacity:.4}
.hero-sm .star{display:none}

/* ===== forms ===== */
.form{margin-top:24px}
.field{position:relative;margin-bottom:8px}
.ln{display:block;width:100%;height:52px;padding:14px 2px 12px;border:0;border-bottom:1.5px solid var(--line);border-radius:0;background:transparent;color:var(--text);font:400 17px/1.3 var(--body);outline:none;-webkit-appearance:none;appearance:none}
.has-peek .ln{padding-right:62px}
.ln::placeholder{color:var(--faint);opacity:1}
.ln:focus{border-bottom-color:var(--ruby)}
.ln:focus-visible{outline:none}
.ln:-webkit-autofill{-webkit-text-fill-color:var(--text);caret-color:var(--text);box-shadow:0 0 0 60px var(--bg-flat) inset}
.peek{position:absolute;right:-6px;top:4px;height:44px;padding:0 8px;font:600 13.5px/1 var(--body);color:var(--dim)}
.check{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 2px 4px;cursor:pointer}
.check input{position:absolute;left:2px;width:24px;height:24px;margin:0;opacity:0}
.box{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1.5px solid var(--icon-dim);border-radius:8px}
.check input:checked+.box{border-color:var(--ruby);background:var(--ruby)}
.check input:checked+.box::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid var(--on-ruby);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check input:focus-visible+.box{outline:2px solid var(--ruby-text);outline-offset:3px}
.msg{min-height:20px;margin:6px 2px 10px;font-size:14px;line-height:1.4}
.msg-err{color:var(--ruby-text)}
.msg-ok{color:var(--text)}
.btn{display:grid;place-items:center;width:100%;height:58px;margin-bottom:6px;border-radius:999px;background:var(--btn);box-shadow:var(--btn-shadow);font:700 19px/1 var(--body);color:var(--on-ruby);text-shadow:var(--on-ruby-shadow);-webkit-user-select:none;user-select:none;transition:transform .08s ease,box-shadow .08s ease}
.btn:active{transform:translateY(4px);box-shadow:var(--btn-shadow-down)}
.btn:disabled{cursor:default;filter:saturate(.8) brightness(.92)}
.btn:focus-visible{border-radius:999px}
.links{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:14px;margin:16px 4px 10px;font-weight:600}
.links a{padding:12px 0}
.links .hot{color:var(--ruby-text)}
.links.one{justify-content:center}
@media (max-width:339px){.links{column-gap:8px;margin-left:0;margin-right:0;font-size:14px}}

/* ===== home ===== */
.moons{display:flex;flex:none;gap:14px;padding:16px 20px 10px;overflow-x:auto;scrollbar-width:none;font-size:12px;color:var(--dim);text-align:center}
.moons::-webkit-scrollbar{display:none}
.mo{flex:none;width:62px}
.moon{position:relative;width:62px;height:62px;margin:0 auto 6px;border-radius:50%;overflow:hidden;background:var(--ecl-core);box-shadow:var(--moon-rim)}
.moon::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset var(--c,-9px) 0 0 0 var(--ruby)}
.moon.full{background:var(--moon-full);box-shadow:var(--moon-full-glow)}
.moon.full::before{display:none}
.p1{--c:-9px}
.p2{--c:-22px}
.p3{--c:-36px}
.p4{--c:-50px}
.empty{display:flex;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:330px;padding:8px 30px 16px;text-align:center}
.empty .hero{width:100%;margin-bottom:8px}

/* ===== bottom discs ===== */
.discs{position:fixed;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));z-index:5;display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none}
.discs>*{flex:none;pointer-events:auto}
.disc{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--disc-line);border-radius:50%;background:var(--disc);box-shadow:var(--disc-shadow)}
.disc.act{border-color:var(--ruby);box-shadow:var(--act-shadow)}
.ringb{display:grid;place-items:center;width:66px;height:66px;margin-top:-10px;border:7px solid var(--ruby);border-radius:50%;background:var(--ecl-core);box-shadow:var(--ring-shadow)}
.ringb .ic{width:22px;height:22px;stroke:var(--on-ruby);stroke-width:2.6}
.disc:focus-visible,.ringb:focus-visible,.ib:focus-visible{border-radius:50%}
@media (max-width:339px){.discs{gap:6px}}

/* ===== settings ===== */
.orbs{display:flex;justify-content:center;gap:36px;padding:14px 0 4px;text-align:center}
.th{padding:10px 8px 6px;border-radius:16px;font:600 13px/1.3 var(--body)}
.orb{position:relative;display:block;width:74px;height:74px;margin:0 auto 14px;border-radius:50%}
.orb-vanta{background:var(--orb-vanta);box-shadow:var(--orb-vanta-shadow)}
.orb-pearl{background:var(--orb-pearl);box-shadow:var(--orb-pearl-shadow)}
.th.sel .orb::after{content:"";position:absolute;inset:-9px;border:2px solid var(--ruby);border-radius:50%;box-shadow:var(--sel-shadow)}
.li{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;min-height:52px;padding:14px 0;border-bottom:1px solid var(--line-soft);font-weight:600;text-align:left}
.li.last{border-bottom:0}
.val{min-width:0;overflow:hidden;font-weight:400;color:var(--dim);text-overflow:ellipsis;white-space:nowrap}
.ask{flex-wrap:wrap;row-gap:10px}
.two{display:flex;flex:none;gap:8px}
.tb{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-weight:600}
.tb.hot{border-color:var(--ruby);color:var(--ruby-text)}
.tb:focus-visible{border-radius:999px}

/* ===== legal documents ===== */
.doc .date{margin:2px 0 6px;font-size:13px;color:var(--faint)}
.doc h2{margin:24px 0 8px;font:700 16px/1.3 var(--body)}
.doc p{margin:0 0 10px;color:var(--dim);overflow-wrap:anywhere}

/* ===== rules self-test ===== */
.chks{margin-bottom:16px}
.chk{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.nm{display:flex;flex-direction:column;gap:2px}
.note{font-size:12.5px;color:var(--ruby-text)}
.mark{flex:none;font:700 13px/1 var(--body);letter-spacing:.08em}
.mark.ok,.verdict.ok{color:var(--pass)}
.mark.no,.verdict.no{color:var(--ruby-text)}
.verdict{min-height:22px;margin:0 0 16px;font-weight:700}

@media (prefers-reduced-motion:reduce){
  .screen{animation:none}
  .ecl::after{animation:none}
  .btn{transition:none}
}