/**
 * MPAS "Sky for the month" panel — [mpas_sky_month].
 *
 * Dark, astro-themed styling that matches the site's dark sections (the
 * "What's on" band, the header): night-navy background with a faint starfield,
 * teal + gold accents from the theme palette (#152732 / #1a8292 / #1fc5df /
 * #f4a93b). Theme-agnostic .mpas-sky__* classes, loaded only where the shortcode
 * is used. Version tracks MPAS_SKY_VERSION.
 *
 * Layout forms: part="highlights" (a hook above the article), part="detail" (the
 * reference panels tiled below), part="all" (standalone, Highlights beside the
 * panels). Each is a self-contained dark block that fills the content width.
 */

/* Single-sky-article template: keep the whole page dark so no white shows
   between the dark <main> and the dark footer, and style the hero masthead
   (rendered by [mpas_sky_masthead] inside the Cover). */
body.post-template-single-sky-article {
	background-color: #152732;
}
.mpas-sky-kicker {
	margin: 0 0 .35rem;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #1fc5df;
}
.mpas-sky-herotitle {
	margin: 0;
	color: #fff;
	font-weight: 700;
	line-height: 1.1;
	font-size: clamp(34px, calc(24px + 2.4vw), 56px);
}

.mpas-sky {
	--sky-teal: #1fc5df;
	--sky-teal-d: #1a8292;
	--sky-gold: #f4a93b;
	--sky-ink: #e8eef2;
	--sky-muted: #9db1bd;
	--sky-line: rgba(255, 255, 255, .12);
	--sky-card: rgba(255, 255, 255, .045);
	--sky-lit: #f2eede;
	--sky-dark: #2b4155;

	width: 100%;
	margin: 1.75rem 0;
	padding: 1.6rem 1.6rem 1.35rem;
	box-sizing: border-box;
	border-radius: 14px;
	color: var(--sky-ink);
	font-size: 1rem;
	line-height: 1.5;

	background-color: #122029;
	background-image:
		radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, .55), transparent 60%),
		radial-gradient(1px 1px at 33% 44%, rgba(255, 255, 255, .40), transparent 60%),
		radial-gradient(1.5px 1.5px at 57% 20%, rgba(255, 255, 255, .50), transparent 60%),
		radial-gradient(1px 1px at 77% 54%, rgba(255, 255, 255, .35), transparent 60%),
		radial-gradient(1.5px 1.5px at 88% 26%, rgba(255, 255, 255, .45), transparent 60%),
		radial-gradient(1px 1px at 45% 74%, rgba(255, 255, 255, .30), transparent 60%),
		radial-gradient(1px 1px at 22% 84%, rgba(255, 255, 255, .30), transparent 60%),
		radial-gradient(1100px 480px at 82% -12%, rgba(31, 197, 223, .12), transparent 60%),
		linear-gradient(160deg, #163440 0%, #0c1c25 58%, #0a141b 100%);
}

.mpas-sky a {
	color: var(--sky-teal);
}

.mpas-sky__title {
	margin: 0 0 .15em;
	font-size: 1.7rem;
	line-height: 1.15;
	font-weight: 700;
	color: #fff;
}
.mpas-sky__title::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: .5rem;
	background: var(--sky-gold);
	border-radius: 2px;
}

.mpas-sky__meta {
	margin: .6rem 0 1.35rem;
	color: var(--sky-muted);
	font-size: .9rem;
}

.mpas-sky__detailhead {
	margin: 0 0 1.1rem;
	font-size: 1.4rem;
	color: #fff;
}
.mpas-sky__detailhead::after {
	content: "";
	display: block;
	width: 3rem;
	height: 3px;
	margin-top: .5rem;
	background: var(--sky-gold);
	border-radius: 2px;
}

/* --- Layout: two-column body (part="all"); tiled hook + detail (split). --- */

@media (min-width: 60rem) {
	.mpas-sky__body {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: 0 1.5rem;
		align-items: start;
	}
	.mpas-sky__main {
		position: sticky;
		top: 1rem;
	}
	.mpas-sky__side > .mpas-sky__section:last-child {
		margin-bottom: 0;
	}
	.mpas-sky__detailgrid {
		column-count: 2;
		column-gap: 1.5rem;
	}
	.mpas-sky__detailgrid > .mpas-sky__section {
		break-inside: avoid;
	}
}

@media (min-width: 45rem) {
	.mpas-sky--highlights .mpas-sky__eventlist {
		column-count: 2;
		column-gap: 2rem;
	}
	.mpas-sky--highlights .mpas-sky__event {
		break-inside: avoid;
	}
}

/* --- Sections (subtle cards on the starfield) --- */

.mpas-sky__section {
	margin: 0 0 1.25rem;
	padding: 1rem 1.1rem 1.1rem;
	background: var(--sky-card);
	border: 1px solid var(--sky-line);
	border-radius: 10px;
}
.mpas-sky__section > h3 {
	margin: 0 0 .75rem;
	font-size: 1.1rem;
	color: var(--sky-teal);
	border-bottom: 1px solid var(--sky-line);
	padding-bottom: .35rem;
}

/* --- Highlights --- */

.mpas-sky__events {
	border-color: rgba(244, 169, 59, .35);
}
.mpas-sky__events > h3 {
	color: var(--sky-gold);
	border-bottom-color: rgba(244, 169, 59, .3);
}
.mpas-sky__eventlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mpas-sky__event {
	display: flex;
	gap: .85rem;
	align-items: baseline;
	padding: .55rem 0;
	border-top: 1px solid var(--sky-line);
}
.mpas-sky__event:first-child {
	border-top: 0;
}
.mpas-sky__when {
	flex: 0 0 2.4rem;
	text-align: center;
	line-height: 1;
}
.mpas-sky__dnum {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--sky-gold);
}
.mpas-sky__dow {
	display: block;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--sky-muted);
}
.mpas-sky__what {
	color: var(--sky-ink);
}
.mpas-sky__etime {
	color: var(--sky-muted);
	white-space: nowrap;
}

/* --- Tables --- */

.mpas-sky__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.mpas-sky__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}
.mpas-sky__scroll .mpas-sky__table {
	min-width: 28rem;
}
.mpas-sky__table th,
.mpas-sky__table td {
	padding: .4rem .5rem;
	text-align: left;
	border-bottom: 1px solid var(--sky-line);
}
.mpas-sky__table thead th {
	color: var(--sky-muted);
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.mpas-sky__table tbody th {
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
}
.mpas-sky__table tbody tr:last-child th,
.mpas-sky__table tbody tr:last-child td {
	border-bottom: 0;
}
.mpas-sky__trend,
.mpas-sky__hint {
	margin: .6rem 0 0;
	color: var(--sky-muted);
	font-size: .88rem;
	font-style: italic;
}

/* --- Moon --- */

.mpas-sky__phases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: .7rem;
}
.mpas-sky__phase {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .25rem;
	padding: .7rem .4rem;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--sky-line);
	border-radius: 8px;
}
.mpas-sky__moonglyph {
	display: block;
	flex: 0 0 auto;      /* never let the flex column compress the disc */
	box-sizing: border-box;
	width: 2.1rem;
	height: 2.1rem;
	aspect-ratio: 1 / 1; /* guarantee a circle in any container */
	border-radius: 50%;
	/* Uniform outer ring (painted on the dark background, outside the disc, so it
	   reads the same over the dark and lit halves) + a soft glow. A real border
	   would tint the navy half light and the cream half dark — the seam artifact. */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 10px rgba(242, 238, 222, .14);
}
.mpas-sky__moonglyph--new {
	background: var(--sky-dark);
}
.mpas-sky__moonglyph--full {
	background: var(--sky-lit);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 0 16px rgba(242, 238, 222, .45);
}
/* Waxing (first quarter): lit on the left as seen from the southern sky. */
.mpas-sky__moonglyph--first {
	background: linear-gradient(to right, var(--sky-lit) 0 50%, var(--sky-dark) 50% 100%);
}
.mpas-sky__moonglyph--last {
	background: linear-gradient(to right, var(--sky-dark) 0 50%, var(--sky-lit) 50% 100%);
}
.mpas-sky__phasename {
	font-weight: 600;
	font-size: .88rem;
	color: #fff;
}
.mpas-sky__phasewhen {
	color: var(--sky-muted);
	font-size: .8rem;
}
.mpas-sky__super {
	display: inline-block;
	background: var(--sky-gold);
	color: #152732;
	font-size: .66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .05rem .35rem;
	border-radius: 4px;
	vertical-align: middle;
}
.mpas-sky__apsides {
	margin: .9rem 0 0;
	color: var(--sky-muted);
	font-size: .88rem;
}

/* --- Planets --- */

/* The 7-column planets table is the widest content; compact it (smaller type,
   tighter cells, smaller scroll floor) so it fits a half-width detail column
   without horizontal scroll on the desktop, while still scrolling on mobile. */
.mpas-sky__planets .mpas-sky__table { font-size: .8rem; }
.mpas-sky__planets .mpas-sky__table th,
.mpas-sky__planets .mpas-sky__table td { padding: .3rem .32rem; }
.mpas-sky__planets .mpas-sky__pill { font-size: .72rem; padding: .1rem .42rem; }
.mpas-sky__planets .mpas-sky__scroll .mpas-sky__table { min-width: 22rem; }

.mpas-sky__aided th,
.mpas-sky__aided td {
	color: var(--sky-muted);
}
.mpas-sky__pill {
	display: inline-block;
	padding: .12rem .55rem;
	border-radius: 999px;
	font-size: .76rem;
	font-weight: 600;
	white-space: nowrap;
}
.mpas-sky__pill--evening { background: var(--sky-teal-d); color: #fff; }
.mpas-sky__pill--morning { background: var(--sky-gold); color: #152732; }
.mpas-sky__pill--allnight { background: #2f9e60; color: #fff; }
.mpas-sky__pill--none {
	background: rgba(255, 255, 255, .09);
	color: var(--sky-muted);
}

/* --- Showers --- */

.mpas-sky__showers ul {
	margin: 0;
	padding-left: 1.1rem;
}
.mpas-sky__showers li {
	margin: 0 0 .5rem;
}
.mpas-sky__showers strong {
	color: #fff;
}

/* --- Selector + credit --- */

.mpas-sky__selector {
	margin: 0 0 1.25rem;
	font-size: .95rem;
	color: var(--sky-muted);
}
.mpas-sky__selector select,
.mpas-sky__selector button {
	font-size: .95rem;
	padding: .2rem .4rem;
}
.mpas-sky__credit {
	margin-top: 1.1rem;
	color: var(--sky-muted);
	font-size: .78rem;
	font-style: italic;
	text-align: right;
	opacity: .85;
}

/* --- Narrow screens --- */

@media (max-width: 40rem) {
	.mpas-sky {
		padding: 1.15rem 1.1rem 1rem;
		border-radius: 12px;
	}
	.mpas-sky__title { font-size: 1.35rem; }
	.mpas-sky__detailhead { font-size: 1.2rem; }
	.mpas-sky__table { font-size: .84rem; }
	.mpas-sky__table th,
	.mpas-sky__table td { padding: .32rem .35rem; }
}

@media (max-width: 34rem) {
	/* Sun & twilight (6 narrow columns) stays a table — just compact it so it
	   fits the phone without horizontal scroll. */
	.mpas-sky__sun .mpas-sky__scroll .mpas-sky__table { min-width: 0; font-size: .76rem; }
	.mpas-sky__sun .mpas-sky__table th,
	.mpas-sky__sun .mpas-sky__table td { padding: .28rem .28rem; }
	/* Drop the (derivable) Day-length column on phones so the six become five and
	   the astro-dark window still fits; the day-length trend note stays below. */
	.mpas-sky__sun .mpas-sky__table tr > :nth-child(4) { display: none; }

	/* Planets (7 columns) can't fit a phone as a table, so stack each planet into
	   a labelled card. NB the <table> itself must become a block too, or it keeps
	   a content-based width and overflows the screen. */
	.mpas-sky__planets .mpas-sky__scroll { overflow-x: visible; }
	.mpas-sky__planets .mpas-sky__table,
	.mpas-sky__planets .mpas-sky__table tbody,
	.mpas-sky__planets .mpas-sky__table tr,
	.mpas-sky__planets .mpas-sky__table th,
	.mpas-sky__planets .mpas-sky__table td { display: block; }
	/* Override the desktop compaction's min-width:22rem — must match its 3-class
	   specificity (.mpas-sky__planets .mpas-sky__scroll .mpas-sky__table) or the
	   table stays 352px wide and the cards overflow the phone. */
	.mpas-sky__planets .mpas-sky__scroll .mpas-sky__table { min-width: 0; }
	.mpas-sky__planets .mpas-sky__table { font-size: .92rem; }
	.mpas-sky__planets .mpas-sky__table thead { display: none; }
	.mpas-sky__planets .mpas-sky__table tr {
		border: 1px solid var(--sky-line);
		border-radius: 8px;
		padding: .55rem .8rem;
		margin-bottom: .55rem;
		background: rgba(255, 255, 255, .02);
	}
	.mpas-sky__planets .mpas-sky__table tbody th {
		border-bottom: 1px solid var(--sky-line);
		padding: 0 0 .35rem;
		margin-bottom: .4rem;
		font-size: 1.05rem;
	}
	.mpas-sky__planets .mpas-sky__table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		border: 0;
		padding: .22rem 0;
	}
	.mpas-sky__planets .mpas-sky__table td::before {
		content: attr(data-label);
		color: var(--sky-muted);
		font-weight: 600;
	}
}

/* --- Print: fall back to ink-on-paper --- */

@media print {
	.mpas-sky {
		background: #fff;
		color: #000;
		border: 1px solid #999;
	}
	.mpas-sky__title,
	.mpas-sky__detailhead,
	.mpas-sky__phasename,
	.mpas-sky__table tbody th,
	.mpas-sky__what,
	.mpas-sky__showers strong { color: #000; }
	.mpas-sky__dnum { color: #000; }
	.mpas-sky__section { background: #fff; border: 1px solid #bbb; break-inside: avoid; }
	.mpas-sky__selector { display: none; }
	.mpas-sky__pill {
		color: #000;
		border: 1px solid #666;
		background: #fff;
	}
}