/**
 * The day card — the ONE stylesheet for the selected day's detail
 * (templates/day-panel.php + templates/day-modal-content.php), shared by the
 * astro-moon/month-view block (registered as a dependency of the block's
 * style, so it loads in <head>) and the [astro-moon-calendar] shortcode
 * (inlined into its <style> by AMC_Shortcode::print_style_once()). Never
 * duplicate these rules elsewhere — this file is the single source.
 *
 * Scoped under .amc-day-panel (the card itself) so it neither leaks out nor
 * gets overridden by a theme's generic p/dl/button rules. Where the card SITS
 * (beside the calendar from 1100px, below it under that) is the host's own
 * layout CSS — blocks/month-view/style.css / the shortcode's inline styles —
 * not this file. No font-family anywhere: the card inherits the theme's font.
 */

.amc-day-panel {
	--amc-card-text: #121218;
	--amc-card-label: #424242;
	--amc-card-muted: #747278;
	--amc-card-accent: #6750a4;
	--amc-card-accent-soft: #725cab;
	--amc-card-eclipse-bg: #f4f2fa;
	--amc-card-rule: #e5e7eb;
	box-sizing: border-box;
	background: #ffffff;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	color: var(--amc-card-text);
	/* Below 1100px a day click scrolls the card into view (assets/day-modal.js) — this keeps its
	   top edge clear of the WordPress admin bar (its own CSS variable, when shown) plus the theme's
	   fixed header (48px — override --amc-sticky-offset if the theme's differs) plus 16px air. */
	scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--amc-sticky-offset, 48px) + 16px);
}

.amc-day-panel *,
.amc-day-panel *::before,
.amc-day-panel *::after {
	box-sizing: border-box;
}

.amc-day-panel p,
.amc-day-panel dl,
.amc-day-panel dd,
.amc-day-panel ul,
.amc-day-panel li {
	margin: 0;
	padding: 0;
}

/* ---- Views: exactly one visible ---- */

.amc-day-panel .amc-day-view {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
}

.amc-day-panel .amc-day-view[hidden] {
	display: none !important;
}

.amc-day-panel .amc-day-view--main.amc-day-view--ends-with-link {
	padding-bottom: 12px;
}

.amc-day-panel .amc-day-view--sub {
	padding: 12px 20px 20px;
}

.amc-day-panel .amc-day-panel-empty {
	padding: 20px;
	font-size: 14px;
	line-height: 18px;
	color: var(--amc-card-muted);
	text-align: center;
}

/* ---- Buttons: wipe whatever the theme gives <button>, then style ---- */

.amc-day-panel button {
	appearance: none;
	-webkit-appearance: none;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	line-height: inherit;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
}

/* Keyboard focus: the control's (otherwise transparent) border turns accent — the same convention
   as the calendar's day cells and the controls bar. */
.amc-day-panel button:focus-visible {
	outline: none;
	border-color: var(--amc-card-accent);
}

.amc-day-panel .amc-day-card-link,
.amc-day-panel .amc-day-card-back {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	border-radius: 100px;
	color: var(--amc-card-accent);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.1px;
}

.amc-day-panel .amc-day-card-link > span,
.amc-day-panel .amc-day-card-back > span {
	padding: 0 4px;
}

.amc-day-panel .amc-day-card-link svg,
.amc-day-panel .amc-day-card-back svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.amc-day-panel .amc-day-card-link {
	height: 34px;
	gap: 4px;
}

.amc-day-panel .amc-day-card-back {
	gap: 8px;
	padding: 6px 11px 6px 0;
}

/* ---- Shared pieces ---- */

.amc-day-panel .amc-day-card-date {
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: var(--amc-card-muted);
}

.amc-day-panel .amc-day-card-divider {
	flex: none;
	width: 100%;
	height: 1px;
	background: var(--amc-card-rule);
}

.amc-day-panel .amc-day-card-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.amc-day-panel .amc-day-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.amc-day-panel .amc-day-card-row dt,
.amc-day-panel .amc-day-card-label {
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: var(--amc-card-label);
}

.amc-day-panel .amc-day-card-row dd {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--amc-card-text);
	text-align: right;
}

.amc-day-panel .amc-day-modal-asterisk {
	cursor: help;
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}

/* ---- Main view ---- */

.amc-day-panel .amc-day-card-phase {
	display: flex;
	align-items: center;
	gap: 12px;
}

.amc-day-panel .amc-day-card-phase > svg {
	flex: none;
	width: 48px;
	height: 48px;
}

.amc-day-panel .amc-day-card-phase-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.amc-day-panel .amc-day-card-phase-name {
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	color: var(--amc-card-text);
}

.amc-day-panel .amc-day-card-illumination {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	color: var(--amc-card-muted);
}

.amc-day-panel .amc-day-card-trend {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

.amc-day-panel .amc-day-card-eclipse {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	/* 14/12/14/16 including the 1px focus border. */
	padding: 13px 11px 13px 15px;
	border-radius: 10px;
	background: var(--amc-card-eclipse-bg);
}

.amc-day-panel .amc-day-card-eclipse > svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.amc-day-panel .amc-day-card-eclipse-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 0;
}

.amc-day-panel .amc-day-card-eclipse-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;
	color: var(--amc-card-accent);
}

.amc-day-panel .amc-day-card-eclipse-max {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: var(--amc-card-accent-soft);
}

/* Moon sign: one "label — sign" row, or old sign → "from HH:MM" → new sign. No colored chip. */
.amc-day-panel .amc-day-card-sign {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--amc-card-text);
	white-space: nowrap;
}

.amc-day-panel .amc-day-card-sign svg {
	flex: none;
	width: 16px;
	height: 16px;
}

.amc-day-panel .amc-day-card-transition {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.amc-day-panel .amc-day-card-transition-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.amc-day-panel .amc-day-card-transition-arrow {
	font-size: 14px;
	line-height: 14px;
	color: var(--amc-card-muted);
}

.amc-day-panel .amc-day-card-transition-time {
	font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	color: var(--amc-card-label);
	white-space: nowrap;
}

.amc-day-panel .amc-day-card-note {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: var(--amc-card-muted);
}

/* ---- Sub-views ---- */

.amc-day-panel .amc-day-card-heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.amc-day-panel .amc-day-card-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
	color: var(--amc-card-text);
}

.amc-day-panel .amc-day-card-aspects {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.amc-day-panel .amc-day-card-aspect {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.amc-day-panel .amc-day-card-aspect-name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: var(--amc-card-label);
}

/* Fixed slot even when an aspect has no icon, so the names stay aligned. */
.amc-day-panel .amc-day-card-aspect-icon {
	display: inline-flex;
	flex: none;
	width: 16px;
	height: 16px;
}

.amc-day-panel .amc-day-card-aspect-time {
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: var(--amc-card-text);
}