/* forecasts.php: the Week, Month and Year Ahead horoscope. Buttons and section titles are the Sky Calendar's (sc- in
   sky-calendar.css); this file adds the period picker and the horoscope's own parts. Colours are tokens, so the forest light
   band restyles it; the forest titles are in themes/forest.css. */
.fc-gate { max-width: 560px; margin: 8px 0 40px; }
.fc-gate p { margin: 0 0 18px; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.65; color: var(--frost); }
a.sc-btn { display: inline-block; text-decoration: none; }

/* picking the period */
.fc-controls { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 0 0 10px; }
.fc-group { display: flex; }
.fc-tab, .fc-which { padding: 9px 20px; cursor: pointer; background: transparent; border: 1px solid var(--gold); color: var(--gold);
  font-family: var(--font-heading); font-size: calc(0.75rem * var(--text-scale)); letter-spacing: 0.1em; text-transform: uppercase; }
.fc-group > :first-child { border-radius: var(--btn-radius) 0 0 var(--btn-radius); }
.fc-group > :last-child { border-radius: 0 var(--btn-radius) var(--btn-radius) 0; }
.fc-group > :not(:first-child) { border-left-width: 0; }
.fc-tab:hover, .fc-which:hover { background: rgba(var(--gold-rgb), 0.12); }
.fc-tab[aria-pressed="true"], .fc-which[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); }
.fc-when { margin: 0 0 26px; font-size: calc(0.875rem * var(--text-scale)); letter-spacing: 0.06em; color: var(--frost); }

/* the horoscope */
.fc-view { min-height: 160px; }
.fc-offer { padding: 18px 0; }
.fc-offer p { margin: 0 0 16px; font-size: calc(0.96875rem * var(--text-scale)); color: var(--frost); }
.fc-note { max-width: 60ch; margin: 18px 0; font-style: italic; line-height: 1.6; color: var(--frost); }
.fc-title { margin: 0 0 12px; font-family: var(--font-heading); font-weight: 400; font-size: calc(1.625rem * var(--text-scale)); line-height: 1.25; color: var(--gold); }
.fc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.fc-chips li { padding: 5px 14px; border: 1px solid rgba(var(--gold-rgb), 0.4); border-radius: 999px; font-size: calc(0.8125rem * var(--text-scale)); color: var(--bone); }
.fc-h { margin: 28px 0 12px; font-family: var(--font-heading); font-weight: 400; font-size: calc(0.875rem * var(--text-scale)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.fc-p { margin: 0 0 12px; max-width: 70ch; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.7; color: var(--bone); }
.fc-item { margin: 0 0 14px; }
.fc-item h4 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 400; font-size: calc(0.90625rem * var(--text-scale)); color: var(--bone); }
.fc-item h4 small { margin-left: 8px; font-family: var(--font-body); font-style: italic; font-size: calc(0.75rem * var(--text-scale)); color: var(--frost); }
.fc-item .fc-p { margin: 0; }
.fc-bul { margin: 0 0 8px; padding-left: 20px; max-width: 70ch; }
.fc-bul li { margin: 0 0 10px; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.7; color: var(--bone); }
.fc-closing { margin: 24px 0 18px; max-width: 70ch; font-style: italic; font-size: calc(1rem * var(--text-scale)); line-height: 1.7; color: var(--gold); }

.fc-thinking { padding: 30px 0; color: var(--frost); }
.fc-thinking p { margin: 6px 0; font-size: calc(0.9375rem * var(--text-scale)); }
.fc-thinking small { font-size: calc(0.78125rem * var(--text-scale)); opacity: 0.7; }
.fc-runes { margin-bottom: 8px; font-size: calc(1.875rem * var(--text-scale)); letter-spacing: 0.3em; color: var(--gold); font-family: var(--font-rune), 'Segoe UI Symbol', 'Noto Sans Runic', serif; }
.fc-runes span { opacity: 0.18; animation: fc-rune 2.2s ease-in-out infinite; }
.fc-runes span:nth-child(2) { animation-delay: .3s; }
.fc-runes span:nth-child(3) { animation-delay: .6s; }
.fc-runes span:nth-child(4) { animation-delay: .9s; }
.fc-runes span:nth-child(5) { animation-delay: 1.2s; }
@keyframes fc-rune { 0%, 100% { opacity: 0.18; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fc-runes span { animation: none; opacity: 0.7; } }

@media (max-width: 600px) {
  .fc-title { font-size: calc(1.3125rem * var(--text-scale)); }
  .fc-tab, .fc-which { padding: 9px 14px; }
}

/* the birth details form (members without a chart saved on My Account) */
.fc-form { margin: 4px 0 40px; }
.fc-form[hidden], #fcMain[hidden], .fc-places[hidden], .fc-choice[hidden], .fc-error[hidden], .fc-tz[hidden], .fc-link[hidden] { display: none; }
.fc-form-lead { margin: 0 0 18px; max-width: 70ch; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.65; color: var(--frost); }
.fc-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.fc-label { display: block; margin: 0 0 6px; font-family: var(--font-heading); font-size: calc(0.6875rem * var(--text-scale)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.fc-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.9375rem * var(--text-scale)); }
.fc-input:focus { border-color: var(--field-focus); }
.fc-input:disabled { opacity: 0.45; }
.fc-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); cursor: pointer; }
.fc-combo { position: relative; }
.fc-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(--menu-bg, var(--midnight-2)); border: var(--field-border); border-radius: var(--field-radius); box-shadow: var(--popup-shadow); }
.fc-places li { padding: 9px 14px; cursor: pointer; font-size: calc(0.875rem * var(--text-scale)); color: var(--field-text); }
.fc-places li:hover, .fc-places li.on { background: rgba(var(--gold-rgb), 0.14); }
.fc-tzline { margin: 16px 0 0; font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); }
.fc-tz { max-width: 420px; margin-top: 8px; }
.fc-link { margin-left: 8px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--gold); text-decoration: underline; font: inherit; }
.fc-choice { margin-top: 14px; max-width: 520px; padding: 12px 14px; border: 1px solid rgba(var(--gold-rgb), 0.3); border-radius: var(--card-radius-sm); }
.fc-choice p { margin: 0 0 10px; font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); }
.fc-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), 0.4); border-radius: var(--btn-radius-sm); color: var(--bone); font: inherit; }
.fc-pick:hover { background: rgba(var(--gold-rgb), 0.1); }
.fc-error { margin: 14px 0 0; font-size: calc(0.8125rem * var(--text-scale)); color: var(--red-soft, var(--rune-red)); }
.fc-form .sc-btn { margin-top: 20px; }
.fc-form .sc-btn:disabled { opacity: 0.5; cursor: default; }
.fc-who { margin: 0 0 18px; font-size: calc(0.875rem * var(--text-scale)); color: var(--frost); }
@media (max-width: 760px) { .fc-fields { grid-template-columns: 1fr; } }