/* THE SKY MASTHEAD's layout and its place box (sky/sky.js). Every rule is global, because the
   place box is built by a script and a scoped rule can never reach a node a script creates. The
   text colours come from tokens.css, which restates the family's inks under [data-skyfield]. */

[data-sky-mast] { position: relative; isolation: isolate; overflow: clip; background: linear-gradient(#9dbfee, #e3edf8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-sky-mast] { background: linear-gradient(#05071a, #0d1130); } }
:root[data-theme="dark"] [data-sky-mast] { background: linear-gradient(#05071a, #0d1130); }
.sky-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }

/* A soft halo behind words drawn over stars, the sun or the moon. */
[data-skyfield] :where(h1, h2, h3, p, li, a, dt, dd, blockquote, figcaption, cite, small, span) { text-shadow: var(--sky-halo, none); }

[data-sky-receipt] {
  max-width: 60ch; font-family: var(--fi-font-mono); font-size: var(--fi-text-xs); color: var(--fi-ink-muted);
}

.sky-place { margin-top: var(--fi-space-2); max-width: 60ch; font-family: var(--fi-font-mono); font-size: var(--fi-text-xs); color: var(--fi-ink-muted); }
.sky-link {
  font: inherit; color: var(--fi-accent); background: none; border: 0; padding: 0.25rem 0; min-height: 24px;
  text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; text-shadow: inherit;
}
.sky-form:not([hidden]) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fi-space-2) var(--fi-space-3); margin-top: var(--fi-space-2); }
.sky-form label { flex-basis: 100%; }
.sky-combo { position: relative; flex: 1 1 14rem; min-width: min(18rem, 100%); }
.sky-combo input {
  box-sizing: border-box; width: 100%;
  font: inherit; font-size: var(--fi-text-sm); color: var(--fi-text);
  background: color-mix(in srgb, var(--fi-bg) 70%, transparent); border: 1px solid var(--fi-line); border-radius: 6px;
  padding: 0.5rem 0.65rem;
}
.sky-combo input::placeholder { color: var(--fi-ink-muted); }
.sky-options {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; max-height: 17rem; overflow: auto;
  background: var(--fi-bg); border: 1px solid var(--fi-line); border-radius: 6px; padding: 0.25rem 0;
}
.sky-options[hidden] { display: none; }
.sky-option { padding: 0.45rem 0.65rem; cursor: pointer; font-size: var(--fi-text-sm); color: var(--fi-text); text-shadow: none; }
.sky-option:hover, .sky-option[aria-selected="true"] { background: var(--fi-bg-sunk); text-decoration: underline; }
.sky-go {
  font: inherit; font-size: var(--fi-text-sm); color: var(--fi-text); cursor: pointer;
  background: color-mix(in srgb, var(--fi-bg) 70%, transparent); border: 1px solid currentColor; border-radius: 6px; padding: 0.5rem 0.9rem;
}
.sky-quick { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 var(--fi-space-4); margin: 0; }
.sky-msg { flex-basis: 100%; margin: 0; }
.sky-msg:empty { display: none; }
.sky-credit { flex-basis: 100%; color: var(--fi-ink-muted); }
.sky-credit a { color: inherit; }

/* A band of sky around a page's opening, where the page had no masthead of its own (the Hearth, the
   Work Party), and the caption's place in any masthead. The last thing in a sky masthead keeps clear
   of the strip of ground drawn along its foot. */
.sky-band { padding-bottom: var(--fi-space-3); }
.sky-band__head { padding-bottom: var(--fi-space-2); }
.sky-note { margin: var(--fi-space-5) 0 0; }
[data-sky-mast] .sky-place { margin-bottom: 2.25rem; }