.ssc-sky {
	position: relative;
	margin: 24px 0;
	border: 1px solid #1e293b;
	border-radius: 14px;
	overflow: hidden;
	background: #04060f;
}
.ssc-sky__stage { position: relative; }

/* night navigator */
.ssc-sky__nav {
	display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap;
	padding: 10px 14px;
	background: #070b18; border-bottom: 1px solid #131c33;
}
.ssc-sky__step {
	background: #101b3c; border: 1px solid #26324a; border-radius: 8px;
	color: #cbd5e1; font-size: 20px; line-height: 1; cursor: pointer;
	min-width: 44px; min-height: 44px;
}
.ssc-sky__step:hover:not(:disabled) { border-color: #3b82f6; color: #fff; }
.ssc-sky__step:disabled { opacity: .35; cursor: default; }
.ssc-sky__step:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.ssc-sky__nav-dates {
	display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
	flex: 1 1 340px; min-width: 0;
}
.ssc-sky__nav-dates label { flex: 1 1 150px; min-width: 0; white-space: nowrap; }
.ssc-sky__nav-dates label { color: #94a3b8; font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; }
.ssc-sky__nav-dates input[type=date] {
	background: #0b1120; color: #e2e8f0; border: 1px solid #26324a;
	border-radius: 8px; padding: 8px 10px; font-size: 13px; min-height: 40px;
	color-scheme: dark;
	flex: 1 1 auto; width: 100%; min-width: 0; max-width: 175px;
}
/* playback group: play/pause + scrub bar */
.ssc-sky__tracker {
	display: flex; align-items: center; gap: 12px;
	flex: 1 1 260px; min-width: 200px;
}
.ssc-sky__motion {
	display: inline-flex; align-items: center; gap: 7px;
	background: linear-gradient(135deg, #0b3d91, #1652bd);
	border: 1px solid #3b82f6; border-radius: 8px;
	color: #ffffff; font-size: 13.5px; line-height: 1; font-weight: 650; cursor: pointer;
	min-height: 44px; padding: 0 16px; white-space: nowrap;
}
.ssc-sky__motion span { font-size: 11px; }
.ssc-sky__motion:hover:not(:disabled) { background: linear-gradient(135deg, #1652bd, #2a63d4); }
.ssc-sky__motion:disabled { opacity: .4; cursor: default; }
.ssc-sky__motion:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* playing = dark button with accent text; hover must stay dark or the accent
   text vanishes into the accent gradient */
.ssc-sky__motion--playing,
.ssc-sky__motion--playing:hover:not(:disabled) { background: #0d1526; border-color: #26324a; color: #3b82f6; }
.ssc-sky__motion--playing:hover:not(:disabled) { border-color: #3b82f6; color: #4c8dff; }

/* scrub bar: thin dark track, round thumb, 44px hit area via input height */
.ssc-sky__scrub {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 120px; min-width: 100px;
	accent-color: #3b82f6; /* on-theme even if custom track styles don't apply */
	height: 44px; margin: 0; padding: 0;
	background: transparent; cursor: pointer;
	touch-action: none;
}
.ssc-sky__scrub:disabled { opacity: .35; cursor: default; }
.ssc-sky__scrub:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 8px; }
.ssc-sky__scrub::-webkit-slider-runnable-track {
	height: 4px; border-radius: 2px; background: #26324a;
}
.ssc-sky__scrub::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
	background: #3b82f6; border: none;
	box-shadow: 0 0 6px rgba(59, 130, 246, .6);
}
.ssc-sky__scrub::-moz-range-track {
	height: 4px; border-radius: 2px; background: #26324a;
}
.ssc-sky__scrub::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 50%; border: none;
	background: #3b82f6;
	box-shadow: 0 0 6px rgba(59, 130, 246, .6);
}
.ssc-sky__nav-status { margin-left: auto; color: #3b82f6; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* loading spinner */
.ssc-sky__spinner {
	position: absolute; inset: 0; z-index: 5;
	display: flex; align-items: center; justify-content: center;
	background: rgba(4, 6, 15, .55); backdrop-filter: blur(2px);
}
.ssc-sky__spinner[hidden] { display: none; }
.ssc-sky__spinner span {
	width: 44px; height: 44px; border-radius: 50%;
	border: 3px solid rgba(59, 130, 246, .25); border-top-color: #3b82f6;
	animation: ssc-spin .8s linear infinite;
}
@keyframes ssc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.ssc-sky__spinner span { animation-duration: 1.6s; }
}
.ssc-sky__canvas { display: block; width: 100%; touch-action: manipulation; }
.ssc-sky__hint {
	position: absolute; top: 10px; left: 14px;
	color: #64748b; font-size: 12px; pointer-events: none;
}
.ssc-sky__tooltip {
	position: absolute; z-index: 3; pointer-events: none;
	background: rgba(11, 17, 32, .92); border: 1px solid #334155;
	color: #e2e8f0; font-size: 12px; padding: 4px 9px; border-radius: 6px;
	white-space: nowrap; transform: translateY(-100%);
}
.ssc-sky__loading { color: #64748b; font-style: italic; padding: 40px; text-align: center; }

/* Target chips: the accessible/keyboard twin of the canvas, and a legend. */
.ssc-sky__chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: 12px 14px 14px;
	border-top: 1px solid #131c33;
	background: #070b18;
}
.ssc-sky__chip {
	display: inline-flex; align-items: center; gap: 7px;
	background: #101b3c; color: #e2e8f0;
	border: 1px solid #1e293b; border-radius: 999px;
	font-size: 12.5px; padding: 6px 12px; cursor: pointer;
	min-height: 34px; /* comfortable touch target */
}
.ssc-sky__chip:hover { border-color: var(--chip, #3b82f6); }
.ssc-sky__chip:focus-visible,
.ssc-sky__close:focus-visible {
	outline: 2px solid #3b82f6; outline-offset: 2px;
}
.ssc-sky__chip-dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--chip, #a5b4fc);
	box-shadow: 0 0 6px var(--chip, #a5b4fc);
}
.ssc-sky__chip-alt { color: #64748b; font-size: 11px; }

/* Info panel: fits without inner scrolling in the common case; any overflow
   uses a thin dark scrollbar. Full-stage sheet on small screens. */
.ssc-sky__panel {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 4;
	width: min(400px, 100%);
	background: rgba(8, 12, 26, .98);
	border-left: 1px solid #26324a;
	padding: 16px 18px 18px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #26324a transparent;
	animation: ssc-slide-in .22s ease-out;
}
.ssc-sky__panel::-webkit-scrollbar { width: 6px; }
.ssc-sky__panel::-webkit-scrollbar-track { background: transparent; }
.ssc-sky__panel::-webkit-scrollbar-thumb { background: #26324a; border-radius: 3px; }
@keyframes ssc-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.ssc-sky__panel { animation: none; }
}

.ssc-sky__close {
	position: absolute; top: 8px; right: 10px;
	background: #101b3c; border: 1px solid #26324a; border-radius: 8px;
	color: #cbd5e1; font-size: 18px; line-height: 1;
	width: 34px; height: 34px; cursor: pointer;
}
.ssc-sky__close:hover { color: #fff; border-color: #3b82f6; }

.ssc-sky__head { padding-right: 40px; margin-bottom: 8px; }
.ssc-sky__panel h3 { margin: 0 0 2px; color: #fff; font-size: 18px; }
.ssc-sky__sub { color: #3b82f6; font-size: 12px; margin: 0; text-transform: capitalize; }

.ssc-sky__figure { margin: 0 0 10px; }
.ssc-sky__figure img {
	width: 100%; max-height: 170px; object-fit: cover;
	border-radius: 8px; display: block;
}
.ssc-sky__figure figcaption { color: #64748b; font-size: 10px; margin-top: 4px; line-height: 1.4; }

.ssc-sky__facts {
	display: flex; flex-wrap: wrap; gap: 6px 14px;
	margin: 0 0 10px; padding: 8px 10px;
	background: #0d1526; border-radius: 8px;
}
.ssc-sky__facts div { display: flex; flex-direction: column; }
.ssc-sky__facts dt { color: #64748b; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.ssc-sky__facts dd { margin: 0; color: #e2e8f0; font-size: 13px; }

.ssc-sky__panel p { font-size: 13px; line-height: 1.5; color: #cbd5e1; margin: 0 0 8px; }
.ssc-sky__fact { background: #101b3c; border-radius: 8px; padding: 8px 11px; color: #fde68a !important; }
.ssc-sky__scope { color: #86efac !important; }

@media (max-width: 640px) {
	/* Deliberate mobile layout:
	   row 1: ‹ [Night of ____] ›
	   row 2: [through ________]
	   row 3: [▶ Play] ———●———
	   row 4: date readout                     */
	.ssc-sky__nav-dates {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		grid-template-areas:
			"prev night next"
			"through through through";
		align-items: center;
		flex-basis: 100%;
	}
	.ssc-sky__step--prev { grid-area: prev; }
	.ssc-sky__step--next { grid-area: next; }
	.ssc-sky__nav-dates > label:first-of-type { grid-area: night; }
	.ssc-sky__nav-through { grid-area: through; }
	.ssc-sky__nav-dates label { display: flex; white-space: nowrap; }
	.ssc-sky__nav-dates input[type=date] { max-width: none; flex: 1; }
	.ssc-sky__tracker {
		flex-basis: 100%; /* wrap to its own row in the nav */
	}
	.ssc-sky__scrub { max-width: none; }
	.ssc-sky__nav-status { flex-basis: 100%; margin-left: 0; text-align: right; }
	.ssc-sky__panel {
		width: 100%;
		border-left: 0;
	}
	.ssc-sky__figure img { max-height: 140px; }
	.ssc-sky__hint { display: none; }
}