/* =====================================================================
   THE NOTEBOOK PAGE ON PHONES — up to 760px wide («MWF Digital
   Companion»; the user, 2026-10-31: «a UI overhaul to better fit all the
   content on the page, split mobile and desktop review into their own
   slices»). Loaded last on the notebook page with media "(max-width:
   760px)" (inc/mwf-notebook-layout.php): it never applies on a wider
   screen. An element this slice adds carries .mwfn-only-phone.

   What a phone gets (the review of 2026-10-31: the title and the account's
   card took the whole first screen, the band of tabs scrolled away with
   the page, every view began with its words over again):
   - the title on the wine ground in a few lines, «Come funziona» under it;
     the counts the cream sheet's own first line (no pill: the user,
     2026-10-31); every text at the page's own size or larger;
   - the account's word (signed out) a compact card, its two actions in a
     foot bar under a hairline (half each; one alone a centred half);
   - the notebook one cream sheet from edge to edge — the band at its top,
     «Porta con te» its last part;
   - the band sticks under the site's bar: away while the page goes down,
     back as soon as the reader goes up (js/mwf-notebook-phone.js:
     .is-ph-stuck, .is-ph-away, --mwfn-ph-top); the diary's filters and
     «I miei vini»'s categories just under it, in the page (.mwfn-ph-under);
   - the views' words and cards measured for a phone; the assistant's
     field kept at the foot of the screen while the chat is read.
   ===================================================================== */

/* ------------------------------------------------ the title */
/* the wine ground goes on under the sheet down to the footer, as on every screen (2026-10-31: the page's
   padding here had been taken away, and the sheet's last bottom margin fell out of the page — a white strip
   over the footer): the page's own 2.5rem padding stays, «Porta con te» keeps the panels' .9rem margin */
/* the page's own type sizes everywhere (the user, 2026-10-31: «people are having trouble reading paragraph
   text»): only the spacing is closer; the title alone is smaller than on a wide screen */
.mwfn-log-hero { padding: 1.1rem 1rem 1rem; }
.mwfn-log-kicker { letter-spacing: .18em; text-wrap: balance; }
.mwfn-log-h1 { margin-top: .35rem; font-size: clamp(1.5rem, 7vw, 2.2rem); }
.mwfn-log-lead { max-width: 30rem; margin: .55rem auto 0; text-wrap: pretty; }
.mwfn-log-helpline { margin: .75rem 0 0; }
.mwfn-log-help { min-height: 44px; }
@media (max-width: 374px) {
	.mwfn-log-hero { padding-right: .75rem; padding-left: .75rem; }
}

/* ------------------------------------------------ the counts: the sheet's own first line */
/* no pill over the title (the user, 2026-10-31: «integrate it directly into the div element … not as
   pill»): «26 vini · 12 produttori» opens the cream sheet, between two gold hairlines, above the band
   (js/mwf-notebook-phone.js moves [data-mwfn-stats] there and back) */
.mwfn-log-main > .mwfn-log-stats {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0;
	padding: 1.05rem 0 .15rem;
	border: 0;
	border-radius: 0;
	background: none;
	font: 700 1rem/1.3 var(--mwfn-serif);
	letter-spacing: .01em;
	color: var(--mwfn-wine);
	text-align: center;
}
.mwfn-log-main > .mwfn-log-stats[hidden] { display: none; }
.mwfn-log-main > .mwfn-log-stats::before,
.mwfn-log-main > .mwfn-log-stats::after {
	content: "";
	flex: 1 1 0;
	min-width: 1.5rem;
	height: 1px;
	background: linear-gradient(90deg, rgba(205, 173, 89, 0), rgba(205, 173, 89, .8));
}
.mwfn-log-main > .mwfn-log-stats::after { background: linear-gradient(90deg, rgba(205, 173, 89, .8), rgba(205, 173, 89, 0)); }

/* ------------------------------------------------ the account's card (signed out) */
/* under the band (js: .mwfn-ph-under), still above the list: a white card on the sheet, its gold line on top */
.mwfn-log-body { padding: 0; }
.mwfn-acc { margin: 0 .75rem .8rem; padding: .95rem 1rem .9rem; border-radius: 18px; scroll-margin-top: 8rem; }
.mwfn-ph-under > .mwfn-acc { margin: .35rem 0 .75rem; background: #fff; }
.mwfn-ph-under > .mwfn-acc:not(.is-in) { box-shadow: 0 12px 24px -20px rgba(40, 25, 27, .55), inset 0 3px 0 var(--mwfn-gold); }
.mwfn-acc .mwfn-log-h2 { margin-bottom: .35rem; text-wrap: balance; }
.mwfn-acc .mwfn-log-text { text-wrap: pretty; }
/* its actions in a foot bar: «Salva nel mio account» | «Ho già un account: accedi» */
.mwfn-acc-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.mwfn-acc-out[hidden] { display: none; }
.mwfn-acc-out > .mwfn-log-h2,
.mwfn-acc-out > .mwfn-log-text { grid-column: 1 / -1; }
.mwfn-acc-out > .mwfn-log-text { margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--mwfn-line); }
.mwfn-acc-out > .mwfn-acc-main,
.mwfn-acc-out > .mwfn-log-link { width: auto; max-width: none; min-height: 48px; margin: 0; }
.mwfn-acc-out > .mwfn-acc-main { display: flex; padding: 8px 10px; letter-spacing: .1em; }
.mwfn-acc-out > .mwfn-log-link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px;
	border: 1px solid rgba(140, 109, 31, .55);
	border-radius: 14px;
	font: 700 .74rem/1.25 var(--mwfn-sans);
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}
/* one alone (an empty notebook: «Accedi»): a centred half, never the whole bar */
.mwfn-acc-out > .mwfn-acc-main[hidden] { display: none; }
.mwfn-acc-out > [data-mwfn-save][hidden] ~ [data-mwfn-signin] { grid-column: 1 / -1; justify-self: center; width: calc((100% - 10px) / 2); }

/* ------------------------------------------------ the notebook: one sheet, edge to edge */
.mwfn-log-main {
	margin: 0;
	padding: 0 1rem 1.6rem;
	border-radius: 26px 26px 0 0;
	box-shadow: 0 -20px 40px -32px rgba(0, 0, 0, .85);
}
/* «Porta con te»: the sheet's last part, under a hairline; under it the panels' own margin and the page's
   padding, on the wine ground */
.mwfn-log-keep {
	margin: 0 0 .9rem;
	padding: 1.3rem 1rem 1rem;
	border-top: 1px solid var(--mwfn-line);
	border-radius: 0 0 26px 26px;
	box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .85);
}

/* ------------------------------------------------ the band, under the site's bar */
.mwfn-log-tools {
	position: -webkit-sticky;
	position: sticky;
	top: var(--mwfn-ph-top, 0px);
	z-index: 20;
	margin: 0 -1rem;
	padding: .65rem 1rem .6rem;
	border-radius: 26px 26px 0 0;
	background: var(--mwfn-paper);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .25s, border-radius .25s, top .38s cubic-bezier(.4, 0, .2, 1);
}
.mwfn-log-tools.is-ph-stuck { border-radius: 0; box-shadow: 0 14px 22px -18px rgba(40, 25, 27, .75); }
/* reading down: up behind the site's bar (a transform: nothing under it moves; still in the page for a
   keyboard or a reader's tool, which bring it back by going to it — js focusin, a scroll up) */
.mwfn-log-tools.is-ph-away {
	box-shadow: none;
	transform: translate3d(0, calc(-100% - var(--mwfn-ph-top, 0px) - 10px), 0);
}
/* the «?» bar's field in use (the glass-search lane, 2026-10-31): the site's bar slides away, the band's top with it */
html.mwfg-hdr-away .mwfn-log-tools { top: 0; }
html.mwfg-hdr-away .mwfn-log-tools.is-ph-away { transform: translate3d(0, calc(-100% - 10px), 0); }
html.mwfg-hdr-quick .mwfn-log-tools { transition: none; }
.mwfn-ph-sentinel { height: 0; }
/* under the band, in the page: its first-time line, the diary's filters, «I miei vini»'s categories */
.mwfn-ph-under:empty { display: none; }
.mwfn-ph-under > .mwfn-band-hint { margin: 0 0 .15rem; }
.mwfn-ph-under > .mwfn-chips,
.mwfn-ph-under > .mwfn-catf { margin-top: .45rem; }

/* ------------------------------------------------ sentences small on every screen, raised on a phone */
/* (labels stay as they are: kickers, dates, counts, places; these are words to be read) */
.mwfn-welcome-acc-p,
.mwfn-eggs-sec-p,
.mwfn-eggs-local,
.mwfn-egg-hint,
.mwfn-chat-doc-p,
.mwfn-plan-liftline,
.mwfn-sched-end,
.mwfn-pcard-unplaced,
.mwfn-chat-note { font-size: .95rem; line-height: 1.5; }

/* ------------------------------------------------ a finger's size: every chip and small control 44px high */
.mwfn-log .mwfn-chip,
.mwfn-log .mwfn-route-day,
.mwfn-log button.mwfn-sched-dur,
.mwfn-log .mwfn-times-dayb { min-width: 44px; min-height: 44px; }
.mwfn-log .mwfn-pcard-grip { width: 44px; height: 44px; }
.mwfn-chat-delete { min-height: 44px; }

/* ------------------------------------------------ the views' openings: closer, their words at a reading size */
/* never under the page's own sizes; the short leads, .86rem on every screen before, at .95rem here */
.mwfn-plan { margin-top: .75rem; }
.mwfn-route-lead,
.mwfn-mine-lead,
.mwfn-chat-lead { font-size: .95rem; line-height: 1.55; }
.mwfn-fm { margin-top: .75rem; }
.mwfn-route { margin-top: .75rem; }
.mwfn-day { margin-top: 1.25rem; }
/* «Pianifica»: the planner's dark card, closer */
.mwfn-planner { margin: .85rem 0 1rem; padding: 16px 16px 14px; }
.mwfn-planner-p { margin-top: 6px; font-size: .95rem; line-height: 1.55; }
.mwfn-planner .mwfn-plan-addbar { margin-top: 12px; }
/* the welcome and the achievements: their dark heads, closer */
.mwfn-welcome { gap: .7rem; padding-top: .25rem; }
.mwfn-welcome-hero { padding: 1.15rem 1rem 1.05rem; }
.mwfn-welcome-lead { margin-top: .5rem; }
/* a card: its icon and its name on the first line, the words under them across the card */
.mwfn-welcome-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem .75rem; padding: .85rem .95rem 0; }
.mwfn-welcome-card > .mwfn-ach-ico { width: 2.4rem; height: 2.4rem; }
.mwfn-welcome-card-h { margin: 0; }
.mwfn-welcome-card-p,
.mwfn-welcome-go { grid-column: 1 / -1; }
.mwfn-welcome-card-p { margin: 0 0 .3rem; font-size: 1rem; line-height: 1.55; }
.mwfn-welcome-go { margin: 0 -.95rem; }
/* its account's word: the two actions as halves, one alone a centred half */
.mwfn-welcome-acc { padding: 1rem .9rem; }
.mwfn-welcome-acc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mwfn-welcome-acc-row .mwfn-btn { max-width: none; min-height: 48px; padding: 8px 10px; letter-spacing: .1em; }
.mwfn-welcome-acc-row > .mwfn-btn:only-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 10px) / 2); }
/* the empty notebook's way on: as wide as its words */
.mwfn-log-empty { padding: .6rem .25rem .2rem; }
.mwfn-log-empty-p { margin-top: .5rem; }
.mwfn-log-go { width: auto; max-width: 100%; margin-top: 1rem; padding: 10px 26px; }
.mwfn-eggs { padding-top: .25rem; }
.mwfn-eggs-head { padding: 1.1rem 1rem 1rem; }
.mwfn-eggs-head > .mwfn-ach-ico { width: 2.8rem; height: 2.8rem; }
.mwfn-eggs-h { margin-top: .45rem; }
.mwfn-eggs-lead { margin-top: .45rem; font-size: .95rem; line-height: 1.55; }
.mwfn-eggs-count { margin-top: .75rem; }
.mwfn-eggs-sec { margin-top: 1.5rem; }
.mwfn-eggs-sec + .mwfn-eggs-sec { padding-top: 1.3rem; }

/* ------------------------------------------------ «I miei vini»: the cards */
/* the rating and the day on the first line, the wine's name under them across the whole card (owner,
   2026-10-15, the producer page's wines: «no empty column under the award») */
.mwfn-wines { gap: 12px; margin-top: .8rem; }
.mwfn-wine,
.mwfn-wine.mwfn-swipeable > .mwfn-face { padding: 14px 14px 12px; }
.mwfn-wine-head { grid-template-columns: 46px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 0; }
.mwfn-wine-headtext { display: contents; }
.mwfn-wine-head > .mwfn-item-badge { grid-row: 1; grid-column: 1; }
.mwfn-wine-headtext > .mwfn-item-meta { grid-row: 1; grid-column: 2; margin: 0; }
.mwfn-wine-headtext > .mwfn-wine-title { grid-column: 1 / -1; margin-top: 10px; }
/* the grapes under the name, read on every card: .95rem (.84rem before) */
.mwfn-wine-headtext > .mwfn-item-sub { grid-column: 1 / -1; }
.mwfn-log .mwfn-item-sub { font-size: .95rem; line-height: 1.45; }
.mwfn-wine-line { margin-top: 10px; }
.mwfn-wine-producer { margin-top: 12px; padding: 9px 12px; }
/* its actions in a foot bar under a hairline: two exact halves (a flex share leaves the outlined one its
   border wider), one alone a centred half */
.mwfn-wine-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mwfn-line); }
.mwfn-wine-actions .mwfn-btn { min-height: 48px; padding: 8px 10px; letter-spacing: .1em; }
.mwfn-wine-actions > .mwfn-btn:only-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 10px) / 2); }

/* ------------------------------------------------ «Assistente»: the field at the foot of the screen */
/* while the chat is read, its field stays in reach (as a messenger's); the gold «?» steps up over it
   (js/mwf-glass.js keepClear: .mwfn-chat-form) */
.mwfn-chat { gap: .7rem; }
.mwfn-chat-form {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index: 6;
	margin: 0 -1rem;
	padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom, 0px));
	background: var(--mwfn-paper);
	box-shadow: 0 -14px 22px -18px rgba(40, 25, 27, .7);
}
.mwfn-chat-log > *,
.mwfn-chat-try { scroll-margin-bottom: 6rem; }
/* the 14 days: a warning to be read, at .95rem (.8rem before) */
.mwfn-chat-life { padding: .6rem .85rem .6rem 2.3rem; font-size: .95rem; line-height: 1.45; }
.mwfn-chat-life::before { left: .75rem; top: .68rem; }
.mwfn-chat-bubble { max-width: 94%; }

/* ------------------------------------------------ «Porta con te»: closer */
.mwfn-keep-art svg { width: 150px; margin-bottom: .35rem; }
.mwfn-log-keep .mwfn-log-h2 { text-wrap: balance; }
.mwfn-keep-note .mwfn-log-text { text-wrap: pretty; }
.mwfn-keep-perks { gap: 6px; margin-top: .75rem; }
.mwfn-keep-perks li { font-size: .95rem; }
.mwfn-keep-pdf { margin-top: 1rem; padding: 1.1rem 1rem 1rem; }
.mwfn-keep-pdf-ico { width: 2.4rem; height: 2.4rem; }
.mwfn-keep-pdf-p { font-size: .95rem; line-height: 1.55; }
.mwfn-keep-pdf .mwfn-btn { margin-top: .6rem; }
.mwfn-keep-note .mwfn-log-actions { margin-top: 1rem; }
.mwfn-keep-note .mwfn-log-actions .mwfn-btn { min-height: 48px; padding: 8px 10px; letter-spacing: .1em; }
.mwfn-keep-note:not([hidden]) ~ .mwfn-switch { margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
	.mwfn-log-tools,
	.mwfn-log-tools.is-ph-away { transition: none; }
}