@font-face {
		font-family: "Fredoka";
		font-style: normal;
		font-weight: 400 700;
		font-display: swap;
		src: url("fonts/fredoka-latin.woff2") format("woff2");
	}
	@font-face {
		font-family: "Baloo 2";
		font-style: normal;
		font-weight: 400 700;
		font-display: swap;
		src: url("fonts/baloo2-latin.woff2") format("woff2");
	}
	:root {
		--grass: #6cbf4b;
		--grass-deep: #3c7a3a;
		--grass-shadow: #2f6330;
		--sky: #8fd4e8;
		--sky-soft: #bce6f1;
		--wood: #b9824e;
		--wood-dark: #8a5a32;
		--wood-light: #e6c79a;
		--cream: #fff6df;
		--cream-edge: #f3e4be;
		--ink: #543e26;
		--ink-soft: #6d563b;
		--sun: #f6c544;
		--berry: #e07a5f;
		--leaf-tag: #8fce6b;
		--shadow: rgba(74, 53, 32, 0.22);
		--display: "Fredoka", "Baloo 2", system-ui, sans-serif;
		--body: "Baloo 2", system-ui, sans-serif;
	}
	* { box-sizing: border-box; margin: 0; padding: 0; }
	html { -webkit-text-size-adjust: 100%; }
	body {
		font-family: var(--body);
		color: var(--ink);
		background: var(--sky-soft);
		min-height: 100vh;
		line-height: 1.4;
	}

	* { scrollbar-width: thin; scrollbar-color: var(--sky) transparent; }
	::-webkit-scrollbar { width: 8px; height: 8px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb { background: var(--sky); border-radius: 8px; }
	::-webkit-scrollbar-thumb:hover { background: #6bbcd6; }
	.results { scrollbar-color: var(--cream-edge) transparent; margin-bottom: 16px;}
	.results::-webkit-scrollbar-thumb { background: var(--cream-edge); }
	.results::-webkit-scrollbar-thumb:hover { background: var(--wood-light); }
	.wrap {
		max-width: 620px;
		margin: 0 auto;
		padding:
			calc(env(safe-area-inset-top) + 14px)
			calc(env(safe-area-inset-right) + 14px)
			calc(env(safe-area-inset-bottom) + 14px)
			calc(env(safe-area-inset-left) + 14px);
	}

	.sec-head {
		display: flex; align-items: center; gap: 10px;
		margin: 0 10px 24px;
	}
	.sec-head h3 {
		font-family: var(--display); font-weight: 600;
		font-size: 1.22rem; color: var(--dark);
	}
	.sec-head .rule { flex: 1; height: 3px; border-radius: 3px; background: var(--ink-soft); opacity: 0.5; margin-top: 5px;}
	.sec-head .note { font-size: 0.83rem; color: var(--ink-soft); font-weight: 500; }

	ul.events { list-style: none; display: flex; flex-direction: column; gap: 18px; }
	.event {
		display: block;
		background: var(--cream);
		border: 2.5px solid var(--cream-edge);
		border-radius: 16px;
		padding: 12px 15px;
		box-shadow: 0 4px 0 var(--cream-edge), 0 6px 14px rgba(74,53,32,0.1);
		cursor: pointer;
		text-align: left; width: 100%; font-family: var(--body);
		-webkit-appearance: none; appearance: none; color: inherit;
	}
	.event-head { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 13px; position: relative; z-index: 2; background: inherit; }
	/* expandable region: animate the grid row from 0fr to 1fr for a smooth grow */
	.event-detail {
		display: grid; grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease-in-out;
	}
	.event.expanded .event-detail { grid-template-rows: 1fr; }
	.event-detail .ed-inner { overflow: hidden; min-height: 0; position: relative; }
	/* soft fade over the bottom edge so the clip isn't a harsh line while
	   growing; the header sits on a higher layer so the fade never washes it */
	.event-detail .ed-inner::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px;
		pointer-events: none; z-index: 1; opacity: 1;
		background: linear-gradient(to top, var(--cream), rgba(255,246,223,0));
		transition: opacity 0.12s linear 0.18s;
	}
	.event.expanded .ed-inner::after { opacity: 0; }
	.event:not(.expanded) .ed-inner::after { transition: opacity 0.05s linear; }
	.event.birthday .ed-inner::after { background: linear-gradient(to top, #fff0f4, rgba(255,240,244,0)); }
	.event-detail .ed-body { display: flow-root; margin-top: 13px; padding-top: 13px; border-top: 2px solid var(--cream-edge); }
	.event.birthday .event-detail .ed-body {
		border-top-color: #f6d6e0;
		display: flex; flex-direction: row-reverse; align-items: center; gap: 14px;
	}
	.event .d-desc { font-size: 1.01rem; line-height: 1.5; color: var(--ink); }
	.event .bday-portrait {
		flex: none; width: 96px; height: 96px; border-radius: 14px;
		padding: 4px; overflow: hidden;
	}
	.event.birthday .vquote { flex: 1; text-align: center; }
	.event .bday-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(74,53,32,0.22)); }
	.event .vquote { font-style: italic; color: var(--ink); font-size: 1.01rem; line-height: 1.45; }
	.event .vquote .mark { color: var(--ink); font-family: var(--display); font-weight: 600; }
	.event.birthday { background: #fff0f4; border-color: #f6d6e0; box-shadow: 0 4px 0 #f6d6e0, 0 6px 14px rgba(74,53,32,0.1); }
	.event .chip {
		text-align: center; line-height: 1; border-radius: 10px;
		padding: 7px 3px; background: var(--grass); border: 0;
		box-shadow: inset 0 0 0 2px var(--grass-shadow), 0 1px 0 var(--grass-shadow), 0 2px 0 var(--grass-shadow);
	}
	.event.birthday .chip { background: #f48fb1; box-shadow: inset 0 0 0 2px #d96d92, 0 1px 0 #d96d92, 0 2px 0 #d96d92; }
	.cal-tag.set-date { position: relative; cursor: pointer; }
	.town-day-input {
		position: absolute; inset: 0; width: 100%; height: 100%;
		margin: 0; padding: 0; border: 0; background: transparent;
		opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
	}
	.chip .mon {
		display: block; font-family: var(--display); font-weight: 600;
		font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream);
	}
	.chip .day { font-family: var(--display); font-weight: 600; font-size: 1.28rem; color: #fff; }
	.event .name { font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--ink); line-height: 1.1; }
	.event .sub { font-size: 0.9rem; color: var(--ink-soft); font-weight: 500; margin-top: 2px; line-height: 1.2; }
	.event .away {
		font-family: var(--display); font-weight: 600;
		font-size: 1rem; color: var(--ink-soft); white-space: nowrap; text-align: right;
	}
	.villagers-panel {
		background: var(--cream); border: 2.5px solid var(--cream-edge); border-radius: 16px;
		box-shadow: 0 4px 0 var(--cream-edge), 0 6px 14px rgba(74,53,32,0.1);
		margin-bottom: 24px; overflow: hidden;
	}
	.villagers-toggle {
		width: 100%; display: flex; align-items: center; justify-content: space-between;
		background: none; border: none; cursor: pointer;
		font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--ink);
		padding: 14px 18px;
	}
	.villagers-toggle .vt-right { display: flex; align-items: center; gap: 12px; }
	.villagers-toggle .plus-box {
		display: flex; justify-content: center; align-items: center;
		width: 20px; height: 20px; flex-shrink: 0;
		color: var(--ink); transition: transform 0.15s ease-in-out;
	}
	.villagers-toggle .plus {
		position: relative; width: 4px; height: 16px;
		background: currentColor; transition: background 0.15s ease-in-out;
	}
	.villagers-toggle .plus::after {
		content: ""; position: absolute; left: -6px; top: 6px;
		width: 16px; height: 4px; background: currentColor;
	}
	.villagers-toggle[aria-expanded="true"] .plus-box { transform: rotate(-45deg); }
	.picker-count { font-family: var(--display); font-weight: 600; color: var(--ink-soft); font-size: 1.01rem; }
	/* drawer expands smoothly via animated grid row instead of snapping */
	.villagers-drawer {
		display: grid; grid-template-rows: 0fr;
		transition: grid-template-rows 0.32s ease-in-out;
	}
	.villagers-toggle[aria-expanded="true"] + .villagers-drawer { grid-template-rows: 1fr; }
	/* keep content clipped AND invisible while closed so the blurb never peeks through */
	.villagers-drawer .drawer-inner {
		overflow: hidden; min-height: 0; padding: 0 18px;
		visibility: hidden; transition: visibility 0.32s, padding-bottom 0.32s ease-in-out;
	}
	/* bottom padding only while open, so collapsed leaves no whitespace under the title */
	.villagers-toggle[aria-expanded="true"] + .villagers-drawer .drawer-inner { visibility: visible; padding-bottom: 18px; }
	.villagers-drawer .blurb { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 14px; }
	#search { margin-bottom: 10px; }
	.search-row { display: flex; gap: 8px; margin-bottom: 10px; }
	.search-row input {
		flex: 1; min-width: 0; max-width: 100%;
		font-family: var(--body); font-size: 1.01rem; font-weight: 500;
		padding: 10px 14px; border-radius: 12px; border: 2px solid var(--cream-edge);
		background: #fffdf6; color: var(--ink); outline: none;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.search-row input:focus { border-color: var(--grass); }
	.chosen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-height: 4px; }
	.chosen .tag {
		display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
		flex: 1 1 auto;
		font-family: var(--body); font-weight: 600; font-size: 0.87rem;
		background: var(--leaf-tag); color: var(--grass-shadow); cursor: pointer;
		border: none; text-align: left;
		padding: 4px 6px 4px 12px; border-radius: 999px; box-shadow: 0 2px 0 var(--grass-deep);
	}
	.chosen .tag .tag-x {
		background: var(--grass-deep); color: #fff;
		width: 18px; height: 18px; border-radius: 50%;
		display: grid; place-items: center;
	}
	/* × built from the same crossbar as the panel toggle, scaled down and locked at 45° */
	.chosen .tag .tag-x .tag-x-bar {
		position: relative; width: 2px; height: 9px;
		background: currentColor; transform: rotate(45deg);
	}
	.chosen .tag .tag-x .tag-x-bar::after {
		content: ""; position: absolute; left: -3.5px; top: 3.5px;
		width: 9px; height: 2px; background: currentColor;
	}
	.cal-wrap { margin-top: 14px; margin-bottom: 3px; text-align: center; }
	.cal-wrap--multi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
	.cal-tag {
		display: inline-flex; align-items: center;
		font-family: var(--body); font-weight: 600; font-size: 0.87rem;
		background: var(--leaf-tag); color: var(--grass-shadow); cursor: pointer;
		border: none; text-align: center;
		padding: 4px 14px; border-radius: 999px; box-shadow: 0 2px 0 var(--grass-deep);
	}
	.event.birthday .cal-tag { background: #f6c0d2; color: #8a3a55; box-shadow: 0 2px 0 #d96d92; }

	/* soft fades top & bottom so the scroll clip isn't a harsh line */
	.results-wrap { position: relative; }
	.results-wrap::before, .results-wrap::after {
		content: ""; position: absolute; left: 0; right: 0; height: 14px;
		pointer-events: none; z-index: 1;
	}
	.results-wrap::before { top: 0; background: linear-gradient(to bottom, var(--cream), rgba(255,246,223,0)); }
	.results-wrap::after { bottom: 0; background: linear-gradient(to top, var(--cream), rgba(255,246,223,0)); }
	.results {
		display: flex; flex-direction: column; gap: 4px; height: 280px;
		overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 4px 14px 0;
	}
	.results button.vrow {
		display: flex; justify-content: space-between; align-items: center; gap: 10px;
		font-family: var(--body); text-align: left; cursor: pointer;
		background: #fffdf6; border: 2px solid var(--cream-edge); border-radius: 10px;
		padding: 7px 13px 7px 7px; color: var(--ink); font-size: 0.96rem; font-weight: 500;
		transition: border-color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
	}
	.results button.vrow .vmain { display: flex; align-items: center; gap: 10px; min-width: 0; }
	.results button.vrow .vthumb {
		flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; object-fit: contain;
		padding: 3px;
		filter: drop-shadow(0 1px 1px rgba(74,53,32,0.2));
	}
	.results button.vrow .vname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s ease; }
	.results button.vrow .vcheck { margin-left: 0.35em; opacity: 0; transition: opacity 0.15s ease; }
	.results button.vrow.chosen-row .vcheck { opacity: 1; }
	@media (hover: hover) and (pointer: fine) {
		.results button.vrow:hover:not(:disabled) { border-color: var(--grass); }
	}
	.results button.vrow:disabled { cursor: default; }
	.results button.vrow.chosen-row { opacity: 0.55; background: #f3efe0; border-color: var(--leaf-tag); }
	.results button.vrow.chosen-row .vname { color: var(--grass-deep); }
	.results button.vrow:disabled:not(.chosen-row) { opacity: 0.4; cursor: not-allowed; }
	.results button.vrow .meta { font-size: 0.8rem; color: var(--ink-soft); }
	.results .empty { font-size: 0.9rem; color: var(--ink-soft); padding: 10px 4px; }

	@media (prefers-reduced-motion: no-preference) {
		.event { animation: pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
		@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
	}
	/* on very narrow screens the "in 7 weeks" countdown crowds the card — drop it */
	@media (max-width: 360px) {
		.event-head { grid-template-columns: 46px 1fr auto; }
		.event .away { display: none; }
	}
	/* Desktop: roomier column with larger type and cards (column stays capped) */
	@media (min-width: 760px) {
		html { font-size: 18px; }
		.wrap { max-width: 820px; }
		.sec-head h3 { font-size: 1.43rem; }
		ul.events { gap: 18px; }
		.event { padding: 18px 22px; border-radius: 20px; }
		.event-head { grid-template-columns: 58px 1fr auto; gap: 18px; }
		.event .chip { padding: 9px 4px; border-radius: 12px; }
		.chip .mon { font-size: 0.66rem; }
		.chip .day { font-size: 1.54rem; }
		.event .name { font-size: 1.22rem; }
		.event .sub { font-size: 0.94rem; }
		.event .d-desc { font-size: 1.12rem; }
		.event .bday-portrait { width: 120px; height: 120px; }
		.event .vquote { font-size: 1.06rem; }
		.villagers-panel { margin-bottom: 28px; }
		.villagers-toggle { padding: 18px 24px; font-size: 1.22rem; }
		.villagers-drawer .drawer-inner { padding: 0 24px; }
		.villagers-toggle[aria-expanded="true"] + .villagers-drawer .drawer-inner { padding-bottom: 22px; }
	}
	:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 8px; }