/* The whole-sky page. After demo.css and gallery.css; the family's variables and buttons. The map is always a night sky, in the light page and the dark one. */
.wsky .lead { margin-bottom: 10px; }
.ws-options { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 10px 0 6px; }
.ws-options .fam-seg button { min-height: 44px; padding: 0 12px; font-family: inherit; }
.ws-stage { display: grid; gap: 8px; }
.ws-box { position: relative; width: 100%; aspect-ratio: 2 / 1; border: 1px solid var(--rule); border-radius: var(--radius); background: #0b1020; overflow: hidden; touch-action: pan-y; cursor: default; user-select: none; -webkit-user-select: none; }
.ws-box:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ws-box[data-zoomed="true"] { cursor: grab; }
.ws-box[data-over="true"] { cursor: pointer; }
.ws-sky, .ws-faint, .ws-stars, .ws-labels { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ws-faint, .ws-stars { pointer-events: none; }
.ws-labels { pointer-events: none; font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.ws-sky a.c { outline: none; pointer-events: none; }
.ws-sky a.c .bd { transition: none; }
.ws-sky a.c.on .bd { stroke: #ffd86b; stroke-width: 2.2; stroke-opacity: 1; }
.ws-sky a.c:focus-visible .bd, .ws-sky a.c.on .bd { stroke: #ffd86b; stroke-width: 2.4; stroke-opacity: 1; }
.ws-sky path.fg.on { stroke: #ffd86b; stroke-width: 2; }
.ws-box[data-zoom="low"] .faint { display: none; }
.ws-labels text.on { fill: #ffe49a; font-weight: 700; }
.ws-box .under { top: 8px; left: 10px; font-size: .85rem; max-width: calc(100% - 20px); }
kazoku-view-controls { --kazoku-ink: var(--ink); --kazoku-surface: var(--surface); --kazoku-line: var(--rule); --kazoku-accent: var(--accent); }
.ws-card { min-height: 0; margin-top: 12px; display: grid; gap: 8px; }
.ws-card h2 { margin: 0; font-size: 1.1rem; }
.ws-card .fam-row { flex-wrap: wrap; gap: 8px; }
.ws-card .fam-button { text-decoration: none; }
.ws-print { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 6px; }
.ws-print .fam-seg button { min-height: 44px; font-family: inherit; }
.wsky .picker { margin-top: 12px; }