/* horoscope.css: the Daily Horoscope page (daily-horoscope.php). Prefix hs-.
   The panel, title, buttons and reading text (.v-ai-*) come from reading.css and styles.css. */

/* ---------- page layout: wheel | panel ---------- */
.hs-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,420px); gap:24px;
  max-width:1500px; margin:0 auto; height:calc(100vh - var(--hs-top, 90px) - 18px); min-height:480px; }
.hs-stage{ position:relative; display:flex; flex-direction:column; align-items:center; min-height:0; min-width:0;
  margin:0; max-width:none; padding:0; }
.hs-wheel{ flex:1; min-height:0; width:100%; height:100%; display:block; overflow:visible; }

/* ---------- page background: the moon and the tree (assets/horoscope-bg.webp), in every theme ----------
   Three classes on <html> outrank the forest theme's own reading-page background. A dim layer keeps the wheel readable. */
html.pg-horoscope.pg-reading[data-theme],
html.pg-horoscope.pg-reading{
  background:linear-gradient(rgba(var(--midnight-rgb),.3), rgba(var(--midnight-rgb),.3)),
             url('/assets/horoscope-bg.webp?v=3') center bottom / cover no-repeat fixed var(--midnight);
}
body.pg-horoscope{ background:none; animation:none; }
.pg-horoscope #stars{ display:none; }

/* ---------- the wheel ---------- */
.hs-ring{ fill:none; stroke:var(--gold-light); stroke-opacity:.9; stroke-width:1.5px; }
.hs-ring, .hs-spoke, .hs-tick{ vector-effect:non-scaling-stroke; }   /* the same crisp pixel width at any wheel size */
.hs-wheel{ shape-rendering:geometricPrecision; text-rendering:geometricPrecision; }
.hs-spoke{ stroke:var(--gold); stroke-opacity:.35; stroke-width:1px; }
.hs-sign{ font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','DejaVu Sans','Apple Symbols',serif;
  font-size:28px; fill:var(--gold-light); fill-opacity:.85; }
.hs-roman{ font-family:var(--font-heading); font-size:11px; fill:var(--gold); fill-opacity:.5; }
.hs-planet{ font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','DejaVu Sans','Apple Symbols',serif; font-size:26px; }
.hs-sky{ fill:var(--zw-planet); }
.hs-natal{ fill:var(--frost); fill-opacity:.9; font-size:22px; }
.hs-rx{ font-family:'Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',serif; font-size:11px; fill:var(--zw-retro); }
.hs-tick{ stroke-width:1.4; stroke-linecap:round; }
.hs-tick.hs-sky{ stroke:var(--zw-planet); stroke-opacity:.8; }
.hs-tick.hs-lead{ stroke:var(--gold); stroke-opacity:.25; stroke-width:1; }
.hs-centre{ font-family:var(--font-heading); font-size:17px; letter-spacing:.2em; text-transform:uppercase; fill:var(--gold); fill-opacity:.8; }
.hs-centre-sub{ font-size:10px; letter-spacing:.16em; fill:var(--frost); fill-opacity:.7; }

/* hover information: wedges over each sign and house, a ring round each planet, and the tip itself */
.hs-ring, .hs-spoke, .hs-tick, .hs-sign, .hs-roman, .hs-rx, .hs-centre{ pointer-events:none; }
.hs-hit{ fill:transparent; stroke:none; cursor:help; transition:fill .15s; }
.hs-hit:hover, .hs-hit.hs-lit{ fill:rgba(var(--gold-rgb),.14); }
.hs-body{ cursor:help; outline:none; }
.hs-hitc{ fill:transparent; stroke:none; }
.hs-body:hover .hs-hitc, .hs-body:focus-visible .hs-hitc{ fill:rgba(var(--gold-rgb),.16); stroke:var(--gold-light); stroke-width:1.2px; vector-effect:non-scaling-stroke; }
.hs-tip{ position:absolute; z-index:6; max-width:min(280px, 92%); pointer-events:none; padding:11px 14px 12px;
  background:rgba(var(--midnight-rgb),.95); border:1px solid rgba(var(--gold-rgb),.5); border-radius:var(--card-radius-sm);
  box-shadow:0 8px 28px rgba(var(--midnight-rgb),.7); color:var(--bone); font-family:var(--font-body);
  font-size:calc(0.84375rem * var(--text-scale)); line-height:1.5; }
.hs-tip[hidden]{ display:none; }
.hs-tip b{ display:block; font-family:var(--font-heading); font-weight:600; letter-spacing:.06em; color:var(--gold-light); font-size:calc(0.9375rem * var(--text-scale)); }
.hs-tip-sub{ display:block; font-size:calc(0.71875rem * var(--text-scale)); letter-spacing:.06em; text-transform:uppercase; color:var(--frost); opacity:.8; margin:1px 0 6px; }
.hs-tip p{ margin:5px 0 0; }
.hs-tip .hs-tip-now{ color:var(--frost); }
.hs-tip .hs-tip-you{ color:var(--gold-light); }
.hs-hint-more{ font-family:var(--font-body); color:var(--frost); opacity:.5; font-size:calc(0.75rem * var(--text-scale)); text-align:center; margin-top:2px; }.hs-hint{ font-family:var(--font-body); color:var(--frost); opacity:.7; font-size:calc(0.84375rem * var(--text-scale)); text-align:center; min-height:20px; margin-top:6px; }

/* ---------- the panel: blue glass to go with the planet picture (tokens --hs-* in styles.css) ----------
   Set on the panel itself, so every theme's panel rules pick the blue up through the same variables. */
.hs-page .hs-panel{
  --panel-bg:linear-gradient(160deg, rgba(var(--hs-panel-1-rgb),.86), rgba(var(--hs-panel-2-rgb),.9));
  --panel-border:1px solid rgba(var(--hs-edge-rgb),.38);
  --fh-ornament:var(--hs-edge);
  backdrop-filter:blur(8px);
}
.hs-page .hs-panel .hs-panel-head{
  background:linear-gradient(rgba(var(--hs-panel-2-rgb),.45), rgba(var(--hs-panel-2-rgb),.45)), url('/assets/horoscope-head.webp?v=1') center / cover no-repeat, linear-gradient(155deg, var(--hs-head-1), var(--hs-head-2));
  border-bottom:1px solid rgba(var(--hs-edge-rgb),.35);
}
.hs-page .hs-panel .hs-title, .hs-page .hs-panel .hs-sub{ text-shadow:0 1px 6px rgba(var(--hs-panel-2-rgb),.9); }
.hs-page .hs-panel .hs-input, .hs-page .hs-panel .hs-places{ border-color:rgba(var(--hs-edge-rgb),.3); }
.hs-page .hs-panel .hs-input:focus{ border-color:var(--hs-edge); }

/* scrollbars inside the panel: icy blue on a dark blue track (Chrome, Edge, Safari; Firefox below) */
.hs-page .hs-panel :is(.hs-view, .hs-form, .hs-places)::-webkit-scrollbar-track{ background:rgba(var(--hs-panel-2-rgb),.6); }
.hs-page .hs-panel :is(.hs-view, .hs-form, .hs-places)::-webkit-scrollbar-thumb{ background:rgba(var(--hs-edge-rgb),.5); background-clip:content-box; }
.hs-page .hs-panel :is(.hs-view, .hs-form, .hs-places)::-webkit-scrollbar-thumb:hover{ background:rgba(var(--hs-edge-rgb),.85); background-clip:content-box; }
@supports not selector(::-webkit-scrollbar){
  .hs-page .hs-panel :is(.hs-view, .hs-form, .hs-places){ scrollbar-width:thin; scrollbar-color:rgba(var(--hs-edge-rgb),.55) rgba(var(--hs-panel-2-rgb),.6); }
}

/* ---------- the panel ---------- */
.hs-gate p{ font-size:calc(0.90625rem * var(--text-scale)); line-height:1.7; color:var(--frost); margin:22px 0 18px; }
.hs-gate .hs-link{ margin:12px auto 0; display:block; }
.hs-gate a.draw-btn{ display:block; box-sizing:border-box; text-align:center; text-decoration:none; }
.hs-form{ flex:1; min-height:0; overflow-y:auto; padding:18px 8px 0 0; margin-right:-8px; }
.hs-label{ display:block; font-family:var(--font-heading); font-size:calc(0.65625rem * var(--text-scale)); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin:16px 0 6px; }
.hs-label:first-of-type{ margin-top:0; }
.hs-input{ width:100%; box-sizing:border-box; padding:11px 14px; background:var(--field-bg); border:var(--field-border);
  border-radius:var(--field-radius); color:var(--field-text); font-family:var(--font-body); font-size:calc(0.875rem * var(--text-scale)); outline:none; }
.hs-input:focus{ border-color:var(--field-focus-soft); }
.hs-input:disabled{ opacity:.4; }
select.hs-input option{ background:var(--midnight-2); color:var(--bone); }
.hs-check{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:calc(0.8125rem * var(--text-scale)); color:var(--frost); opacity:.85; cursor:pointer; }
.hs-tzline{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:14px 0 0; font-size:calc(0.8125rem * var(--text-scale)); line-height:1.5; color:var(--frost); }
.hs-tzline .hs-link{ flex:none; }
.hs-form > select.hs-input{ margin-top:8px; }
.hs-form > select.hs-input[hidden], .hs-tzline .hs-link[hidden]{ display:none; }
.hs-tip, .hs-saved{ font-size:calc(0.78125rem * var(--text-scale)); line-height:1.55; color:var(--frost); opacity:.65; margin:6px 0 0; }
.hs-saved{ margin:0 0 14px; font-style:italic; color:var(--gold); opacity:.85; }
.hs-error{ font-size:calc(0.8125rem * var(--text-scale)); line-height:1.5; color:var(--red-soft); margin:14px 0 0; }
.hs-error[hidden], .hs-choice[hidden], .hs-places[hidden], .hs-saved[hidden]{ display:none; }
.hs-form .draw-btn{ margin-top:20px; }
.hs-wide{ width:100%; }
.hs-combo{ position:relative; }
.hs-places{ position:absolute; z-index:20; left:0; right:0; top:100%; margin:2px 0 0; padding:4px 0; list-style:none; max-height:240px; overflow-y:auto;
  background:var(--midnight-2); border:var(--field-border); border-radius:var(--field-radius); box-shadow:var(--popup-shadow); }
.hs-places li{ padding:9px 14px; cursor:pointer; font-size:calc(0.875rem * var(--text-scale)); color:var(--bone); }
.hs-places li:hover, .hs-places li.on{ background:rgba(var(--gold-rgb),.14); }
.hs-choice{ margin-top:14px; padding:12px 14px; border:1px solid rgba(var(--gold-rgb),.3); border-radius:var(--card-radius-sm); }
.hs-choice p{ font-size:calc(0.8125rem * var(--text-scale)); line-height:1.55; color:var(--frost); margin:0 0 10px; }
.hs-pick{ display:block; width:100%; margin-top:6px; padding:9px 12px; cursor:pointer; text-align:left; background:none;
  border:1px solid rgba(var(--gold-rgb),.35); border-radius:var(--btn-radius); color:var(--gold);
  font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.08em; }
.hs-pick:hover{ background:rgba(var(--gold-rgb),.1); }

/* ---------- the horoscope ---------- */
.hs-view{ flex:1; min-height:0; overflow-y:auto; padding:18px 8px 0 0; margin-right:-8px; }
.hs-day{ font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.hs-headline{ font-family:var(--font-heading); font-weight:400; font-size:calc(1.375rem * var(--text-scale)); line-height:1.3; color:var(--bone); margin:6px 0 10px; }
.hs-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.hs-chips span{ padding:3px 10px; border:1px solid rgba(var(--gold-rgb),.35); border-radius:999px;
  font-size:calc(0.75rem * var(--text-scale)); color:var(--frost); }
.hs-listen{ display:flex; gap:8px; margin:0 0 14px; }
.hs-listen[hidden]{ display:none; }
.hs-listen-btn{ background:none; border:1px solid rgba(var(--gold-rgb),.35); border-radius:var(--btn-radius); padding:7px 14px; cursor:pointer;
  font-family:var(--font-heading); font-size:calc(0.6875rem * var(--text-scale)); letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.hs-listen-btn:hover{ background:rgba(var(--gold-rgb),.1); }
.hs-listen-btn[hidden]{ display:none; }
.hs-note{ font-style:italic; color:var(--gold); opacity:.85; font-size:calc(0.8125rem * var(--text-scale)); }
.hs-item{ margin:0 0 14px; }
.hs-item h4{ font-family:var(--font-heading); font-weight:400; font-size:calc(0.84375rem * var(--text-scale)); color:var(--bone); margin:0 0 4px; }
.hs-item h4 small{ font-family:var(--font-body); font-style:italic; font-size:calc(0.75rem * var(--text-scale)); color:var(--frost); opacity:.65; margin-left:4px; }
.hs-item p{ margin:0; }
.hs-failed p{ font-style:italic; color:var(--frost); line-height:1.6; margin:22px 0; }
.hs-foot{ display:flex; justify-content:space-between; margin-top:10px; }
.hs-link{ background:none; border:0; padding:4px 0; cursor:pointer; font-family:var(--font-body); font-size:calc(0.78125rem * var(--text-scale)); color:var(--frost); opacity:.6; }
.hs-link:hover{ opacity:1; color:var(--gold); }
.v-thinking-runes span{ opacity:.18; animation:hs-rune 2.2s ease-in-out infinite; }
@keyframes hs-rune{ 0%,100%{ opacity:.18; } 50%{ opacity:1; } }
.v-thinking small{ font-size:calc(0.78125rem * var(--text-scale)); color:var(--frost); opacity:.6; }

/* ---------- narrower screens: wheel above panel ---------- */
@media (max-width:1000px){
  .hs-layout{ display:block; height:auto; min-height:0; }
  .hs-wheel{ flex:none; height:auto; aspect-ratio:1 / 1; max-height:78vh; }
  .hs-form, .hs-view{ overflow:visible; margin-right:0; padding-right:0; }
}
@media (prefers-reduced-motion: reduce){
  .v-thinking-runes span{ animation:none; opacity:.7; }
}