/* Cal module — dark theme */
folk-calendar-view {
	display: block;
	min-height: 400px;
	padding: 20px;
}

/* ── Lens views: Horizon (radiant ladder) + Causal (Rauzy tile) ──
   These are not rungs on the temporal zoom ladder — they are the two views that
   decline to pick a zoom level — so their buttons sit OUTSIDE the zoom track. */
.lens-btn {
	font: 11px/1 ui-monospace, monospace;
	letter-spacing: .04em;
	background: transparent;
	color: var(--cal-fg-dim, #6b7280);
	border: 1px solid var(--cal-rule, #d1d5db);
	border-radius: 3px;
	padding: 5px 9px;
	margin-right: 6px;
	cursor: pointer;
	transition: color .15s, border-color .15s, background .15s;
}
.lens-btn:hover { color: var(--cal-fg, #111827); border-color: var(--cal-fg-dim, #6b7280); }
.lens-btn.active { background: #a6462b; border-color: #a6462b; color: #f6f2ee; }
.lens-btn:focus-visible { outline: 2px solid #a6462b; outline-offset: 2px; }

.horizon-view, .causal-view { padding: 18px 20px; }
.horizon-view__head h3, .causal-view__head h3 {
	margin: 0 0 4px; font-size: 1.05rem; font-weight: 600;
}
.horizon-view__head p, .causal-view__head p {
	margin: 0 0 14px; font-size: .82rem; line-height: 1.5;
	color: var(--cal-fg-dim, #6b7280); max-width: 62ch;
}
.horizon-view__legend, .causal-view__legend {
	display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
	font: 10px ui-monospace, monospace; color: var(--cal-fg-dim, #6b7280);
}
.causal-view__legend i {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-right: 5px; vertical-align: middle;
}
.causal-view__svg {
	width: 100%; max-width: 720px; height: auto; display: block;
	background: var(--cal-bg-2, #f9fafb);
	border: 1px solid var(--cal-rule, #e5e7eb); border-radius: 4px;
}
.causal-dot { cursor: pointer; transition: r .12s, fill-opacity .12s; }
.causal-dot:hover { r: 5.5; fill-opacity: 1; }
.causal-view__empty {
	padding: 40px; text-align: center; font: 12px ui-monospace, monospace;
	color: var(--cal-fg-dim, #6b7280);
}
@media (pointer: coarse) {
	.lens-btn { min-height: 44px; padding: 10px 14px; font-size: 13px; }
	.causal-dot { r: 5; }
}