/* Niche Advent 0.1.0: the standalone pages (create, my calendars, view, edit). Phone first. */
:root {
	--nadv-green: #0f3d2e;
	--nadv-green-deep: #0b2419;
	--nadv-red: #e2473f;
	--nadv-gold: #ffd37a;
	--nadv-paper: #fbf8f2;
	--nadv-ink: #1c2a24;
	--nadv-muted: #5c665f;
	--nadv-rule: #e2dccf;
	--nadv-dark-text: #f1ebdd;
	--nadv-dark-mute: #b9c8bf;
	--nadv-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--nadv-display: "Berkshire Swash", "Iowan Old Style", Palatino, Georgia, serif;
	--nadv-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@font-face { font-family: "Berkshire Swash"; src: url(fonts/berkshire-swash.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.nadv { margin: 0; background: var(--nadv-paper); color: var(--nadv-ink); font: 17px/1.5 var(--nadv-sans); }
a { color: var(--nadv-green); }
h1, h2 { font-family: var(--nadv-serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
.nadv-lead { color: var(--nadv-muted); margin: 0 0 1.25rem; }

.nadv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem 1rem 0; background: var(--nadv-green-deep); color: var(--nadv-dark-text); }
.nadv-head a { color: var(--nadv-dark-text); text-decoration: none; }
.nadv-logo { font-family: var(--nadv-display); font-size: 1.45rem; font-weight: 400; color: var(--nadv-gold) !important; }
.nadv-head::after { content: ""; flex-basis: 100%; height: 14px; margin: .4rem -1rem 0; background:
	radial-gradient(circle at 6px 7px, #e2473f 3.5px, rgba(226,71,63,.35) 5px, transparent 7px),
	radial-gradient(circle at 32px 7px, #ffd37a 3.5px, rgba(255,211,122,.35) 5px, transparent 7px),
	radial-gradient(circle at 58px 7px, #3fb26f 3.5px, rgba(63,178,111,.35) 5px, transparent 7px),
	radial-gradient(circle at 84px 7px, #5b9bff 3.5px, rgba(91,155,255,.35) 5px, transparent 7px);
	background-size: 104px 14px; background-repeat: repeat-x; }
.nadv-head nav a { margin-left: 1rem; font-size: .92rem; opacity: .9; }
.nadv-head nav a:hover { opacity: 1; text-decoration: underline; }

.nadv-wrap { max-width: 640px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.nadv-cal { max-width: 980px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.nadv-title { text-align: center; margin: .75rem 0 1rem; font-family: var(--nadv-display); font-weight: 400; font-size: 2rem; }
/* the calendar page itself is "Lights on": dark page, cream text, gold numerals */
body.nadv:has(main.nadv-cal:not(.nadv-editor)) { background: var(--nadv-green-deep); color: var(--nadv-dark-text); }
body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-title { color: var(--nadv-gold); }
body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-foot, body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-foot a { color: var(--nadv-dark-mute); }
body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-foot a { text-decoration: underline; }
body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-door { border-color: rgba(255,211,122,.35); color: #fff4d6; }
body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-banner { background: #163b31; color: var(--nadv-gold); }

/* forms */
.nadv-form label { display: block; margin: 0 0 1rem; font-weight: 600; }
.nadv-form label small { display: block; font-weight: 400; color: var(--nadv-muted); font-size: .88rem; margin-top: .25rem; }
.nadv-form input[type=text], .nadv-form input[type=email], .nadv-form input[type=password], .nadv-form input[type=number], .nadv-form input[type=date],
.nadv-form input[type=url], .nadv-sheet input[type=text], .nadv-sheet input[type=url], .nadv-sheet input[type=search], .nadv-sheet textarea, .nadv-panel input[type=text], .nadv-panel input[type=url], .nadv-panel input[type=number], .nadv-panel input[type=date], .nadv-sheet select {
	display: block; width: 100%; margin-top: .3rem; padding: .65rem .75rem; font: inherit; border: 1px solid #c9c3b8; border-radius: 8px; background: #fff; color: var(--nadv-ink);
}
.nadv-sheet textarea { min-height: 7rem; resize: vertical; }
.nadv-sheet input[type=file], .nadv-form input[type=file] { display: block; margin-top: .4rem; }
/* "What the door holds": the one choice that changes the form, so it stands out (owner, 2026-10-28) */
.nadv-sheet .nadv-f-type { color: var(--nadv-ink); margin-bottom: 1.2rem; }
.nadv-sheet .nadv-f-type select {
	font-weight: 700; color: var(--nadv-red); border: 2px solid var(--nadv-red); margin-top: .4rem; padding-right: 3.2rem; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2473f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.5rem 1.5rem;
}
/* saving: the button shows a spinner while the photo uploads (a 3 MB photo over a slow line takes seconds) */
.nadv-btn.is-busy { pointer-events: none; opacity: .75; }
.nadv-btn .nadv-spin { display: inline-block; width: .9em; height: .9em; margin-right: .45em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: nadv-spin .8s linear infinite; }
@keyframes nadv-spin { to { transform: rotate(360deg); } }
.nadv-check { font-weight: 400 !important; }
.nadv-check input { margin-right: .4rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
legend { font-weight: 600; margin-bottom: .4rem; }
.nadv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nadv-error { color: var(--nadv-red); font-weight: 600; }
.nadv-saved { color: var(--nadv-green); font-weight: 600; }
.nadv-bgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.nadv-bgpick { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.nadv-bgpick input { position: absolute; opacity: 0; }
.nadv-bgpick img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 3px solid transparent; }
.nadv-bgpick input:checked + img { border-color: var(--nadv-red); }
.nadv-bgpick input:focus-visible + img { outline: 3px solid var(--nadv-green); outline-offset: 2px; }

.nadv-btn { display: inline-block; padding: .6rem 1.1rem; border: 1px solid var(--nadv-green); border-radius: 999px; background: #fff; color: var(--nadv-green); font: 600 1rem var(--nadv-sans); text-decoration: none; cursor: pointer; }
.nadv-btn:hover { background: #eef3ef; }
.nadv-primary { background: var(--nadv-green); color: #fff; }
body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-btn { background: transparent; color: var(--nadv-gold); border-color: var(--nadv-gold); }
body.nadv:has(main.nadv-cal:not(.nadv-editor)) .nadv-primary { background: var(--nadv-gold); color: var(--nadv-green-deep); }
.nadv-primary:hover { background: var(--nadv-green-deep); }
.nadv-del { border-color: var(--nadv-red); color: var(--nadv-red); }
.nadv-actions { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; justify-content: center; }
.nadv-url { word-break: break-all; text-align: center; font-weight: 600; }
.nadv-danger { margin-top: 2rem; text-align: center; }

/* the maker's preview banner */
.nadv-banner { max-width: 980px; margin: 0 auto .5rem; padding: .55rem .9rem; border-radius: 10px; background: #fff3cd; color: #5a4300; font-size: .92rem; text-align: center; }

/* the calendar grid */
.nadv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: 14px; background: #333 center / cover no-repeat; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.nadv-door { position: relative; aspect-ratio: 1 / 1; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; background: rgba(8,36,25,.55); color: #fff; cursor: pointer; padding: 0; font: 600 1.6rem var(--nadv-serif); transition: transform .12s ease, background .12s ease; backdrop-filter: blur(1px); }
.nadv-door:hover, .nadv-door:focus-visible { transform: scale(1.04); background: rgba(8,36,25,.75); outline: none; }
.nadv-door.is-open { background: rgba(226,71,63,.78); }
.nadv-door.is-opened { background: rgba(250,247,242,.28); color: #fff; }
.nadv-door.is-filled::after { content: ""; position: absolute; right: 7px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #ffd37a; }
.nadv-door span { pointer-events: none; }
@media (min-width: 700px) {
	.nadv-grid { grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 10px; border-radius: 18px; }
	.nadv-door { font-size: 2rem; border-radius: 12px; }
}

/* the door sheet: full screen on a phone, a centred card on a desktop */
.nadv-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.86); display: flex; align-items: flex-end; justify-content: center; }
.nadv-sheet[hidden] { display: none; }
.nadv-sheet-in { position: relative; width: 100%; max-height: 92vh; overflow: auto; background: var(--nadv-paper); border-radius: 18px 18px 0 0; padding: 1.25rem 1rem 2rem; }
.nadv-sheet-in { color: var(--nadv-ink); }   /* the calendar page's body text is cream on green; the paper sheet is ink on paper */
.nadv-sheet-in a { color: var(--nadv-green-deep); }
.nadv-close { position: absolute; right: .6rem; top: .5rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #e9e4da; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.nadv-door-no { font: 600 1.1rem var(--nadv-serif); color: var(--nadv-red); margin: 0 0 .5rem; }
.nadv-door-text { white-space: pre-wrap; font-size: 1.1rem; }
.nadv-gate { text-align: center; padding: .4rem 0 .2rem; }   /* 0.4.0: the parcel before a third-party video loads */
.nadv-gate-ico { display: block; width: 76px; height: 76px; margin: 0 auto .5rem; }
.nadv-gate-text { margin: 0 0 .4rem; font: 600 1.2rem var(--nadv-serif); }
.nadv-gate-small { margin: 0 auto 1rem; max-width: 34rem; font-size: .9rem; line-height: 1.45; color: #4a5a52; }
.nadv-fx-sub { margin: -4px 0 6px; padding: 0 4px; font-size: .76rem; line-height: 1.35; color: #b9c9c0; }
.nadv-door-media { margin: .75rem 0; }
.nadv-door-media img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 0 auto; }
.nadv-video { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.nadv-door-video { margin: .5rem -1rem .75rem; }
.nadv-vertical { position: relative; width: min(420px, 100%); aspect-ratio: 9 / 16; max-height: 78vh; margin: 0 auto; overflow: hidden; background: #000; }
.nadv-vertical iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nadv-door-image { margin: .5rem -1rem .75rem; }
.nadv-door-image img { max-height: 82vh; width: auto; max-width: 100%; border-radius: 0; }
.nadv-sheet.is-media .nadv-sheet-in { background: #111; color: #fff; }
.nadv-sheet.is-media .nadv-door-no { color: #ffd37a; }
.nadv-sheet.is-media .nadv-close { background: #333; color: #fff; }
.nadv-sheet.is-media .nadv-door-text a { color: #ffd37a; }
.nadv-music-btn { position: fixed; right: 14px; bottom: 14px; z-index: 40; padding: .55rem 1rem; border: 0; border-radius: 999px; background: var(--nadv-red); color: #fff; font: 600 .95rem var(--nadv-sans); cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.nadv-music { position: fixed; right: 14px; bottom: 14px; z-index: 40; width: 320px; max-width: calc(100vw - 28px); background: #111; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.nadv-music iframe { display: block; width: 100%; height: 200px; border: 0; }
.nadv-music-close { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); font-size: 1.1rem; cursor: pointer; z-index: 1; }
.nadv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nadv-closed { color: var(--nadv-muted); font-size: 1.1rem; }
.nadv-note { color: var(--nadv-muted); font-size: .85rem; }
@media (min-width: 700px) {
	.nadv-sheet { align-items: center; }
	.nadv-sheet-in { width: min(640px, 92vw); border-radius: 18px; padding: 1.5rem 1.5rem 1.75rem; }
	.nadv-sheet.is-media .nadv-sheet-in { width: min(1100px, 94vw); padding: 1rem 1.5rem 1.25rem; }
	.nadv-door-video, .nadv-door-image { margin: .25rem -1.5rem .75rem; }
	.nadv-door-image img { display: block; margin: 0 auto; }
}

/* editor */
.nadv-editor .nadv-actions { margin: 0 0 1rem; }
.nadv-panel { max-width: 640px; margin: 1.5rem auto 0; padding: 1.25rem 1rem; background: #fff; border: 1px solid var(--nadv-rule); border-radius: 14px; }
.nadv-panel label { display: block; margin: 0 0 1rem; font-weight: 600; }
.nadv-panel label small { display: block; font-weight: 400; color: var(--nadv-muted); font-size: .88rem; margin-top: .25rem; }
#nadv-qr { display: flex; justify-content: center; }
#nadv-qr img { image-rendering: pixelated; border: 8px solid #fff; }
.nadv-sheet .nadv-field { display: block; margin: 0 0 .9rem; font-weight: 600; }
.nadv-sheet .nadv-field small { display: block; font-weight: 400; color: var(--nadv-muted); font-size: .85rem; }
.nadv-sheet .nadv-preview img { max-height: 220px; width: auto; }

.nadv-foot { margin-top: 1.5rem; text-align: center; color: var(--nadv-muted); font-size: .9rem; }
.nadv-foot p { margin: .3rem 0; }

/* the gift shelf (makers only: the editor's door sheet and the "calendar is ready" page) */
.nadv-shelf { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--nadv-rule); }
.nadv-shelf h3 { font-family: var(--nadv-serif); font-size: 1.15rem; margin: 0 0 .5rem; }
.nadv-shelf-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.nadv-shelf-tab { padding: .3rem .7rem; border: 1px solid var(--nadv-rule); border-radius: 999px; background: #fff; font: 600 .82rem var(--nadv-sans); color: var(--nadv-muted); cursor: pointer; }
.nadv-shelf-tab.is-on { background: var(--nadv-green); border-color: var(--nadv-green); color: #fff; }
.nadv-shelf-blurb { color: var(--nadv-muted); font-size: .88rem; margin: 0 0 .5rem; }
.nadv-shelf-row { display: flex; gap: .6rem; overflow-x: auto; padding: 0 0 .5rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.nadv-gift { flex: 0 0 170px; scroll-snap-align: start; background: #fff; border: 1px solid var(--nadv-rule); border-radius: 12px; padding: .6rem; display: flex; flex-direction: column; }
.nadv-gift img { display: block; width: 100%; height: 120px; object-fit: contain; margin: 0 0 .4rem; }
.nadv-gift h4 { font: 600 .92rem var(--nadv-sans); margin: 0 0 .25rem; }
.nadv-gift-note { font-size: .8rem; color: var(--nadv-muted); margin: 0 0 .4rem; flex: 1; }
.nadv-gift-price { font-weight: 600; font-size: .9rem; margin: 0 0 .5rem; }
.nadv-gift-price span { font-weight: 400; color: #999; font-size: .72rem; }
.nadv-gift-btn { font-size: .82rem; padding: .4rem .7rem; text-align: center; }
.nadv-shelf-disclosure { font-size: .75rem; color: #999; margin: .5rem 0 0; }
.nadv-sheet.is-media .nadv-shelf { display: none; }

/* the GIF picker in the door editor */
.nadv-gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: .3rem 0 .4rem; }
.nadv-gif-pick { padding: 0; border: 3px solid transparent; border-radius: 8px; background: #eee; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; }
.nadv-gif-pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nadv-gif-pick.is-on { border-color: var(--nadv-red); }
.nadv-gif-credit { font-size: .72rem; color: #999; margin: 0; }
.nadv-gif-wait { color: #999; font-size: .85rem; }
@media (min-width: 700px) { .nadv-gif-grid { grid-template-columns: repeat(6, 1fr); } }

/* festive extras on the calendar page, behind the slide-out Effects tab (red so it is easy to spot) */
.nadv-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.nadv-fx-tab { position: fixed; right: 0; top: 46%; z-index: 42; writing-mode: vertical-rl; transform: rotate(180deg); padding: 12px 8px; border: 0; border-radius: 0 10px 10px 0; background: var(--nadv-red); color: #fff; font: 700 .8rem var(--nadv-sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.nadv-fx-tab.is-playing span::after { content: " \266B"; }
.nadv-fx-panel { position: fixed; right: 38px; top: 38%; z-index: 41; width: 250px; max-width: calc(100vw - 52px); background: #11322a; color: var(--nadv-dark-text); border: 1px solid #244d41; border-radius: 12px; padding: 12px 12px 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transform: translateX(calc(100% + 60px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.nadv-fx-panel.is-open { transform: none; visibility: visible; transition: transform .25s ease; }
/* 0.3.0: the closed panel is parked inside the viewport (faded, a short slide), never beyond the right edge: iOS Safari
   counts a fixed element translated off the edge as page width and lets the page scroll sideways */
.nadv-fx-panel { transform: translateX(30px); opacity: 0; transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s; }
.nadv-fx-panel.is-open { opacity: 1; transition: transform .25s ease, opacity .25s ease; }
/* 0.3.0: the maker button in the header (not on the tool's own pages) */
.nadv-head nav .nadv-make { display: inline-block; padding: .35rem .8rem; border-radius: 999px; background: var(--nadv-red); color: #fff; font-weight: 700; opacity: 1; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.nadv-head nav .nadv-make:hover { background: #c93a33; text-decoration: none; }
.nadv-fx-title { margin: 0 0 8px; font-family: var(--nadv-display); color: var(--nadv-gold); font-size: 1.15rem; }
.nadv-fx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 4px; border: 0; border-top: 1px solid #244d41; background: none; color: var(--nadv-dark-text); font: inherit; cursor: pointer; text-align: left; }
.nadv-fx-knob { flex: none; width: 38px; height: 22px; border-radius: 11px; background: #35594b; position: relative; transition: background .15s; }
.nadv-fx-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.nadv-fx-row[aria-checked="true"] .nadv-fx-knob { background: var(--nadv-gold); }
.nadv-fx-row[aria-checked="true"] .nadv-fx-knob::after { left: 19px; }
.nadv-fx-player { margin: 4px 0 6px; border-radius: 8px; overflow: hidden; background: #000; }
.nadv-fx-player iframe { display: block; width: 100%; height: 200px; border: 0; }
.nadv-fx-note { margin: 6px 0 0; font-size: .72rem; color: var(--nadv-dark-mute); }
.nadv-music-btn, .nadv-music { display: none; }
/* the string of lights: JS builds one bulb per 26 px (.nadv-lights i), each with its own colour --c, pace --d and
   phase --o; the gradient strip in .nadv-head::after is the fallback without JS */
.nadv-head.has-bulbs::after { display: none; }
.nadv-lights { flex-basis: 100%; display: flex; gap: 19px; height: 14px; margin: .4rem -1rem 0; padding-left: 3px; overflow: hidden; }
.nadv-lights i { flex: none; width: 7px; height: 7px; margin-top: 3.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 5px 1.5px var(--c); opacity: .55; animation: nadv-bulb var(--d) ease-in-out var(--o) infinite; }
@keyframes nadv-bulb { 0%, 100% { opacity: .35; box-shadow: 0 0 2px 0 var(--c); } 50% { opacity: 1; box-shadow: 0 0 7px 2.5px var(--c); } }
html.amf-lights-off .nadv-lights i { animation: none; opacity: .9; box-shadow: 0 0 4px 1px var(--c); }
@media (prefers-reduced-motion: reduce) { .nadv-lights i { animation: none; opacity: .9; } }