/* sky-calendar.php: the public Sky Calendar. Colours are tokens, so the forest theme's light band (which turns --bone, --frost,
   --gold and --line dark on cream) restyles it without its own colours; the forest rules for the titles are in themes/forest.css. */
.sc-wrap { max-width: 980px; margin: 0 auto; padding: 48px 24px 80px; }

.sc-head { text-align: left; padding: 6px 0 28px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }   /* styles.css pads every <header> */
.sc-name { margin: 0 0 10px; font-family: var(--font-heading); font-size: calc(2rem * var(--text-scale)); line-height: 1.2; color: var(--gold); }
.sc-lead { margin: 0; max-width: 62ch; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.65; color: var(--frost); }

.sc-sec { max-width: none; margin: 0 0 48px; padding: 0; }   /* styles.css boxes every <section> */
.sc-title { margin: 0 0 18px; font-family: var(--font-heading); font-weight: 400; font-size: calc(1.125rem * var(--text-scale)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }
.sc-note { margin: 0 0 16px; max-width: 70ch; font-size: calc(0.84375rem * var(--text-scale)); line-height: 1.6; font-style: italic; color: var(--frost); }
.sc-empty { color: var(--frost); font-style: italic; }
.sc-credit { margin: 8px 0 0; font-size: calc(0.75rem * var(--text-scale)); color: var(--frost); }
.sc-credit a { color: var(--gold); }
.sc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the sky right now */
.sc-nowgrid { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: 14px; }
.sc-moonbox { flex: 0 0 auto; width: 170px; text-align: center; }
.sc-moon { display: block; width: 150px; height: 150px; margin: 0 auto 10px; }
.sc-phase { font-family: var(--font-heading); font-size: calc(1.0625rem * var(--text-scale)); color: var(--bone); }
.sc-lit { font-size: calc(0.75rem * var(--text-scale)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--frost); }
.sc-planets { flex: 1 1 320px; margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 32px; }
.sc-planets li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; break-inside: avoid; font-size: calc(0.875rem * var(--text-scale)); color: var(--frost); }
.sc-planets .g, .sc-sym, .sc-ruler .g { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Apple Symbols', 'Arial Unicode MS', serif; }
.sc-planets .g { flex: none; width: 24px; text-align: center; color: var(--gold); }
.sc-planets .n { flex: none; color: var(--bone); }
.sc-planets .v { margin-left: auto; white-space: nowrap; }

/* dated lists */
.sc-list { margin: 0; padding: 0; list-style: none; }
.sc-row { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.sc-row:last-child { border-bottom: 1px solid var(--line); }
.sc-sym { flex: none; width: 26px; text-align: center; font-size: calc(1.125rem * var(--text-scale)); color: var(--gold); }
.sc-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-what { font-family: var(--font-heading); font-size: calc(1rem * var(--text-scale)); color: var(--bone); }
.sc-detail { font-size: calc(0.84375rem * var(--text-scale)); line-height: 1.5; color: var(--frost); }
.sc-when { flex: none; max-width: 15em; text-align: right; font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); }
li.sc-empty { padding: 10px 0; }

/* place picker */
.sc-place { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.sc-or { font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); }
.sc-btn { padding: 9px 18px; cursor: pointer; background: transparent; border: 1px solid var(--gold); border-radius: var(--btn-radius); color: var(--gold);
  font-family: var(--font-heading); font-size: calc(0.75rem * var(--text-scale)); letter-spacing: 0.1em; text-transform: uppercase; }
.sc-btn:hover { background: rgba(var(--gold-rgb), 0.12); }
.sc-combo { position: relative; flex: 1 1 260px; max-width: 380px; }
.sc-input { width: 100%; box-sizing: border-box; padding: 10px 12px; 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)); }
.sc-input:focus { outline: none; border-color: var(--field-focus); box-shadow: 0 0 0 3px var(--field-focus-soft); }
.sc-places { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px 0; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--midnight-2); border: 1px solid var(--line); border-radius: var(--btn-radius); }
.sc-places[hidden] { display: none; }
.sc-places li { padding: 8px 12px; cursor: pointer; font-size: calc(0.875rem * var(--text-scale)); color: var(--bone); }
.sc-places li:hover, .sc-places li.is-active { background: rgba(var(--gold-rgb), 0.18); }
.sc-error { margin: 0 0 12px; font-size: calc(0.84375rem * var(--text-scale)); color: var(--error); }
.sc-error[hidden] { display: none; }

/* planetary hours */
.sc-sunline { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 6px 0 14px; font-size: calc(0.875rem * var(--text-scale)); color: var(--frost); }
.sc-sunline span:first-child { font-family: var(--font-heading); color: var(--bone); }
.sc-tablewrap { overflow-x: auto; }
.sc-hours { width: 100%; border-collapse: collapse; font-size: calc(0.875rem * var(--text-scale)); color: var(--frost); }
.sc-hours th { padding: 8px 10px; text-align: left; font-family: var(--font-heading); font-weight: 400; font-size: calc(0.6875rem * var(--text-scale)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); }
.sc-hours td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sc-hours td.sc-use { white-space: normal; }
.sc-hours .is-night td { opacity: 0.78; }
.sc-hours tr.is-now td { opacity: 1; background: rgba(var(--gold-rgb), 0.16); color: var(--bone); font-weight: 700; }
.sc-ruler { color: var(--bone); }
.sc-ruler .g { color: var(--gold); }

@media (max-width: 600px) {
  .sc-wrap { padding: 32px 16px 60px; }
  .sc-name { font-size: calc(1.5rem * var(--text-scale)); }
  .sc-nowgrid { flex-direction: column; align-items: center; gap: 22px; }
  .sc-planets { flex: 0 0 auto; width: 100%; max-width: 340px; columns: 1; }
  .sc-row { flex-wrap: wrap; gap: 4px 12px; }
  .sc-when { flex: 1 0 100%; max-width: none; text-align: left; padding-left: 40px; }
  .sc-hours .sc-use { display: none; }
  .sc-hours th:last-child { display: none; }
}