/* ============================================================
   Acorem Amantes — design tokens (dark, warm "roaster's-room")
   ============================================================ */
:root {
  /* Espresso darks */
  --coffee-950:#140F0C; --coffee-900:#1B1511; --coffee-850:#221A14;
  --coffee-800:#2A2018; --coffee-750:#352920; --coffee-700:#43342A; --coffee-600:#5C4634;
  /* Kraft neutrals */
  --kraft-50:#FBF6EE; --kraft-100:#F3EADD; --kraft-200:#E2D4C2; --kraft-300:#C4B29D;
  --kraft-350:#A9977F; /* testo di servizio su superfici inset: ≥4.5:1 ovunque (placeholder, unit) */
  --kraft-400:#9B8975; --kraft-500:#786A5A; --kraft-600:#5A4F43;
  /* Ember (primary) */
  --ember-300:#F0935E; --ember-400:#E87A45; --ember-500:#D9622E; --ember-600:#BC4E22;
  --ember-700:#963C1B; --ember-tint:rgba(217,98,46,.14);
  /* Amber */
  --amber-300:#F0C778; --amber-400:#E8A23D; --amber-500:#D2862A;
  /* Sage (secondary) */
  --sage-300:#A9C6AE; --sage-400:#8DAE94; --sage-500:#6E9079; --sage-600:#54725D;
  --sage-tint:rgba(141,174,148,.14);
  /* Semantic */
  --success-400:#7FB079; --warning-400:#E5B14A; --warning-500:#C9912F;
  --danger-400:#E06A60; --danger-500:#C44C42; --info-400:#79A6BC;
  /* Roast development ramp */
  --roast-green:#97A567; --roast-yellow:#D7B557; --roast-cinnamon:#B6824A;
  --roast-city:#8C5A35; --roast-fullcity:#603C25; --roast-dark:#3C2719;
  /* Semantic aliases */
  --bg-page:var(--coffee-950); --bg-base:var(--coffee-900);
  --surface-raised:var(--coffee-850); --surface-card:var(--coffee-800);
  --surface-inset:var(--coffee-750); --surface-hover:var(--coffee-750);
  --border-subtle:rgba(243,234,221,.07); --border-default:rgba(243,234,221,.12);
  --border-strong:var(--coffee-700); --border-focus:var(--ember-500);
  --text-primary:var(--kraft-100); --text-secondary:var(--kraft-300);
  --text-muted:var(--kraft-400); --text-faint:var(--kraft-500); --text-on-accent:#1B1511;
  --accent:var(--ember-500); --accent-hover:var(--ember-400); --accent-press:var(--ember-600);
  --accent-wash:var(--ember-tint); --accent-2:var(--sage-400); --accent-2-wash:var(--sage-tint);
  --focus-ring:rgba(217,98,46,.45);
  /* Type */
  --font-display:'Spectral',Georgia,serif;
  --font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* Radii */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 2px 6px rgba(0,0,0,.4);
  --shadow-md:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --edge-highlight:inset 0 1px 0 rgba(243,234,221,.04);
  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --tracking-caps:.12em;
}

/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; width:100%; max-width:100%; overflow-x:hidden;}
body{
  margin:0; font-family:var(--font-sans); font-size:15px; line-height:1.5;
  color:var(--text-primary);
  background:radial-gradient(130% 95% at 50% 0%, #221A14 0%, #100C09 62%) fixed, var(--bg-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; width:100%; max-width:100%; overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;font-weight:400;}
p{margin:0;}
button{font-family:inherit;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:2px solid var(--border-focus); outline-offset:2px;}
::selection{background:var(--accent-wash); color:var(--text-primary);}
::-webkit-scrollbar{width:0;height:0;}
::placeholder{color:var(--kraft-350); opacity:1;}
@keyframes aa-spin{to{transform:rotate(360deg);}}
@keyframes aa-fade{from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:translateY(0);}}
@keyframes aa-sheet-up{from{transform:translateY(100%);} to{transform:translateY(0);}}
@keyframes aa-fade-still{from{opacity:0;} to{opacity:1;}}
@keyframes aa-pulse{50%{opacity:.45;}}
/* Espansore di area tocco (≥44px) per controlli visivamente piccoli: il ::before
   trasparente estende l'hit area senza cambiare il disegno. */
.hit44::before{content:""; position:absolute; left:50%; top:50%;
  width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%);}

/* ---- shell ---- */
/* Ancorato al viewport DINAMICO (100dvh, con 100vh di fallback) invece che al layout
   viewport: così la barra indirizzi mobile non taglia il fondo e la CTA (#mainwrap,
   absolute bottom:0) resta sempre raggiungibile. */
#shell{position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh;
  width:100%; max-width:100vw; display:flex; flex-direction:column; overflow:hidden;}
#appheader{flex:none;}
#view{flex:1; min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior-x:none; -webkit-overflow-scrolling:touch;}
.screen{display:flex; flex-direction:column; width:100%; min-width:0; max-width:100%; gap:14px; padding:14px 14px 96px; animation:aa-fade var(--dur-base) var(--ease-out);}
.screen > *{min-width:0; max-width:100%;}

/* ---- header ---- */
.tgheader{
  display:flex; align-items:center; gap:10px; height:54px; flex:none;
  padding:0 8px 0 8px; background:rgba(20,15,12,.92);
  border-bottom:1px solid var(--border-subtle); position:relative; z-index:5;
  backdrop-filter:saturate(120%) blur(6px);
}
.tgheader .logo{width:34px; height:34px; margin-left:4px; display:flex; align-items:center; justify-content:center;}
.tgheader .htitle{flex:1; min-width:0;}
.tgheader .htitle .t{font-size:15.5px; font-weight:600; color:var(--text-primary); line-height:1.12;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tgheader .htitle .s{font-size:11.5px; color:var(--sage-400); line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tgheader.centered .htitle{text-align:center;}
.backbtn{display:flex; align-items:center; gap:1px; background:none; border:none; color:var(--ember-400);
  cursor:pointer; padding:11px 6px; min-height:44px; font-size:15px;}
.hicon{display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  background:none; border:none; color:var(--text-secondary); cursor:pointer; border-radius:var(--radius-md);}
.hicon:active{background:var(--surface-hover);}

/* ---- avatar ---- */
.avatar{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:50%; overflow:hidden;
  background:var(--ember-tint); color:var(--ember-300); border:1px solid var(--border-default);
  font-weight:600; font-size:13px;}
.hdr-icon{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:34px; height:34px; border-radius:50%; cursor:pointer; padding:0; position:relative;
  background:var(--surface-inset); color:var(--ember-400); border:1px solid var(--border-default);
  transition:border-color var(--dur-fast), background var(--dur-fast);}
.hdr-icon:active{background:var(--ember-tint); border-color:var(--ember-600);}

/* ---- main button (custom bottom CTA) ---- */
#mainwrap{position:absolute; left:0; right:0; bottom:0; flex:none; padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, var(--coffee-950) 58%, transparent); z-index:6;}
/* 19px/600 = large text WCAG (≥18.66px bold): kraft-50 su ember-500 (3.4:1) passa la soglia 3:1 */
.mainbtn{width:100%; height:50px; border:none; border-radius:var(--radius-md); cursor:pointer;
  background:var(--ember-500); color:var(--kraft-50); font-size:19px; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:var(--shadow-md);
  transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast);}
.mainbtn:active{transform:translateY(1px); background:var(--ember-600);}
.mainbtn.sage{background:var(--sage-500);} .mainbtn.sage:active{background:var(--sage-600);}
.mainbtn[disabled]{opacity:.55; cursor:default;}

/* ---- card ---- */
.card{background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm), var(--edge-highlight);}
.card.pad{padding:14px;}
/* card cliccabile = vero <button> (tastiera/screen-reader) con feedback al tocco */
button.card{font:inherit; text-align:left; width:100%; color:var(--text-primary); cursor:pointer;
  transition:background var(--dur-fast);}
button.card:active{background:var(--surface-hover);}
.inset{background:var(--surface-inset); border-radius:var(--radius-md);}

/* ---- typography helpers ---- */
.display{font-family:var(--font-display);}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.overline{font-size:11px; text-transform:uppercase; letter-spacing:var(--tracking-caps);
  color:var(--text-muted); font-weight:600;}

/* ---- badge ---- */
.badge{display:inline-flex; align-items:center; gap:6px; height:24px; padding:3px 10px;
  border-radius:var(--radius-pill); font-size:13px; font-weight:500; line-height:1; white-space:nowrap;}
.badge .dot{width:6px; height:6px; border-radius:50%; flex:none;}
.badge.neutral{color:var(--kraft-200); background:rgba(243,234,221,.08);}
.badge.sage{color:var(--sage-300); background:var(--sage-tint);}
.badge.sage-solid{color:var(--text-on-accent); background:var(--sage-500);}
.badge.warning{color:var(--warning-400); background:rgba(229,177,74,.14);}
.badge.warning .dot{background:var(--warning-500);}
.badge.ember{color:var(--ember-300); background:var(--ember-tint);}

/* ---- tag ---- */
.tag{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px;
  border-radius:var(--radius-pill); border:1px solid var(--border-strong);
  background:var(--surface-card); color:var(--text-secondary); font-size:13px; font-weight:500;
  white-space:nowrap; transition:background var(--dur-fast), border-color var(--dur-fast);}
.tag.swatch{padding:0 10px 0 8px;}
.tag .sw{width:9px; height:9px; border-radius:50%; flex:none;}
.tag.clickable{cursor:pointer;}
.tag.selected{border-color:var(--accent); background:var(--accent-wash); color:var(--ember-300);}

/* ---- roast level chip ---- */
.roastchip{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px 0 10px;
  border-radius:var(--radius-pill); background:var(--surface-card); border:1px solid var(--border-strong);}
.roastchip.sm{height:24px; padding:0 10px 0 8px;}
.roastchip .rd{width:16px; height:16px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);}
.roastchip.sm .rd{width:12px; height:12px;}
.roastchip .rl{font-size:13px; font-weight:500; color:var(--text-primary);}
.roastchip.sm .rl{font-size:12px;}
.roastchip .ra{font-family:var(--font-mono); font-size:12px; color:var(--text-muted);
  border-left:1px solid var(--border-default); padding-left:8px;}

/* ---- stat ---- */
.stat{display:flex; flex-direction:column; gap:4px;}
.stat .sl{font-size:12px; font-weight:500; color:var(--text-muted);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;}
.stat .sv{display:flex; align-items:baseline; gap:5px;}
.stat .sv .num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:25px;
  font-weight:500; color:var(--text-primary); line-height:1.05; letter-spacing:-.01em;}
.stat .sv .num.accent{color:var(--accent);}
.stat .sv .u{font-family:var(--font-mono); font-size:12px; color:var(--text-muted);}
.statbox{padding:10px 12px;}
/* il valore si ancora in basso nella cella (stretch della grid) → numeri allineati
   nella riga anche quando una label va a capo; righe tutte-1-riga restano compatte */
.statbox .sv{margin-top:auto;}
.statbox .num{font-size:21px;}

/* ---- tabs ---- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border-default);
  overflow-x:auto; scrollbar-width:none;}
.tab{position:relative; background:transparent; border:none; cursor:pointer; padding:12px 13px;
  margin-bottom:-1px; min-height:44px; font-size:15px; font-weight:500; color:var(--text-muted);
  display:inline-flex; align-items:center; gap:7px; flex:none; white-space:nowrap;
  transition:color var(--dur-fast);}
.tab .c{font-family:var(--font-mono); font-size:12px; color:var(--text-muted);}
.tab.active{font-weight:600; color:var(--text-primary);}
.tab.active .c{color:var(--accent);}
.tab .bar{position:absolute; left:8px; right:8px; bottom:0; height:2px; border-radius:2px 2px 0 0;
  background:transparent; transition:background var(--dur-fast);}
.tab.active .bar{background:var(--accent);}

/* ---- search ---- */
.search{display:flex; align-items:center; gap:10px; background:var(--surface-inset);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:0 12px; height:44px;}
.search input{flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text-primary); font-size:14px;}

/* ---- form fields ---- */
.field{display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; max-width:100%;}
.field > label{font-size:13px; color:var(--text-secondary); font-weight:500;}
.ctrl{display:flex; align-items:center; height:44px; background:var(--surface-inset);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:0 12px; gap:8px;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);}
.ctrl:focus-within{border-color:var(--border-focus); box-shadow:0 0 0 3px var(--focus-ring);}
.ctrl input{flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text-primary); font-size:15px;}
.ctrl input[inputmode],.ctrl.num input{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.ctrl .unit{color:var(--kraft-350); font-family:var(--font-mono); font-size:13px; flex:none;}
.fieldhint{font-size:11px; color:var(--text-muted); font-family:var(--font-mono); margin-top:5px; min-height:13px;}
/* marcatori non validi (card 9dp4umr): bordo danger a campo NON in editing
   (durante la digitazione resta il focus ring ember), hint di errore in danger */
.ctrl.invalid:not(:focus-within){border-color:var(--danger-400);}
.fieldhint.err{color:var(--danger-400);}
.selwrap{position:relative; height:44px;}
.selwrap select{appearance:none; -webkit-appearance:none; width:100%; height:100%;
  background:var(--surface-inset); border:1px solid var(--border-strong); border-radius:var(--radius-md);
  color:var(--text-primary); font-size:15px; padding:0 36px 0 12px; cursor:pointer; outline:none;}
.selwrap select:focus{border-color:var(--border-focus); box-shadow:0 0 0 3px var(--focus-ring);}
.selwrap .chev{position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:var(--text-muted); font-size:12px;}

/* Combobox verdi (web/shared.js): ricerca fuzzy + opzioni complete. La lista è un
   overlay operativo, quindi usa shadow-lg secondo la regola Overlay-Only. */
.green-combo-slot,.combo{position:relative; width:100%; min-width:0; max-width:100%;}
.combo > input{width:100%; height:44px; background:var(--surface-inset); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); color:var(--text-primary); font:inherit; font-size:15px;
  min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:0 34px 0 12px; outline:none; transition:border-color var(--dur-fast), box-shadow var(--dur-fast);}
.combo > input::placeholder{color:var(--kraft-350);}
.combo > input:focus{border-color:var(--border-focus); box-shadow:0 0 0 3px var(--focus-ring);}
.combo > .chev{position:absolute; right:12px; top:22px; transform:translateY(-50%); pointer-events:none;
  color:var(--text-muted); font-size:12px;}
.combo-list{position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:10;
  width:100%; min-width:0; max-width:100%; max-height:min(280px,45dvh); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  background:var(--surface-raised); border:1px solid var(--border-default); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); padding:4px;}
.combo-opt{display:flex; align-items:center; min-height:44px; padding:9px 10px; border-radius:var(--radius-sm);
  width:100%; min-width:0; max-width:100%; cursor:pointer; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere;}
.combo-opt > *{min-width:0; max-width:100%;}
.combo-opt:hover,.combo-opt:active,.combo-opt.hi{background:var(--surface-inset);}
.combo-empty{padding:11px 10px; color:var(--text-muted); font-size:12.5px;}
.green-combo-label{color:var(--text-primary); overflow-wrap:anywhere; word-break:break-word;}

textarea.ta{width:100%; resize:vertical; background:var(--surface-inset);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text-primary);
  font-size:15px; line-height:1.5; padding:10px 12px; outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);}
textarea.ta:focus{border-color:var(--border-focus); box-shadow:0 0 0 3px var(--focus-ring);}

.section{display:flex; flex-direction:column; width:100%; min-width:0; max-width:100%; gap:12px;}
.row2{display:flex; gap:10px;}
.row2 > *{flex:1; min-width:0;}
/* telefoni piccoli (≤380px): impila le coppie così i box input non si disallineano se una label va a capo */
@media (max-width:380px){ .row2{flex-direction:column; gap:14px;} }

/* ---- slider ---- */
.slider{display:flex; flex-direction:column; gap:6px;}
.slider .top{display:flex; justify-content:space-between; font-size:13px;}
.slider .top .lab{color:var(--text-secondary);}
.slider .top .val{font-family:var(--font-mono); color:var(--ember-300); font-weight:500;}
.slider input[type=range]{width:100%; accent-color:var(--ember-500);}

/* ---- photos placeholder ---- */
.photo{flex:1; aspect-ratio:4/3; background:var(--surface-inset); border:1px dashed var(--border-strong);
  border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; color:var(--kraft-350); font-size:11px;}

/* ---- import card ---- */
.importcard{display:flex; align-items:center; width:100%; min-width:0; max-width:100%; gap:12px; padding:14px; border-radius:var(--radius-lg);
  background:var(--sage-tint); border:1px solid var(--sage-500);}
.importcard.empty{background:var(--accent-wash); border-color:var(--ember-600);}
.importcard > svg,.importcard > .badge{flex:none;}
.importcard-copy{flex:1 1 0; min-width:0; max-width:100%; overflow:hidden;}
.importcard .ititle{font-size:14.5px; font-weight:600; color:var(--text-primary);}
.importcard .isub{display:flex; width:100%; min-width:0; max-width:100%; font-size:12.5px; color:var(--text-muted);}
.import-filename{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.import-points{flex:none; white-space:nowrap;}

/* ---- misc ---- */
.muted{color:var(--text-muted); font-size:14px; text-align:center; padding:36px 16px; line-height:1.6;}
.spin{width:22px; height:22px; border-radius:50%; border:2.5px solid var(--coffee-700);
  border-top-color:var(--ember-500); animation:aa-spin .7s linear infinite;}
.loader{display:flex; align-items:center; justify-content:center; padding:56px 0;}
.notes-q{font-family:var(--font-display); font-style:italic; font-size:14.5px; color:var(--text-secondary);
  line-height:1.55;}

/* ---- bottom sheet ---- */
#scrim{position:fixed; inset:0; background:rgba(8,5,4,.6); z-index:40; display:none;}
#scrim.open{display:block;}
.sheet{position:absolute; left:0; right:0; bottom:0; background:var(--surface-raised);
  border-top:1px solid var(--border-default); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow:var(--shadow-lg);
  animation:aa-sheet-up var(--dur-base) var(--ease-out);}
.sheet .grab{width:36px; height:4px; border-radius:2px; background:var(--coffee-700); margin:0 auto 14px;}
.sheet h3{font-family:var(--font-display); font-size:20px; font-weight:500; margin-bottom:8px;}
.sheet p{font-size:14px; color:var(--text-secondary); line-height:1.55;}
.sheet .acts{margin-top:18px;}

/* ---- login gate (Mini App aperta dal browser, fuori da Telegram) ---- */
#gate{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:20px;
  background:radial-gradient(120% 90% at 50% 0%, #221A14 0%, #100C09 70%); z-index:60;}
#gate.open{display:flex;}
.gatecard{width:min(360px,92vw); background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:28px; text-align:center;}
.gatecard h2{font-family:var(--font-display); font-size:23px; font-weight:500; margin:14px 0 6px;}
.gatecard p{font-size:13.5px; color:var(--text-muted); line-height:1.55; margin-bottom:18px;}
.gate-err{color:var(--danger-400); font-size:13px; margin-top:10px; min-height:18px;}
#tg-login-slot{display:flex; justify-content:center; margin-top:6px; min-height:48px;}

/* X di clear dei campi ricerca (es. .cpick-q, type=search) coerente col tema:
   il bottone nativo WebKit era il blu di sistema. Mask + background = glifo kraft. */
input[type=search]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; height:15px; width:15px; flex:none; cursor:pointer;
  background:var(--kraft-350);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>') center/contain no-repeat;
}

/* ---- reduced motion (in coda: vince sulle regole base a pari specificità) ----
   Alternativa per OGNI animazione (PRODUCT.md): niente slide/rise/spin,
   solo crossfade o pulsazione di opacità. */
@media (prefers-reduced-motion: reduce){
  .screen{animation:aa-fade-still var(--dur-base) var(--ease-out);}
  .sheet{animation:aa-fade-still var(--dur-base) var(--ease-out);}
  .spin{animation:aa-pulse 1.2s ease-in-out infinite; border-top-color:var(--coffee-700); border-color:var(--ember-500);}
  .mainbtn{transition:background var(--dur-fast) var(--ease-out);}
  .mainbtn:active{transform:none;}
}