/* Zon & Maan */
.zon-maan { display: block; max-width: 100%; margin: 1.5em 0; }
.zon-maan *, .zon-maan *::before, .zon-maan *::after { box-sizing: border-box; }

.zm {
	--zm-bg: #ffffff;
	--zm-fg: #1a2233;
	--zm-muted: #5a6479;
	--zm-line: #e3e7ee;
	--zm-soft: #f4f6fa;
	--zm-accent: #2563eb;
	--zm-sun: #d97706;
	--zm-moon: #5b6fb5;
	--zm-canvas: #eef1f7;
	padding: 16px;
	background: var(--zm-canvas);
	border-radius: 18px;
	color: var(--zm-fg);
	font-size: 15px;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}
.zm--dark {
	--zm-bg: #131a2b; --zm-fg: #e8ecf5; --zm-muted: #9aa5bd; --zm-line: #2a3450; --zm-soft: #1b2440;
	--zm-accent: #7aa2ff; --zm-sun: #fbbf24; --zm-moon: #a5b4fc; --zm-canvas: #0b111f;
}
@media (prefers-color-scheme: dark) {
	.zm--auto {
		--zm-bg: #131a2b; --zm-fg: #e8ecf5; --zm-muted: #9aa5bd; --zm-line: #2a3450; --zm-soft: #1b2440;
		--zm-accent: #7aa2ff; --zm-sun: #fbbf24; --zm-moon: #a5b4fc; --zm-canvas: #0b111f;
	}
}

.zm-head { margin-bottom: 12px; }
.zm .zm-place { margin: 0; padding: 0; font-size: 1.5em; line-height: 1.2; font-weight: 700; color: var(--zm-fg); }
.zm .zm-sub { margin: 4px 0 0; color: var(--zm-muted); font-size: .9em; }

/* bediening */
.zm-controls { display: grid; gap: 10px; margin-bottom: 16px; padding: 12px; background: var(--zm-soft); border: 1px solid var(--zm-line); border-radius: 14px; }
.zm-datenav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zm-btn, .zm-date {
	font: inherit; font-size: .92em; color: var(--zm-fg); background: var(--zm-bg);
	border: 1px solid var(--zm-line); border-radius: 9px; padding: 6px 12px; line-height: 1.3; margin: 0;
	min-height: 36px; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.zm-btn { cursor: pointer; }
.zm-btn:hover { border-color: var(--zm-accent); }
.zm-btn:focus-visible, .zm-date:focus-visible, .zm-time:focus-visible { outline: 2px solid var(--zm-accent); outline-offset: 2px; }
.zm-btn.is-active { background: var(--zm-accent); border-color: var(--zm-accent); color: #fff; }
.zm-prev, .zm-next { min-width: 36px; padding: 6px 10px; font-size: 1.1em; }
.zm-geo { margin-left: auto; }
.zm-timerow { display: flex; align-items: center; gap: 12px; }
.zm-timerow > span { color: var(--zm-muted); font-size: .9em; min-width: 2.5em; }
.zm-time { flex: 1; min-width: 0; accent-color: var(--zm-accent); margin: 0; }
.zm-timeout { min-width: 4.5em; text-align: right; font-weight: 600; }
.zm-msg { margin: 0; font-size: .88em; color: var(--zm-muted); }

/* grafieken */
.zm-charts { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.zm-fig { flex: 1 1 340px; margin: 0; padding: 14px 16px 12px; background: var(--zm-bg); border: 1px solid var(--zm-line); border-radius: 14px; min-width: 0; }
.zm-fig--arc { flex-basis: 100%; }
.zm-figcap { font-weight: 600; margin-bottom: 8px; color: var(--zm-fg); }
.zm-figwrap { position: relative; }
.zm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.zm-svg--dial { max-width: 440px; margin: 0 auto; }
.zm-figwrap--dial { max-width: 440px; margin: 0 auto; }

.zm-svg text { font-family: inherit; }
.zm-ax { fill: rgba(255, 255, 255, .88); font-size: 11px; }
.zm-ax--b { font-weight: 700; font-size: 11.5px; fill: #fff; }
.zm-ax--l { fill: rgba(255, 255, 255, .95); font-size: 11px; }
.zm-t { fill: var(--zm-fg); font-size: 12px; }
.zm-tm { fill: var(--zm-muted); font-size: 12px; }
.zm-t--s { font-size: 11.5px; }
.zm-t--b { font-weight: 600; }
.zm-t--big { font-size: 18px; font-weight: 700; }

.zm-dialhole { fill: var(--zm-bg); }
.zm-dialrim { stroke: var(--zm-line); stroke-width: 1; }
.zm-tick { stroke: var(--zm-muted); stroke-width: 1; }
.zm-hand { stroke: var(--zm-fg); stroke-width: 2.5; stroke-linecap: round; }
.zm-nowdot { stroke: var(--zm-bg); }
.zm-moontrack { stroke: var(--zm-line); }
.zm-moonarc { stroke: var(--zm-moon); stroke-linecap: butt; }
.zm-moonoff { fill: var(--zm-line); stroke: var(--zm-muted); stroke-width: 1; }

.zm-grid { stroke: var(--zm-line); stroke-width: 1; }
.zm-horizon { stroke: var(--zm-muted); stroke-width: 1.5; }
.zm-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.zm-line--sun { stroke: var(--zm-sun); }
.zm-line--moon { stroke: var(--zm-moon); }
.zm-dot { stroke: var(--zm-bg); stroke-width: 2; }
.zm-dot--sun { fill: var(--zm-sun); }
.zm-dot--moon { fill: var(--zm-moon); }
.zm-nowline-v { stroke: var(--zm-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.zm-hoverline { stroke: var(--zm-fg); stroke-opacity: .45; stroke-width: 1; }
.zm-hit { cursor: crosshair; touch-action: pan-y; }

.zm-tip {
	position: absolute; top: 4px; transform: translateX(-50%); pointer-events: none; z-index: 2;
	background: var(--zm-bg); color: var(--zm-fg); border: 1px solid var(--zm-line); border-radius: 8px;
	padding: 6px 10px; font-size: .82em; line-height: 1.5; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); white-space: nowrap;
}
.zm-tip[hidden] { display: none; }

.zm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: .85em; color: var(--zm-muted); }
.zm-key { display: inline-flex; align-items: center; gap: 6px; }
.zm-sw { display: inline-block; width: 16px; height: 4px; border-radius: 2px; vertical-align: middle; flex: none; }
.zm-sw--sun { background: var(--zm-sun); }
.zm-sw--moon { background: var(--zm-moon); }
.zm-sw--ref { height: 0; border-top: 2px dotted var(--zm-muted); border-radius: 0; }
.zm-sw--box { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(128, 138, 165, .45); }
.zm-sw--moonring { width: 16px; height: 6px; background: var(--zm-moon); border-radius: 3px; }
.zm-fig--arc .zm-sw--sun { background: #ffc233; box-shadow: 0 0 0 1px rgba(140, 90, 0, .45); }
.zm-fig--arc .zm-sw--moon { background: #dfe6ff; box-shadow: 0 0 0 1px rgba(80, 92, 150, .6); }
.zm-nowline { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0; font-size: .92em; }
.zm-nowline--c { justify-content: center; margin-bottom: 4px; }
.zm-nowitem { display: inline-flex; align-items: center; gap: 6px; }
.zm-nowitem em { color: var(--zm-muted); font-style: normal; }
.zm-tip .zm-sw { width: 10px; margin-right: 4px; }

/* gegevenskaarten */
.zm-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.zm-card { padding: 16px; background: var(--zm-bg); border: 1px solid var(--zm-line); border-radius: 14px; min-width: 0; }
.zm .zm-cardtitle { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0; font-size: 1.1em; font-weight: 700; color: var(--zm-fg); }
.zm .zm-subtitle { margin: 16px 0 6px; padding: 0; font-size: .95em; font-weight: 600; color: var(--zm-fg); }
.zm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.zm-tile { padding: 8px 10px; background: var(--zm-soft); border-radius: 10px; min-width: 0; }
.zm-tile span { display: block; font-size: .78em; color: var(--zm-muted); }
.zm-tile b { display: block; font-size: 1em; line-height: 1.3; overflow-wrap: anywhere; }
.zm-tile small, .zm-row small { font-size: .8em; color: var(--zm-muted); font-weight: 400; }
.zm-note { margin: 0 0 10px; padding: 8px 10px; background: var(--zm-soft); border-radius: 10px; font-size: .9em; }
.zm-list { margin: 0; padding: 0; }
.zm-list--sum { margin-top: 8px; border-top: 2px solid var(--zm-line); }
.zm-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; border-bottom: 1px solid var(--zm-line); }
.zm-row dt { margin: 0; color: var(--zm-muted); }
.zm-row dd { margin: 0; text-align: right; white-space: nowrap; }
.zm-row.is-main dt { color: var(--zm-fg); font-weight: 600; }
.zm-row.is-main dd { font-weight: 600; }
.zm-row.is-past { opacity: .55; }
.zm-row.is-none dd { color: var(--zm-muted); }
.zm-row.is-next { background: var(--zm-soft); border-radius: 8px; box-shadow: inset 3px 0 0 var(--zm-accent); opacity: 1; }
.zm-phasehead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zm-phasename { font-size: 1.05em; }
.zm-muted { color: var(--zm-muted); }
.zm-phases { list-style: none; margin: 0; padding: 0; }
.zm-phases li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--zm-line); }
.zm-phases time { color: var(--zm-muted); font-size: .92em; text-align: right; }
.zm-foot { margin: 12px 2px 0; font-size: .8em; color: var(--zm-muted); }

@media (max-width: 480px) {
	.zm-tiles { grid-template-columns: 1fr 1fr; }
	.zm-tiles .zm-tile:last-child { grid-column: 1 / -1; }
	.zm { padding: 10px; border-radius: 14px; }
	.zm-fig, .zm-card { padding-left: 12px; padding-right: 12px; }
	.zm-geo { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
	.zm-btn { transition: border-color .15s, background-color .15s; }
}

/* compacte kaart */
.zon-maan--compact { max-width: 600px; margin: 0; container-type: inline-size; }
.zm.zm-compact { padding: 14px 16px 16px; background: var(--zm-bg); border: 1px solid var(--zm-line); border-radius: 16px; }
.zm-chead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.zm-ctitle { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--zm-accent); }
.zm-cwhen { font-size: 12px; color: var(--zm-muted); white-space: nowrap; }
.zm-compact .zm-nowline { font-size: .84em; margin: 8px 0 12px; }
.zm-cm { fill: #dfe6ff; font-size: 10.5px; }
.zm-ccols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; border-top: 1px solid var(--zm-line); padding-top: 14px; }
.zm-ccol + .zm-ccol { border-left: 1px solid var(--zm-line); padding-left: 18px; }
.zm-ccoltitle { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--zm-muted); }
.zm-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.zm-cstat { min-width: 0; }
.zm-cstat span { display: block; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--zm-muted); overflow-wrap: anywhere; }
.zm-cstat b { display: block; margin-top: 2px; font-size: 1.12em; font-weight: 700; color: var(--zm-sun); white-space: nowrap; }
.zm-cstat--wide { grid-column: 1 / -1; }
.zm-ccol--moon .zm-cstat b { color: var(--zm-moon); }
.zm-cmoon { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.zm-cmoon svg { flex: none; }
.zm-cmoontxt b { display: block; font-size: .98em; line-height: 1.25; }
.zm-cpct { font-size: 1.7em; font-weight: 700; line-height: 1.15; color: var(--zm-fg); }
.zm-cmoontxt span { font-size: .8em; color: var(--zm-muted); }
@container (max-width: 470px) {
	.zm-ccols { grid-template-columns: 1fr; gap: 16px; }
	.zm-ccol + .zm-ccol { border-left: 0; padding-left: 0; border-top: 1px solid var(--zm-line); padding-top: 14px; }
}