/* ==========================================================================
   ZakoGo — design system (owner: F1)
   Tokens + reset + app shell + ALL shared components.
   Module agents add ONLY module-specific extras in their own css file.
   Mood: diario alpino tascabile, travel pop. Light theme only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font — Baloo 2, self-hosted (no external request at runtime)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/baloo2-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/baloo2-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  --snow:      #FAF9F5;   /* app ground */
  --card:      #FFFFFF;   /* content surfaces */
  --pine-900:  #123F2E;   /* primary text, dark structure */
  --pine-700:  #1E5B41;   /* brand primary, buttons */
  --pine-500:  #2E7D57;   /* brand light, active states */
  --pine-100:  #DCEDE3;   /* tinted chips/surfaces */
  --wood-300:  #EAD9BC;   /* light-wood secondary surface */
  --wood-500:  #C99B62;   /* wood accents, borders on wood */
  --ink-soft:  #4A5D53;   /* secondary text on snow/card (>=4.5:1) */
  --sunset:    #F4762C;   /* pop accent 1 — cibo, CTA highlights */
  --berry:     #D6336C;   /* pop accent 2 — frutti di bosco */
  --sky:       #2E9BD6;   /* pop accent 3 — logistica */
  --meadow:    #5FA321;   /* pop accent 4 — outdoor (darker for badge text use #47810F) */
  --sun:       #F7B32B;   /* pop accent 5 — "fatto", highlights, confetti */
  --violet:    #7A5AF8;   /* pop accent 6 — altro */
  --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --radius-pill: 999px;
  --shadow-card: 0 2px 8px rgba(18,63,46,.08), 0 8px 24px rgba(18,63,46,.07);
  --shadow-float: 0 6px 16px rgba(18,63,46,.18), 0 2px 6px rgba(18,63,46,.12);

  /* --- derived structure ------------------------------------------------- */
  --pine-800:   #174C36;            /* button hover (darker than pine-700) */
  --pine-050:   #EFF6F2;            /* faintest pine wash */
  --wood-100:   #F7F1E9;            /* wood wash */
  --line:       #E4EAE6;            /* hairlines on card */
  --line-strong:#C9D6CF;            /* input borders, handles */
  --ink-faint:  #667569;            /* tertiary text — 4.87:1 on card, 4.62:1 on snow */
  --meadow-700: #47810F;            /* spec-named darker meadow (graphics/large text) */
  --sun-700:    #C4820A;            /* darker sun — edges on sun fills (3:1 on white) */

  /* --- accent inks: text on the matching tint, all >=4.5:1 ---------------- */
  --sunset-ink: #A0490B;
  --berry-ink:  #A3134C;
  --sky-ink:    #0F5E8C;
  --meadow-ink: #3D6F0C;
  --violet-ink: #4B2ACC;
  --wood-ink:   #6B4A18;
  --sun-ink:    #8A5B00;
  --pine-ink:   var(--pine-900);

  /* --- accent tints: static fallback, then color-mix when supported ------- */
  --sunset-tint: #FDECE1;
  --berry-tint:  #F9E2EA;
  --sky-tint:    #E2F1F9;
  --meadow-tint: #E9F2E0;
  --violet-tint: #ECE8FE;
  --wood-tint:   #F7F1E9;
  --sun-tint:    #FEF4E1;
  --pine-tint:   #E2EDE7;

  /* --- shell metrics ------------------------------------------------------ */
  --tabbar-h: 62px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --gutter: 16px;

  /* --- type --------------------------------------------------------------- */
  --font-display: "Baloo 2", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-ui: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;

  /* --- motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(.2,.8,.25,1);
  --ease-spring: cubic-bezier(.2,.9,.3,1.4);

  /* --- focus -------------------------------------------------------------- */
  --focus-color: var(--pine-500);

  color-scheme: light;
}

@supports (color: color-mix(in srgb, red 10%, white)) {
  :root {
    --sunset-tint: color-mix(in srgb, var(--sunset) 14%, #fff);
    --berry-tint:  color-mix(in srgb, var(--berry) 14%, #fff);
    --sky-tint:    color-mix(in srgb, var(--sky) 14%, #fff);
    --meadow-tint: color-mix(in srgb, var(--meadow) 14%, #fff);
    --violet-tint: color-mix(in srgb, var(--violet) 14%, #fff);
    --wood-tint:   color-mix(in srgb, var(--wood-500) 14%, #fff);
    --sun-tint:    color-mix(in srgb, var(--sun) 16%, #fff);
    --pine-tint:   color-mix(in srgb, var(--pine-500) 13%, #fff);
  }
}

/* Category palettes, addressable by class OR data attribute.
   Modules may write .badge.cibo, .badge.cat-cibo or [data-cat="cibo"] — all work. */
.cibo, .cat-cibo, [data-cat="cibo"], [data-exp="cibo"] {
  --c: var(--sunset); --c-ink: var(--sunset-ink); --c-tint: var(--sunset-tint);
}
.outdoor, .cat-outdoor, [data-cat="outdoor"] {
  --c: var(--meadow); --c-ink: var(--meadow-ink); --c-tint: var(--meadow-tint);
}
.logistica, .cat-logistica, [data-cat="logistica"] {
  --c: var(--sky); --c-ink: var(--sky-ink); --c-tint: var(--sky-tint);
}
.altro, .cat-altro, [data-cat="altro"] {
  --c: var(--violet); --c-ink: var(--violet-ink); --c-tint: var(--violet-tint);
}
[data-exp="alloggio"] { --c: var(--sky);      --c-ink: var(--sky-ink);      --c-tint: var(--sky-tint); }
[data-exp="trasporti"]{ --c: var(--violet);   --c-ink: var(--violet-ink);   --c-tint: var(--violet-tint); }
[data-exp="attivita"] { --c: var(--meadow);   --c-ink: var(--meadow-ink);   --c-tint: var(--meadow-tint); }
[data-exp="shopping"] { --c: var(--berry);    --c-ink: var(--berry-ink);    --c-tint: var(--berry-tint); }
[data-exp="varie"]    { --c: var(--wood-500); --c-ink: var(--wood-ink);     --c-tint: var(--wood-tint); }

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--snow);
  color: var(--pine-900);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1px;
}
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { max-width: 100%; }
img { display: block; height: auto; }

a { color: var(--pine-700); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

button {
  font: inherit;
  color: inherit;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button:disabled, [aria-disabled="true"] { cursor: not-allowed; }

::selection { background: var(--pine-100); color: var(--pine-900); }

/* Focus: one ring everywhere, never removed. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.noscript {
  margin: 24px; padding: 16px 18px;
  background: var(--sun-tint); border-radius: var(--radius-md);
  color: var(--pine-900); font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Icons
   -------------------------------------------------------------------------- */

.icn {
  width: 24px; height: 24px;
  flex: 0 0 auto;
  display: block;
  vertical-align: middle;
  stroke-width: 2;
  overflow: visible;
}
.icn-14 { width: 14px; height: 14px; stroke-width: 2.4; }
.icn-16 { width: 16px; height: 16px; stroke-width: 2.3; }
.icn-18 { width: 18px; height: 18px; stroke-width: 2.2; }
.icn-20 { width: 20px; height: 20px; stroke-width: 2.1; }
.icn-28 { width: 28px; height: 28px; stroke-width: 1.9; }
.icn-32 { width: 32px; height: 32px; stroke-width: 1.8; }
.icn-40 { width: 40px; height: 40px; stroke-width: 1.7; }

.scene { width: 100%; max-width: 210px; height: auto; display: block; }

/* --------------------------------------------------------------------------
   5. App shell
   -------------------------------------------------------------------------- */

#app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

/* ---- topbar ---- */

#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px calc(var(--gutter) + var(--safe-r)) 8px calc(var(--gutter) + var(--safe-l));
  padding-top: calc(8px + var(--safe-t));
  background: var(--snow);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--pine-700);
  color: var(--snow);
  box-shadow: 0 2px 6px rgba(18,63,46,.18);
}
.brand-mark .icn { width: 22px; height: 22px; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1;
  letter-spacing: .2px;
  color: var(--pine-900);
  white-space: nowrap;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.topbar-actions:empty { display: none; }

/* ---- views ---- */

#views {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    14px
    calc(var(--gutter) + var(--safe-r))
    96px
    calc(var(--gutter) + var(--safe-l));
}

.view { display: none; }
.view.is-active {
  display: block;
  animation: view-in 160ms var(--ease-out) both;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ---- tab bar ---- */

.tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  gap: 2px;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 4px calc(6px + var(--safe-r)) calc(4px + var(--safe-b)) calc(6px + var(--safe-l));
  min-height: var(--tabbar-h);
  position: relative;
  z-index: 20;
  box-shadow: 0 -2px 14px rgba(18,63,46,.05);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 4px 2px 2px;
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  transition: color 140ms ease;
}
.tab:focus-visible { outline-offset: -2px; }

.tab-icn {
  display: grid;
  place-items: center;
  width: 46px; height: 27px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background-color 160ms var(--ease-out);
}
.tab-icn .icn { width: 22px; height: 22px; }

.tab-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1.15;
}

.tab[aria-selected="true"] { color: var(--pine-700); }
.tab[aria-selected="true"] .tab-icn { background: var(--pine-100); }
.tab[aria-selected="true"] .tab-label { font-weight: 700; }

.tab:active .tab-icn { transform: scale(.94); }

.tab-icn.is-pop { animation: tab-pop 320ms var(--ease-out); }
@keyframes tab-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: var(--pine-100);
  color: var(--pine-900);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1;
  letter-spacing: .2px;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 90ms ease, box-shadow 140ms ease;
}
.btn .icn { width: 20px; height: 20px; }
.btn:active { transform: scale(.975); }

.btn-block, .btn.block { display: flex; width: 100%; }

.btn-primary, .btn.primary {
  background: var(--pine-700);
  color: var(--snow);
  box-shadow: 0 2px 6px rgba(18,63,46,.16);
}
.btn-primary:active, .btn.primary:active { background: var(--pine-900); }

.btn-secondary, .btn.secondary {
  background: var(--pine-100);
  color: var(--pine-900);
}
.btn-secondary:active, .btn.secondary:active { background: #C5E0D1; }

.btn-danger, .btn.danger {
  background: var(--berry);
  color: #fff;
  box-shadow: 0 2px 6px rgba(163,19,76,.2);
}
.btn-danger:active, .btn.danger:active { background: #B21B55; }

.btn-quiet, .btn.quiet, .btn-ghost, .btn.ghost {
  background: transparent;
  color: var(--pine-700);
  border-color: transparent;
}
.btn-quiet:active, .btn.quiet:active, .btn-ghost:active, .btn.ghost:active { background: var(--pine-050); }

.btn-outline, .btn.outline {
  background: var(--card);
  color: var(--pine-900);
  border-color: var(--line-strong);
}

.btn-sun, .btn.sun {
  background: var(--sun);
  color: var(--pine-900);
  border-color: var(--sun-700);
}

.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  opacity: .48;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* Icon-only button — 44px touch target, no label */
.btn-icon, .icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  border: 0;
  background: transparent;
  color: var(--pine-900);
  transition: background-color 140ms ease, color 140ms ease, transform 90ms ease;
}
.btn-icon:active, .icon-btn:active { transform: scale(.93); background: var(--pine-050); }
.btn-icon:disabled, .icon-btn:disabled { opacity: .45; pointer-events: none; }

.btn-icon.on-tint, .icon-btn.on-tint { background: var(--pine-100); }
.btn-icon.danger, .icon-btn.danger { color: var(--berry-ink); }

/* Text link styled as an action (e.g. "Gestisci categorie") */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--pine-700);
  font-weight: 600;
  font-size: 15.5px;
  background: none;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.link-action:active { color: var(--pine-900); }

/* --------------------------------------------------------------------------
   7. Form fields
   -------------------------------------------------------------------------- */

.field { display: block; }
.field + .field, .field + .fieldset, .fieldset + .field { margin-top: 15px; }

.label, .field > label {
  display: block;
  margin: 0 0 6px 2px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--pine-900);
}

.help, .field-help {
  margin: 6px 2px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.err, .field-error {
  display: none;
  margin: 6px 2px 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--berry-ink);
}
.err.is-on, .field-error.is-on, .field.is-invalid .err, .field.is-invalid .field-error { display: block; }

input:where(
  [type="text"], [type="time"], [type="url"], [type="number"], [type="date"],
  [type="search"], [type="tel"], [type="email"], [type="password"], :not([type])
),
textarea,
select,
.input, .textarea, .select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--pine-900);
  font-family: var(--font-ui);
  font-size: 16px;           /* 16px keeps iOS from zooming on focus */
  line-height: 1.35;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }

input:where([type="text"], [type="time"], [type="url"], [type="number"], [type="date"], [type="search"], [type="tel"], [type="email"], :not([type])):focus,
textarea:focus, select:focus, .input:focus, .textarea:focus, .select:focus {
  border-color: var(--pine-500);
  box-shadow: 0 0 0 3px rgba(46,125,87,.16);
  outline: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus-color);
  outline-offset: 1px;
}

input:disabled, textarea:disabled, select:disabled {
  background: var(--snow);
  color: var(--ink-faint);
  opacity: 1;
  cursor: not-allowed;
}

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"],
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select {
  border-color: var(--berry);
  box-shadow: 0 0 0 3px rgba(214,51,108,.14);
}

textarea, .textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.5;
}
textarea.auto-grow { resize: none; overflow: hidden; }
textarea[readonly] { background: var(--snow); color: var(--pine-900); }

/* Time input keeps its native picker but adopts our metrics */
input[type="time"] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .4px;
  min-height: 48px;
}
input[type="time"]::-webkit-calendar-picker-indicator { opacity: .55; }

/* Numeric fields read as numbers */
input[inputmode="decimal"], input[type="number"], .input-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

select, .select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5D53' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 9.5 12 16l6.5-6.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
}

/* Input with a leading unit / suffix */
.input-group { position: relative; display: flex; align-items: center; }
.input-group > input { padding-right: 56px; }
.input-group > .unit {
  position: absolute;
  right: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-soft);
  pointer-events: none;
}

/* Checkbox row (e.g. "Sostituisci il contenuto esistente") */
input[type="checkbox"], input[type="radio"] {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  accent-color: var(--pine-700);
  cursor: pointer;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 11px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--card);
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.check-row span { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.check-row .check-note { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.check-row:has(input:checked) { border-color: var(--pine-500); background: var(--pine-050); }
.check-row.is-warn:has(input:checked) {
  border-color: var(--sunset);
  background: var(--sunset-tint);
}
.check-row.is-warn:has(input:checked) .check-note { color: var(--sunset-ink); font-weight: 600; }

/* Quantity stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
}
.stepper button {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  color: var(--pine-700);
  transition: background-color 140ms ease;
}
.stepper button:active { background: var(--pine-100); }
.stepper button:disabled { opacity: .4; pointer-events: none; }
.stepper output, .stepper .value {
  min-width: 46px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--pine-900);
}

/* --------------------------------------------------------------------------
   8. Segmented control
   -------------------------------------------------------------------------- */

.seg {
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--pine-050);
  border: 1.5px solid var(--line);
  /* never squeeze labels: scroll instead (5 options fit on a 360px screen) */
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg-opt {
  flex: 1 1 auto;
  min-width: max-content;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.seg-opt[aria-checked="true"], .seg-opt.is-on {
  background: var(--card);
  color: var(--pine-900);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(18,63,46,.14);
}
.seg-opt:active { transform: scale(.98); }
.seg-opt:disabled { opacity: .45; pointer-events: none; }
.seg-opt:focus-visible { outline-offset: -1px; }

/* alias kept for callers that ask for the scrolling variant explicitly */
.seg.seg-scroll .seg-opt { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   9. Chips (inline actions) + icon-chip pickers
   -------------------------------------------------------------------------- */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: var(--pine-100);
  color: var(--pine-900);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.chip .icn { width: 16px; height: 16px; }

/* interactive chips get a 44px hit area without growing visually */
button.chip::before, a.chip::before {
  content: "";
  position: absolute;
  inset: -5px -2px;
}
button.chip:active, a.chip:active { transform: scale(.97); }

.chip-quiet { background: var(--snow); border-color: var(--line-strong); color: var(--ink-soft); }
.chip-accent { background: var(--c-tint, var(--pine-100)); color: var(--c-ink, var(--pine-900)); }
.chip.is-on, .chip[aria-pressed="true"] {
  background: var(--c-tint, var(--pine-100));
  border-color: var(--c, var(--pine-500));
  color: var(--c-ink, var(--pine-900));
}

/* --- icon-chip picker (categoria) --- */

.chips-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-pick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 14px 0 11px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--pine-900);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 90ms ease;
}
.chip-pick .icn { width: 19px; height: 19px; color: var(--c-ink, var(--ink-soft)); }
.chip-pick:active { transform: scale(.97); }
.chip-pick[aria-pressed="true"], .chip-pick[aria-checked="true"], .chip-pick.is-on {
  background: var(--c-tint, var(--pine-100));
  border-color: var(--c, var(--pine-500));
  color: var(--c-ink, var(--pine-900));
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--c, var(--pine-500));
}
.chip-pick[aria-pressed="true"] .icn, .chip-pick[aria-checked="true"] .icn, .chip-pick.is-on .icn {
  color: var(--c-ink, var(--pine-900));
}
.chip-pick:disabled { opacity: .45; pointer-events: none; }

/* Icon inside a tinted squircle (list rows, budget, PDF rows) */
.squircle {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 13px;
  background: var(--c-tint, var(--pine-100));
  color: var(--c-ink, var(--pine-700));
}
.squircle-lg { width: 48px; height: 48px; border-radius: 15px; }
.squircle .icn { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 15px 16px;
}
.card + .card { margin-top: 10px; }

.card-tight { padding: 12px 14px; }
.card-flat { box-shadow: none; border: 1.5px solid var(--line); }

.card-wood {
  background: var(--wood-300);
  box-shadow: 0 2px 8px rgba(112,78,28,.10), 0 8px 24px rgba(112,78,28,.08);
}
.card-wood .card-sub, .card-wood .muted { color: var(--wood-ink); }

.card-dark, .totals {
  background: var(--pine-900);
  color: var(--snow);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 18px;
  --focus-color: var(--sun);
}

.card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  line-height: 1.25;
  color: var(--pine-900);
}
.card-sub {
  display: block;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.section { margin-top: 22px; }
.section:first-child { margin-top: 4px; }

.section-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--pine-900);
  margin: 0 0 10px 2px;
}

.group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 20px 2px 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pine-900);
}
.group-head .count, .group-head .group-count {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.group-head + .card, .group-head + .list { margin-top: 0; }

.muted { color: var(--ink-soft); }
.tiny { font-size: 13.5px; line-height: 1.35; }
.num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   11. Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-pill);
  background: var(--c-tint, var(--pine-100));
  color: var(--c-ink, var(--pine-900));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .1px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge .icn { width: 15px; height: 15px; stroke-width: 2.3; color: var(--c-ink, var(--pine-700)); }

.badge-sun { background: var(--sun-tint); color: var(--sun-ink); }
.badge-sun .icn { color: var(--sun-ink); }
.badge-pine { background: var(--pine-100); color: var(--pine-900); }
.badge-outline { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink-soft); }

/* quantity badge "×2" */
.badge-qty {
  min-width: 32px;
  justify-content: center;
  padding: 3px 8px;
  background: var(--pine-100);
  color: var(--pine-900);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
}

/* --------------------------------------------------------------------------
   12. Day chips (7-day rail)
   -------------------------------------------------------------------------- */

.scroll-x {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px calc(var(--gutter) + var(--safe-r)) 6px calc(var(--gutter) + var(--safe-l));
  margin: 0 calc(-1 * (var(--gutter) + var(--safe-r))) 0 calc(-1 * (var(--gutter) + var(--safe-l)));
}
.scroll-x::-webkit-scrollbar { display: none; }

.day-chip {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 58px;
  min-height: 62px;
  padding: 7px 10px 9px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  transition: background-color 150ms var(--ease-out), color 150ms ease, border-color 150ms ease, transform 90ms ease;
}
.day-chip .dow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.day-chip .num, .day-chip .day-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.05;
  color: var(--pine-900);
  font-variant-numeric: tabular-nums;
}
.day-chip:active { transform: scale(.96); }

.day-chip[aria-selected="true"], .day-chip.is-active {
  background: var(--pine-700);
  border-color: var(--pine-700);
  color: #DCEDE3;
  box-shadow: 0 2px 8px rgba(18,63,46,.22);
}
.day-chip[aria-selected="true"] .num,
.day-chip[aria-selected="true"] .day-num,
.day-chip.is-active .num,
.day-chip.is-active .day-num { color: var(--snow); }

/* today marker: a small sun dot */
.day-chip.is-today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sun);
}
.day-chip[aria-selected="true"].is-today::after,
.day-chip.is-active.is-today::after { background: var(--sun); box-shadow: 0 0 0 2px rgba(250,249,245,.35); }

.day-chip .dot-done {
  position: absolute;
  top: 6px; right: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pine-500);
}

/* --------------------------------------------------------------------------
   13. List rows
   -------------------------------------------------------------------------- */

.list {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  /* NOT overflow:hidden — the confetti burst has to escape the list.
     The corners are rounded on the edge rows instead. */
}
.list > :first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}
.list > :last-child {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.list-plain { background: none; box-shadow: none; border-radius: 0; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 11px 14px;
  text-align: left;
  background: transparent;
  color: inherit;
  border-bottom: 1px solid var(--line);
  transition: background-color 140ms ease;
}
.row:last-child { border-bottom: 0; }
.row:active { background: var(--pine-050); }

.row-main { flex: 1 1 auto; min-width: 0; }
.row-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pine-900);
  overflow-wrap: anywhere;
}
.row-sub {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.row-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  text-align: right;
}
.row-chevron { color: var(--ink-faint); }

.row.is-done .row-title,
.is-done-text {
  text-decoration: line-through;
  text-decoration-color: var(--pine-500);
  text-decoration-thickness: 2px;
  color: var(--ink-soft);
}

.divider { height: 1px; background: var(--line); border: 0; margin: 14px 0; }

/* --------------------------------------------------------------------------
   14. Signature: the check (tick draw + spring + confetti)
   --------------------------------------------------------------------------
   Markup contract:
     <button class="zcheck" role="checkbox" aria-checked="false" aria-label="Segna come fatto">
       {icon("check")}
     </button>
   States : add .is-checked (or aria-checked="true" / .checked / .is-done)
   Trigger: add .zburst on the check AND .zpop on the card for ~600ms, then
            remove them. Full re-renders must NOT carry the trigger classes,
            otherwise every repaint would re-fire the confetti.
   -------------------------------------------------------------------------- */

.zcheck {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2.5px solid var(--line-strong);
  background: var(--card);
  color: transparent;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 90ms ease;
}
/* 44px touch target without growing the visual circle */
.zcheck::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.zcheck:active { transform: scale(.9); }
.zcheck:focus-visible { outline-offset: 3px; }
.zcheck:disabled { opacity: .5; pointer-events: none; }

.zcheck .icn, .zcheck svg { width: 21px; height: 21px; stroke-width: 3; }

.zcheck svg path,
.zcheck .icn path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

.zcheck.is-checked,
.zcheck.checked,
.zcheck.is-done,
.zcheck[aria-checked="true"] {
  background: var(--sun);
  border-color: var(--sun-700);
  color: #fff;
}
.zcheck.is-checked svg path,
.zcheck.checked svg path,
.zcheck.is-done svg path,
.zcheck[aria-checked="true"] svg path { stroke-dashoffset: 0; }

/* tick draw — only while the burst trigger class is present */
.zcheck.zburst svg path,
.zcheck.is-burst svg path,
.zcheck.burst svg path,
.zcheck.just-checked svg path {
  animation: zak-tick 180ms cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes zak-tick {
  from { stroke-dashoffset: 24; }
  to   { stroke-dashoffset: 0; }
}

/* confetti — 8 particles carried as box-shadows on one pseudo element,
   fanned out by scaling the box (transform scales the shadows too). */
.zcheck::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 2px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  box-shadow:
      0px -19px 0 0    var(--sun),
     14px -14px 0 -1px var(--sunset),
     19px   0px 0 -1px var(--berry),
     14px  14px 0 -2px var(--sky),
      0px  19px 0 -1px var(--sun),
    -14px  14px 0 -1px var(--sunset),
    -19px   0px 0 -2px var(--berry),
    -14px -14px 0 0    var(--sky);
}
.zcheck.zburst::after,
.zcheck.is-burst::after,
.zcheck.burst::after,
.zcheck.just-checked::after {
  animation: zak-confetti 520ms cubic-bezier(.2,.8,.3,1) both;
}
@keyframes zak-confetti {
  0%   { opacity: 0; transform: scale(.2)  rotate(0deg); }
  12%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: scale(1.6) rotate(26deg); }
}

/* card spring on check */
.zpop, .is-pop, .just-checked-card { animation: zak-pop 320ms cubic-bezier(.2,.9,.3,1.4); }
@keyframes zak-pop {
  0%   { transform: scale(1); }
  34%  { transform: scale(.97); }
  100% { transform: scale(1); }
}

/* larger variant for the "prossima attività" hero */
.zcheck-lg { width: 40px; height: 40px; border-width: 3px; }
.zcheck-lg .icn, .zcheck-lg svg { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   15. Progress — mountain fill (packing)
   --------------------------------------------------------------------------
   Set --pct (e.g. style="--pct:52%") on the element carrying .mtn-fill.
   -------------------------------------------------------------------------- */

.progress-mtn {
  display: flex;
  align-items: center;
  gap: 14px;
}
.progress-mtn .mtn { width: 92px; height: auto; flex: 0 0 auto; }
.progress-mtn .progress-text { min-width: 0; }
.progress-count {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  color: var(--pine-900);
  font-variant-numeric: tabular-nums;
}
.progress-name {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.mtn-fill {
  clip-path: inset(calc(100% - var(--pct, 0%)) 0 0 0);
  transition: clip-path 420ms var(--ease-out);
}

/* generic linear progress, when a bar is enough */
.progress-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--pine-100);
  overflow: hidden;
}
.progress-bar > i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--pine-500);
  /* riempimento via clip-path: niente layout, stessa API --pct in % */
  clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0 round 999px);
  transition: clip-path 420ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   16. Totals card (budget) — the one dark surface
   -------------------------------------------------------------------------- */

.totals-label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #BFD3C7;
  letter-spacing: .2px;
}
.totals-amounts {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
}
.totals-main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  color: var(--snow);
}
.totals-alt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #BFD3C7;
}
.totals-rate {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(250,249,245,.16);
  font-size: 14px;
  color: #BFD3C7;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.totals-rate button, .totals-rate a, .totals .link-action {
  color: var(--sun);
  font-weight: 700;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
}
.totals-rate button:active, .totals .link-action:active { color: #FFD27A; }

/* --------------------------------------------------------------------------
   17. Photos
   -------------------------------------------------------------------------- */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.photo-tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--pine-100);
  border: 0;
  transition: transform 120ms ease;
}
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile:active { transform: scale(.97); }
.photo-tile:focus-visible { outline-offset: 2px; }

.photo-add {
  display: grid;
  place-items: center;
  gap: 4px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  border: 2px dashed var(--line-strong);
  background: var(--card);
  color: var(--pine-700);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.photo-add:active { background: var(--pine-050); border-color: var(--pine-500); }

/* fullscreen viewer */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #0B120E;
  display: flex;
  flex-direction: column;
  --focus-color: var(--sun);
  animation: fade-in 180ms ease-out;
}
.photo-viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l));
}
.photo-viewer-bar .btn-icon { color: #F2F5F3; }
.photo-viewer-bar .btn-icon:active { background: rgba(255,255,255,.12); }
.photo-viewer-bar .btn-danger { min-height: 42px; padding: 0 16px; }
.photo-viewer-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px calc(8px + var(--safe-r)) calc(12px + var(--safe-b)) calc(8px + var(--safe-l));
}
.photo-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   18. Drag & drop (reorder)
   -------------------------------------------------------------------------- */

.grip {
  display: grid;
  place-items: center;
  width: 34px;
  min-height: 44px;
  flex: 0 0 auto;
  color: var(--ink-faint);
  cursor: grab;
  touch-action: none;
  border-radius: var(--radius-sm);
  background: none;
}
.grip:active { cursor: grabbing; color: var(--pine-700); }
.grip .icn { width: 20px; height: 20px; }

.drag-ghost {
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow-float);
  transform: scale(1.02);
  opacity: .97;
  cursor: grabbing;
}
.drag-shift { transition: transform 160ms var(--ease-out); }
.drag-slot, .drop-placeholder {
  border-radius: var(--radius-lg);
  background: var(--pine-050);
  border: 1.5px dashed var(--line-strong);
}
body.is-dragging, body.is-reordering {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* --------------------------------------------------------------------------
   19. Empty states
   -------------------------------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 34px 8px 26px;
}
.empty .scene { margin-bottom: 2px; }
.empty-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--pine-900);
}
.empty-text {
  display: block;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.empty-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin-top: 2px;
}

/* small inline empty, used per group inside a populated view */
.empty-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--line-strong);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   20. FAB
   -------------------------------------------------------------------------- */

.fab-root {
  position: fixed;
  right: calc(var(--gutter) + var(--safe-r));
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 14px);
  z-index: 30;
}
.fab-root.is-hidden { display: none; }

.fab {
  display: grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--pine-700);
  color: var(--snow);
  box-shadow: var(--shadow-float);
  transition: background-color 140ms ease, transform 110ms var(--ease-out);
}
.fab:active { transform: scale(.93); background: var(--pine-900); }
.fab:focus-visible { outline-offset: 3px; }
.fab .icn { width: 28px; height: 28px; stroke-width: 2.2; }

/* --------------------------------------------------------------------------
   21. Bottom sheets
   -------------------------------------------------------------------------- */

.sheet-root { position: relative; z-index: 60; }
.sheet-layer { position: fixed; inset: 0; z-index: 60; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,63,46,.44);
  animation: fade-in 200ms ease-out both;
}
@supports (backdrop-filter: blur(2px)) {
  .sheet-backdrop { backdrop-filter: blur(2px); }
}

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--shadow-float);
  animation: sheet-up 240ms var(--ease-out) both;
  will-change: transform;
}
@supports not (max-height: 88dvh) {
  .sheet { max-height: 88vh; }
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet-layer.is-closing .sheet { animation: sheet-down 200ms ease-in both; }
.sheet-layer.is-closing .sheet-backdrop { animation: fade-out 200ms ease-in both; }
@keyframes sheet-down { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

.sheet-handle {
  display: grid;
  place-items: center;
  height: 22px;
  padding-top: 9px;
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;
}
.sheet-handle span {
  display: block;
  width: 42px; height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}
.sheet-layer.is-grabbing .sheet-handle { cursor: grabbing; }

.sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px 10px 20px;
  flex: 0 0 auto;
}
.sheet-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  color: var(--pine-900);
  padding-top: 8px;
  overflow-wrap: anywhere;
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 20px 18px;
}

.sheet-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  padding: 12px 20px calc(12px + var(--safe-b));
  background: var(--card);
  border-top: 1px solid var(--line);
  border-radius: 0 0 0 0;
  box-shadow: 0 -6px 16px rgba(18,63,46,.06);
}
.sheet-foot .btn { flex: 1 1 auto; }
.sheet-foot .btn-icon, .sheet-foot .icon-btn { flex: 0 0 auto; }

body.is-locked, body.sheet-open { overflow: hidden; }
body.is-locked #views, body.sheet-open #views { overflow: hidden; }

/* --------------------------------------------------------------------------
   22. Confirm dialog (centered)
   -------------------------------------------------------------------------- */

.dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
}
.dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18,63,46,.46);
  animation: fade-in 160ms ease-out both;
}
.dialog {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 20px 20px 16px;
  animation: dialog-in 180ms var(--ease-out) both;
}
@keyframes dialog-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.dialog-layer.is-closing .dialog { animation: fade-out 140ms ease-in both; }
.dialog-layer.is-closing .dialog-backdrop { animation: fade-out 140ms ease-in both; }

.dialog h2 {
  font-size: 19px;
  color: var(--pine-900);
  margin-bottom: 6px;
}
.dialog-msg {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.dialog-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.dialog-actions .btn { flex: 1 1 0; min-height: 46px; padding: 0 12px; font-size: 16px; }

/* --------------------------------------------------------------------------
   23. Toasts
   -------------------------------------------------------------------------- */

.toast-root {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}
.toast-root:empty { display: none; }

.toast {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: var(--pine-900);
  color: var(--snow);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--shadow-float);
  pointer-events: auto;
  cursor: pointer;
  animation: toast-in 220ms var(--ease-out) both;
  overflow-wrap: anywhere;
}
.toast .icn { width: 19px; height: 19px; flex: 0 0 auto; }
.toast--ok  .icn { color: var(--sun); }
.toast--warn { background: #6B4A18; }
.toast--warn .icn { color: var(--sun); }
.toast--err  { background: #8E1038; }
.toast--err .icn { color: #FFC9DA; }
.toast.is-out { animation: toast-out 180ms ease-in both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px) scale(.98); }
}

/* --------------------------------------------------------------------------
   24. Module load failure (shell-level, Italian copy)
   -------------------------------------------------------------------------- */

.module-error {
  margin: 12px 0;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--sunset-tint);
  color: var(--sunset-ink);
}
.module-error strong { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 4px; }
.module-error span { display: block; font-size: 14px; color: var(--pine-900); }

/* --------------------------------------------------------------------------
   25. Hover states — pointer devices only (no sticky hover on touch)
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn.primary:hover { background: var(--pine-800); }
  .btn-secondary:hover, .btn.secondary:hover { background: #CFE5D8; }
  .btn-danger:hover, .btn.danger:hover { background: #C22A60; }
  .btn-quiet:hover, .btn.quiet:hover, .btn-ghost:hover, .btn.ghost:hover { background: var(--pine-050); }
  .btn-outline:hover, .btn.outline:hover { border-color: var(--pine-500); background: var(--pine-050); }
  .btn-sun:hover, .btn.sun:hover { background: #F0A614; }
  .btn:disabled:hover { background: inherit; }

  .btn-icon:hover, .icon-btn:hover { background: var(--pine-050); }
  .btn-icon.danger:hover, .icon-btn.danger:hover { background: var(--berry-tint); }

  .link-action:hover { color: var(--pine-900); }

  .tab:hover { color: var(--pine-700); }
  .tab:hover .tab-icn { background: var(--pine-050); }
  .tab[aria-selected="true"]:hover .tab-icn { background: var(--pine-100); }

  .row:hover { background: var(--pine-050); }
  .chip:hover { background: #CFE5D8; }
  .chip-quiet:hover { background: var(--pine-050); border-color: var(--pine-500); }
  .chip.is-on:hover, .chip[aria-pressed="true"]:hover { filter: brightness(.98); }
  .chip-pick:hover { border-color: var(--pine-500); background: var(--pine-050); }
  .chip-pick[aria-pressed="true"]:hover, .chip-pick[aria-checked="true"]:hover, .chip-pick.is-on:hover { filter: brightness(.98); }

  .day-chip:hover { border-color: var(--pine-500); background: var(--pine-050); }
  .day-chip[aria-selected="true"]:hover, .day-chip.is-active:hover { background: var(--pine-800); }

  .seg-opt:hover { color: var(--pine-900); }
  .seg-opt[aria-checked="true"]:hover, .seg-opt.is-on:hover { background: var(--card); }

  .zcheck:hover { border-color: var(--pine-500); }
  .zcheck.is-checked:hover, .zcheck[aria-checked="true"]:hover { background: #F5A814; }

  .fab:hover { background: var(--pine-800); }
  .stepper button:hover { background: var(--pine-050); }
  .photo-add:hover { border-color: var(--pine-500); background: var(--pine-050); }
  .photo-tile:hover { transform: scale(1.015); }
  .grip:hover { color: var(--pine-700); background: var(--pine-050); }
  .toast:hover { filter: brightness(1.1); }
  input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) { border-color: #B4C6BC; }
  .check-row:hover { border-color: var(--pine-500); }
}

/* --------------------------------------------------------------------------
   26. Narrow / wide adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 359.98px) {
  :root { --gutter: 12px; }
  .wordmark { font-size: 21px; }
  .tab-label { font-size: 11px; }
  .day-chip { min-width: 52px; padding-inline: 8px; }
  .btn { font-size: 15.5px; padding: 0 14px; }
  .totals-main { font-size: 30px; }
}

@media (min-width: 600px) {
  #views { padding-inline: calc(24px + var(--safe-l)) calc(24px + var(--safe-r)); }
  .view { max-width: 620px; margin-inline: auto; }
  .fab-root { right: max(calc(var(--gutter) + var(--safe-r)), calc(50vw - 310px)); }
  /* Le schede restano agganciate alla colonna dei contenuti (620px):
     lo sfondo della barra resta a tutta larghezza. */
  #tabbar {
    padding-inline:
      max(calc(6px + var(--safe-l)), calc(50vw - 310px))
      max(calc(6px + var(--safe-r)), calc(50vw - 310px));
  }
}

/* --------------------------------------------------------------------------
   27. Reduced motion — kill confetti, spring, slides
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .zcheck::after { display: none !important; }
  .zcheck svg path { transition: none !important; }
  .view.is-active { animation: none !important; }
  .sheet { animation: none !important; }
  .photo-tile:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   28. Print — not a target, but never let it explode
   -------------------------------------------------------------------------- */

@media print {
  .tabbar, .fab-root, .sheet-root, .toast-root, #topbar { display: none !important; }
  #app { height: auto; overflow: visible; }
  #views { overflow: visible; padding: 0; }
}