/* horoscope.css: /horoscope and /horoscope/{sign} (functions/horoscope/_page.js). Tokens only, from style.css §2.
   The shared pieces (the moon badge, the teaser, .horo-text) live at the end of style.css, since every page can show them. */

.horo-intro-grid{display:grid;gap:var(--s5);align-items:start}
@media (min-width:1024px){ .horo-intro-grid{grid-template-columns:7fr 5fr;gap:var(--s7)} }
.horo-h2{font-size:var(--t3);line-height:var(--lh3);font-weight:var(--w-heading)}

/* today's sky: the one soft glow on the page, inside the card */
.horo-moon{position:relative;isolation:isolate;display:grid;gap:var(--s4);border-top:var(--hairline)}
.horo-moon::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 15% 0%,var(--gold-line-soft),transparent 60%)}
.horo-moon-head,.horo-today-head{display:flex;gap:var(--s3);align-items:center}
.horo-moon-svg{width:64px;height:64px;flex:none}
.horo-today .horo-moon-svg{width:44px;height:44px}
.horo-phase{font:italic 400 var(--t3)/var(--lh3) var(--f-display);color:var(--cream)}
.horo-facts{display:grid;gap:var(--s1);padding-top:var(--s3);border-top:var(--soft)}
.horo-energy{display:grid;gap:var(--s2)}

/* the twelve, along the top: scrolls inside itself on a phone, wraps from tablet */
.horo-strip{display:flex;gap:var(--tap-gap);overflow-x:auto;padding-block:var(--s2) var(--s4);scrollbar-width:thin;max-width:100%}
@media (min-width:768px){ .horo-strip{flex-wrap:wrap;overflow:visible} }
.horo-strip a{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:0 var(--s3);border:var(--soft);border-radius:var(--r-full);
  color:var(--cream-2);text-decoration:none;white-space:nowrap;transition:border-color var(--dur-ui),color var(--dur-ui)}
.horo-strip a:hover,.horo-strip a.is-mine,.horo-strip a[aria-current="page"]{border-color:var(--gold-line);color:var(--cream)}
.horo-strip-glyph{color:var(--gold);font:400 18px/1 'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols2',var(--f-display)}

/* the grid of signs */
.horo-grid{display:grid;gap:var(--s3);padding-bottom:var(--section)}
@media (min-width:768px){ .horo-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .horo-grid{grid-template-columns:repeat(3,1fr)} }
.horo-card{display:grid;gap:var(--s3);align-content:start;scroll-margin-top:96px}
.horo-card.is-mine{border-color:var(--gold-line)}
.horo-card-head{display:flex;gap:var(--s3);align-items:center}
.horo-card-head .pill{margin-top:var(--s1)}
.horo-glyph-ring{width:56px;height:56px;flex:none;display:grid;place-items:center;border:var(--hairline);border-radius:var(--r-full);
  background:radial-gradient(circle,var(--gold-line-soft),transparent 70%)}
.horo-glyph{color:var(--gold);font:400 28px/1 'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols2',var(--f-display)}
.horo-glyph-lg{width:88px;height:88px}
.horo-glyph-lg .horo-glyph{font-size:44px}
.horo-name{font-size:var(--t3);line-height:var(--lh3)}
.horo-name a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.horo-name a:hover{text-decoration:underline;text-decoration-color:var(--gold-line);text-underline-offset:6px}
.horo-card-more{margin-top:auto}

/* the last seven days */
.horo-days{display:flex;flex-wrap:wrap;gap:var(--tap-gap)}
.horo-day{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 var(--s3);border:var(--soft);border-radius:var(--r-full);color:var(--cream-2);text-decoration:none}
.horo-day:hover,.horo-day[aria-current]{border-color:var(--gold-line);color:var(--cream)}

/* one sign */
.horo-sign-head{display:grid;gap:var(--s4);align-items:start}
@media (min-width:768px){ .horo-sign-head{grid-template-columns:auto minmax(0,1fr);gap:var(--s5)} }
.horo-keys{gap:var(--s2)}
.horo-sign-grid{display:grid;gap:var(--s6);padding-bottom:var(--section)}
@media (min-width:1024px){ .horo-sign-grid{grid-template-columns:7fr 5fr;gap:var(--s7)} }
.horo-today{display:grid;gap:var(--s4)}
.horo-house{padding-top:var(--s3);border-top:var(--soft)}
.horo-week{display:grid;gap:var(--s5)}
.horo-week li{display:grid;gap:var(--s2)}
.horo-week-day{font:400 var(--t-label)/var(--lh-label) var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.horo-cta-card{max-width:760px}
.horo-source{margin-top:var(--s4)}

/* a horoscope's text and its label (the same rules as moon.css, which loads later) */
.horo-text{display:grid;gap:var(--s2);padding-left:var(--s3);border-left:2px solid var(--line)}
.horo-text-ai{border-left-color:var(--teal-line)}
.horo-text-her{border-left-color:var(--gold)}
.horo-by{font:500 var(--t6)/var(--lh6) var(--f-body);color:var(--cream-3)}
.horo-by-ai{color:var(--teal)}
.horo-by-her{color:var(--gold)}
.horo-words{color:var(--cream-2);max-width:var(--measure)}
.horo-moon-svg .moon-dark{fill:var(--card-2);stroke:var(--gold-line);stroke-width:1}
.horo-moon-svg .moon-lit{fill:var(--cream)}