/*
 * The visitor notebook's core styles (2026-10-16), for js/mwf-notebook-core.js:
 * the tokens, the sheets (from the bottom on phones, a framed card in the
 * middle from 900px), the buttons, the word at the foot of the screen, the
 * digital catalogue's star, and the first-time guides' sheet with the pieces
 * of its first picture. The catalogue loads only this file; the producer page
 * and «Il mio taccuino» load css/mwf-notebook.css after it. The rules came
 * from there in the order they had, so each still wins where it did.
 */

.mwfn-sheet,
.mwfn-toast,
.mwfn-log {
	--mwfn-wine: #671e26;
	--mwfn-wine-mid: #4a161d;
	--mwfn-deep: #28191b;
	--mwfn-gold: #cdad59;
	--mwfn-gold-dark: #8c6d1f;
	--mwfn-gold-light: #f1e4b8;
	--mwfn-cream: #f4efe4;
	--mwfn-ink: #2a1d10;
	--mwfn-paper: #fbf8f1;
	--mwfn-muted: #7a6645;
	--mwfn-line: rgba(205, 173, 89, .35);
	--mwfn-serif: 'Libre Baskerville', Baskerville, Georgia, 'Times New Roman', serif;
	--mwfn-sans: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.mwfn-sheet *,
.mwfn-sheet *::before,
.mwfn-sheet *::after,
.mwfn-toast *,
.mwfn-log,
.mwfn-log *,
.mwfn-log *::before,
.mwfn-log *::after { box-sizing: border-box; }
.mwfn-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------------------------------- panel */
/* While a panel is open the page's own background is the panel's dark wine,
   not white: Safari (iOS 26) falls back to html / body for its bars and the
   strip around the keyboard when no fixed element at an edge gives a colour
   (older browsers read theme-color, which the script sets the same). */
html.mwfn-lock,
html.mwfn-lock body { overflow: hidden; background-color: #28191b; }

.mwfn-sheet {
	position: fixed;
	inset: 0;
	z-index: 9000;
	color: var(--mwfn-cream);
	/* a dark panel: the phone's own keyboard and controls follow it (iOS
	   shows its dark keyboard instead of a white one under the card) */
	color-scheme: dark;
}
.mwfn-sheet[hidden] { display: none; }
.mwfn-back {
	position: absolute;
	inset: 0;
	background: rgba(20, 10, 12, .62);
	opacity: 0;
	transition: opacity .25s;
}
/* The card is itself position: fixed on the bottom edge, with a solid
   background colour: Safari 26 colours the strip above the keyboard (and its
   bottom bar) from the background-color of a fixed element at that edge, and
   does not read absolutely positioned children. With the keyboard up the card
   stays on the edge and reaches under the keys; its content is padded above
   them (--mwfn-kb and --mwfn-top come from the visual viewport) — lifting the
   whole card left a strip of page between it and the keys. */
.mwfn-card {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: calc(100% - var(--mwfn-top, 0px) - 12px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 10px 20px calc(22px + max(env(safe-area-inset-bottom, 0px), var(--mwfn-kb, 0px)));
	scroll-padding-bottom: var(--mwfn-kb, 0px);
	border-radius: 22px 22px 0 0;
	background-color: var(--mwfn-deep);
	background-image: linear-gradient(175deg, var(--mwfn-wine-mid) 0%, #2f1a1c 58%, var(--mwfn-deep) 100%);
	box-shadow: 0 -18px 40px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(205, 173, 89, .5);
	transform: translateY(102%);
	transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.mwfn-sheet.is-open .mwfn-back { opacity: 1; }
.mwfn-sheet.is-open .mwfn-card { transform: none; }
/* under a finger GSAP moves the sheet: no transition of its own meanwhile */
.mwfn-sheet.is-held .mwfn-card,
.mwfn-sheet.is-held .mwfn-back { transition: none; }
/* swiped up: the card goes solid gold, a white check is drawn on it */
.mwfn-saved {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: none;
	place-items: center;
	align-content: center;
	gap: 12px;
	border-radius: 22px 22px 0 0;
	background: var(--mwfn-gold);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
	opacity: 0;
	pointer-events: none;
}
.mwfn-saved svg { width: 76px; height: 76px; fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.mwfn-saved-t { font: 700 .78rem/1 var(--mwfn-sans); letter-spacing: .26em; text-transform: uppercase; color: #fff; opacity: 0; }
.mwfn-grip { width: 44px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: rgba(241, 228, 184, .35); }
.mwfn-x {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: rgba(241, 228, 184, .8);
	cursor: pointer;
}
.mwfn-x svg { width: 20px; height: 20px; }
.mwfn-kicker {
	margin: 0 44px;
	font: 700 .66rem/1.5 var(--mwfn-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(241, 228, 184, .72);
}
a.mwfn-kicker--link {
	display: block;
	margin: -10px 44px 0;
	padding: 12px 0;
	text-decoration: none;
	color: var(--mwfn-gold);
}
a.mwfn-kicker--link:focus-visible { outline: 2px solid var(--mwfn-gold-light); outline-offset: 2px; border-radius: 6px; }
.mwfn-title {
	margin: 8px 0 0;
	font: 700 1.16rem/1.38 var(--mwfn-serif);
	text-align: center;
	color: var(--mwfn-gold-light);
	overflow-wrap: anywhere;
}
.mwfn-title:focus { outline: none; }
.mwfn-sub {
	margin: 6px 0 0;
	font: 500 .84rem/1.45 var(--mwfn-sans);
	text-align: center;
	color: rgba(244, 239, 228, .72);
}
.mwfn-sub:empty { display: none; }

.mwfn-actions,
.mwfn-toast-actions { display: flex; gap: 10px; margin-top: 16px; }
.mwfn-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 50px;
	padding: 10px 12px;
	border-radius: 14px;
	font: 700 .74rem/1.2 var(--mwfn-sans);
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.mwfn-btn[hidden] { display: none; }
.mwfn-btn--ghost { border: 1px solid rgba(205, 173, 89, .45); background: none; color: var(--mwfn-gold-light); }
.mwfn-btn--gold { border: 0; background: linear-gradient(180deg, #e2c77d 0%, var(--mwfn-gold) 100%); color: var(--mwfn-ink); }
.mwfn-del.is-confirm { border-color: #e7a487; color: #f6cdb8; }
.mwfn-btn:focus-visible,
.mwfn-clear:focus-visible,
.mwfn-x:focus-visible { outline: 2px solid var(--mwfn-gold-light); outline-offset: 3px; }

/* from 900px: a framed card in the middle of the screen */
@media (min-width: 900px) {
	.mwfn-card {
		left: 50%;
		right: auto;
		top: 50%;
		bottom: auto;
		width: min(560px, calc(100vw - 48px));
		max-height: calc(100vh - 64px);
		padding: 30px 36px 32px;
		border-radius: 18px;
		box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(205, 173, 89, .6), inset 0 0 0 7px rgba(40, 25, 27, .9), inset 0 0 0 8px rgba(205, 173, 89, .28);
		opacity: 0;
		transform: translate(-50%, -46%);
		transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .25s;
	}
	.mwfn-sheet.is-open .mwfn-card { opacity: 1; transform: translate(-50%, -50%); }
	.mwfn-grip { display: none; }
	.mwfn-x { top: 12px; right: 12px; }
}

/* a deletion can be undone for a few seconds */
.mwfn-undo {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 30rem;
	margin: 0 auto;
	padding: 8px 8px 8px 18px;
	border-radius: 14px;
	background: #28191b;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(205, 173, 89, .45);
	font: 600 .86rem/1.35 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: #f4efe4;
}
.mwfn-undo-btn {
	min-height: 44px;
	padding: 8px 16px;
	border: 0;
	border-radius: 10px;
	background: #cdad59;
	font: 700 .74rem/1.2 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2a1d10;
	cursor: pointer;
}

/* «Pianifica il tuo festival» (owner, 2026-10-15) — the star: in the
   digital catalogue after a card's award badges (as high as they are, on the
   dark ground: a brass outline; on, filled gold with a glow), on a plan card
   the same in the card's gold. Nothing scales; the tap's area is larger than
   the star. */
.mwfn-star-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3rem;
	height: 1.3rem;
	padding: 0;
	border: 0;
	background: none;
	color: #cdad59;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.mwfn-star-btn::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; }
.mwfn-star-btn svg { width: 100%; height: 100%; overflow: visible; fill: none; transition: fill .2s, filter .2s; }
.mwfn-star-btn.is-on svg { fill: currentColor; filter: drop-shadow(0 0 4px rgba(241, 228, 184, .55)); }
/* In the catalogue the star is the button alone (2026-10-16): printed with the
   page, one element for each of the ~930 stands. Its ::after draws the same
   star on the same 24px grid — the brass outline, or on, the gold fill — under
   the same glow; the fill turns at once, the glow comes and goes in .2s. The
   head of the page paints a star already on with these two variables. */
.mwfc .mwfc-medals .mwfn-star-btn {
	width: 1.3rem;
	height: 1.3rem;
	padding: 0;
	border: 0;
	background: none;
	color: #cdad59;
	--mwfn-star-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.85 5.95 6.55.85-4.8 4.55 1.2 6.5L12 17.3l-5.8 3.15 1.2-6.5-4.8-4.55 6.55-.85z' fill='%23cdad59' stroke='%23cdad59' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
	--mwfn-star-glow: drop-shadow(0 0 4px rgba(241, 228, 184, .55));
}
.mwfc .mwfc-medals .mwfn-star-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.85 5.95 6.55.85-4.8 4.55 1.2 6.5L12 17.3l-5.8 3.15 1.2-6.5-4.8-4.55 6.55-.85z' fill='none' stroke='%23cdad59' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	transition: filter .2s;
}
.mwfc .mwfc-medals .mwfn-star-btn.is-on::after { background-image: var(--mwfn-star-on); filter: var(--mwfn-star-glow); }
.mwfc .mwfc-medals .mwfn-star-btn:focus-visible { outline: 2px solid #f1e4b8; outline-offset: 3px; border-radius: 4px; }
.mwfc .mwfc-medals { align-items: center; }

/* The swipe on a catalogue row (owner, 2026-10-16): a phone, one day on view.
   The row slides; a gold field (into the day) or a red one (out of it) fills
   the strip the row uncovers, its white mark clear past the threshold. The
   page still scrolls up and down and zooms: sideways is the script's. */
.mwfc .mwfc-stand > summary { position: relative; }
@media (pointer: coarse) {
	.mwfc .mwfc-stand > summary { touch-action: pan-y pinch-zoom; }
}
.mwfc .mwfc-stand.mwfn-swiping { overflow-x: clip; }
.mwfc .mwfc-stand.mwfn-swiping > summary { -webkit-user-select: none; user-select: none; }
.mwfn-cswipe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	overflow: hidden;
	pointer-events: none;
}
.mwfn-cswipe.is-in { background: linear-gradient(90deg, #b8963e, #cdad59 55%, #e2c77d); }
.mwfn-cswipe.is-out { background: linear-gradient(270deg, #8a1c1c, #b3261e 55%, #c9443a); }
.mwfn-cswipe-ic { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; opacity: .45; transition: opacity .15s; }
.mwfn-cswipe.is-in .mwfn-cswipe-ic { left: 20px; }
.mwfn-cswipe.is-out .mwfn-cswipe-ic { right: 20px; }
.mwfn-cswipe.is-past .mwfn-cswipe-ic { opacity: 1; }
.mwfn-cswipe-ic svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
	.mwfn-cswipe-ic { transition: none; }
}
.mwfn-plan-toast .mwfn-undo-btn { display: inline-flex; align-items: center; text-decoration: none; }

/* The guides (owner, 2026-10-16): a sheet like the others, every word in the
   middle; a picture of the real controls above the words, dots for the pages */
.mwfn-guide { text-align: center; }
.mwfn-guide-page { display: flex; flex-direction: column; align-items: center; }
.mwfn-guide-art {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 320px;
	height: 150px;
	margin: 14px auto 6px;
}
/* the pages of a guide keep one height: the sheet does not jump as they turn */
.mwfn-guide.is-paged .mwfn-guide-text { min-height: 7.4em; }
.mwfn-guide-title { margin-top: 10px; text-wrap: balance; }
.mwfn-guide-text { max-width: 30rem; margin: 8px auto 0; text-align: center; }
.mwfn-guide-p { margin: 0; font: 500 .95rem/1.55 var(--mwfn-sans); color: rgba(244, 239, 228, .9); text-wrap: pretty; }
.mwfn-guide-list { display: grid; gap: 14px; margin: 14px auto 0; padding: 0; list-style: none; }
.mwfn-guide-list li { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 .92rem/1.5 var(--mwfn-sans); color: rgba(244, 239, 228, .9); text-wrap: pretty; }
.mwfn-guide-ic {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(205, 173, 89, .55);
	color: var(--mwfn-gold);
}
.mwfn-guide-ic svg { width: 17px; height: 17px; fill: none; }
.mwfn-guide-ic svg path[fill="currentColor"], .mwfn-guide-ic svg g[fill="currentColor"] { fill: currentColor; }
.mwfn-guide-note { margin: 14px 0 0; font: 500 .8rem/1.5 var(--mwfn-sans); color: rgba(244, 239, 228, .62); }
.mwfn-guide-dots { display: flex; justify-content: center; gap: 7px; margin: 18px 0 0; }
.mwfn-guide-dots[hidden] { display: none; }
.mwfn-guide-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(241, 228, 184, .3); transition: width .25s, background-color .25s; }
.mwfn-guide-dot.is-on { width: 20px; background: var(--mwfn-gold); }
.mwfn-sheet--guide .mwfn-guide-go { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.mwfn-sheet--guide .mwfn-btn[hidden] { display: none; }

/* the pictures' pieces */
.mwfn-m-bars { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mwfn-m-bar { display: block; height: 7px; border-radius: 4px; background: rgba(241, 228, 184, .55); }
.mwfn-m-bar.is-thin { height: 5px; background: rgba(241, 228, 184, .26); }
/* a catalogue card's row: the table, the producer, the badges and the star */
.mwfn-m-row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 300px;
	padding: 10px 12px;
	border: 1px solid rgba(205, 173, 89, .32);
	border-radius: 12px;
	background: rgba(255, 255, 255, .04);
	text-align: left;
}
.mwfn-m-no { font: 700 1.35rem/1 var(--mwfn-serif); color: var(--mwfn-gold); text-align: center; }
.mwfn-m-who { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mwfn-m-who b { font: 700 .9rem/1.2 var(--mwfn-serif); color: var(--mwfn-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwfn-m-medals { display: flex; align-items: center; gap: 5px; }
.mwfn-m-medal { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e9dcae, #b49a58); box-shadow: 0 0 0 1.5px rgba(244, 239, 228, .8); }
.mwfn-m-medal.is-red { background: radial-gradient(circle at 40% 35%, #b5414f, #6d1a26); }
.mwfn-m-star { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 2px; color: var(--mwfn-gold); }
.mwfn-m-star svg { width: 100%; height: 100%; overflow: visible; fill: none; transition: fill .25s, filter .25s; }
.mwfn-m-star.is-on svg { fill: currentColor; filter: drop-shadow(0 0 4px rgba(241, 228, 184, .6)); }
.mwfn-m-chip {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border: 1px solid rgba(205, 173, 89, .45);
	border-radius: 999px;
	font: 600 .7rem/1.2 var(--mwfn-sans);
	color: var(--mwfn-cream);
	white-space: nowrap;
	transition: color .2s, border-color .2s;
}
.mwfn-m-chip.is-on { border-color: transparent; color: var(--mwfn-ink); }
.mwfn-m-chip.mwfn-m-dayadd { border-color: var(--mwfn-gold); background: var(--mwfn-gold); color: var(--mwfn-ink); }
.mwfn-m-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(205, 173, 89, .25); font: 700 .62rem/18px var(--mwfn-sans); text-align: center; color: var(--mwfn-gold-light); }
.mwfn-m-chip.is-on .mwfn-m-count { background: var(--mwfn-wine); color: var(--mwfn-cream); }

/* «Pianifica»: the day for a star (owner, 2026-10-16: «each day has its own
   percorso») — a row per day the producer is there, its words in the middle:
   the day, its sezioni, the table; a day already in the percorso filled gold
   with a check. A lone «Annulla» is half the width, in the middle. */
.mwfn-daypick-q { margin-top: 8px; }
.mwfn-daypick-days { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.mwfn-daypick-day {
	display: grid;
	justify-items: center;
	gap: 4px;
	width: 100%;
	min-height: 64px;
	padding: 12px 16px;
	border: 1px solid rgba(205, 173, 89, .45);
	border-radius: 16px;
	background: rgba(0, 0, 0, .22);
	text-align: center;
	color: var(--mwfn-cream);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s, border-color .2s;
}
.mwfn-daypick-d { display: inline-flex; align-items: center; gap: 6px; font: 700 1rem/1.3 var(--mwfn-serif); color: var(--mwfn-gold-light); }
.mwfn-daypick-d svg { flex: 0 0 auto; width: 18px; height: 18px; }
.mwfn-daypick-sz { font: 700 .64rem/1.45 var(--mwfn-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mwfn-gold); }
.mwfn-daypick-tb { font: 500 .8rem/1.4 var(--mwfn-sans); color: rgba(244, 239, 228, .72); }
.mwfn-daypick-day:active { background: rgba(205, 173, 89, .16); }
.mwfn-daypick-day.is-on { border-color: var(--mwfn-gold); background: linear-gradient(180deg, #e2c77d 0%, var(--mwfn-gold) 100%); }
.mwfn-daypick-day.is-on .mwfn-daypick-d,
.mwfn-daypick-day.is-on .mwfn-daypick-sz,
.mwfn-daypick-day.is-on .mwfn-daypick-tb { color: var(--mwfn-ink); }
.mwfn-daypick-day:focus-visible { outline: 2px solid var(--mwfn-gold-light); outline-offset: 3px; }
.mwfn-daypick-actions { justify-content: center; margin-top: 18px; }
.mwfn-daypick-actions .mwfn-btn { flex: 0 1 calc((100% - 10px) / 2); }

/* the same as at the end of css/mwf-notebook.css, for these rules alone */
@media (prefers-reduced-motion: reduce) {
	.mwfn-guide-dot,
	.mwfn-m-star svg { transition: none; }
	.mwfn-star-btn svg,
	.mwfc .mwfc-medals .mwfn-star-btn::after { transition: none; }
	.mwfn-card,
	.mwfn-back,
	.mwfn-daypick-day { transition: none; }
}