/* membership.css: the Monthly / Yearly switch on the Membership page. Adds to style.css only.
   The switch is a real radio group; showing one plan's lines works on CSS :has() alone, and
   pages.js also sets [hidden] on them so older browsers follow along. */

.billing{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--s2)}
.billing legend{padding:0;margin-bottom:var(--s2)}
.billing-options{display:grid;grid-template-columns:1fr 1fr;width:min(100%,320px);padding:var(--s1);border:var(--hairline);border-radius:var(--r-full)}
.billing-option{position:relative;display:block}
.billing-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.billing-option span{display:flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--s3);border-radius:var(--r-full);color:var(--cream-2);font:500 var(--t-btn-sm)/1.2 var(--f-body);letter-spacing:.01em;transition:background-color var(--dur-ui),color var(--dur-ui),box-shadow var(--dur-ui)}
.billing-option:hover span{color:var(--cream)}
.billing-option input:checked + span{background:var(--card);color:var(--cream);box-shadow:inset 0 0 0 1px var(--gold)}
.billing-option input:focus-visible + span{outline:2px solid var(--gold-2);outline-offset:3px}

/* One plan's lines at a time. */
.plans:has(.billing input[value="month"]:checked) [data-plan="year"],
.plans:has(.billing input[value="year"]:checked) [data-plan="month"]{display:none}

/* Two weeks on: the check-in every signed-in account gets (docs/MEMBERSHIP.md), the gold edge of astrology's spiritual layer */
.checkin-note{display:grid;gap:var(--s2);margin-top:var(--s3);padding:var(--s4);border-left:2px solid var(--gold-line);background:linear-gradient(90deg,var(--glass-hi),transparent 85%);border-radius:0 var(--r-m) var(--r-m) 0}
.checkin-note h2{margin:0;color:var(--gold)}
.checkin-note p{margin:0}