/* Dieta - ventux.cloud
   Stessa identita' del documento stampato: Fraunces per i titoli, IBM Plex Sans
   per il testo, IBM Plex Mono per le grammature. Il colore codifica la categoria
   proteica del pasto, come nel piano della dottoressa. */

:root{
  --paper:#F4F6F0;
  --surface:#FFFFFF;
  --surface-2:#EDF0E8;
  --ink:#1B231C;
  --ink-2:#3D473E;
  --ink-3:#616C61;
  --line:#DDE3D6;
  --line-2:#C9D2C0;
  --basil:#3B5F47;
  --basil-ink:#FFFFFF;
  --basil-soft:#E3EBE2;

  --pesce:#2A6A8B;
  --legumi:#66752F;
  --carne:#9E4433;
  --uova:#A87C12;
  --formaggi:#785576;
  --affettati:#84634E;

  --pesce-bg:#E5EEF3;
  --legumi-bg:#ECEFDF;
  --carne-bg:#F6E7E3;
  --uova-bg:#F7EEDA;
  --formaggi-bg:#F0E9F0;
  --affettati-bg:#F1EAE4;

  --warn:#9A6B18;
  --warn-bg:#F8EFDB;
  --danger:#A33B2C;

  --r:10px;
  --r-sm:6px;
  --shadow:0 1px 2px rgba(27,35,28,.06), 0 10px 28px -22px rgba(27,35,28,.5);
  --tabbar-h:60px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12170F;
    --surface:#1A211A;
    --surface-2:#212A21;
    --ink:#E8EDE3;
    --ink-2:#C4CDC0;
    --ink-3:#96A194;
    --line:#2C362C;
    --line-2:#3B473B;
    --basil:#9BC2A5;
    --basil-ink:#12170F;
    --basil-soft:#233026;

    --pesce:#7FB8D6;
    --legumi:#B6C46E;
    --carne:#E29282;
    --uova:#E3BE5D;
    --formaggi:#C6A3C4;
    --affettati:#CFAC92;

    --pesce-bg:#1B2A33;
    --legumi-bg:#262C1A;
    --carne-bg:#33211D;
    --uova-bg:#302716;
    --formaggi-bg:#2B2130;
    --affettati-bg:#2C241D;

    --warn:#D7B160;
    --warn-bg:#2B2415;
    --danger:#E29282;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -22px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3{font-family:"Fraunces","Iowan Old Style",Georgia,serif;margin:0;text-wrap:balance}
h1{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
h2{font-size:21px;font-weight:600;letter-spacing:-.01em}
h3{font-size:16px;font-weight:600}
p{margin:0}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
.g{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.9em;font-weight:500;
   font-variant-numeric:tabular-nums;color:var(--ink-2)}

:focus-visible{outline:2px solid var(--basil);outline-offset:2px;border-radius:4px}

/* ============================== LOGIN ============================== */
.gate{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
}
.gate-card{
  width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:28px 24px 24px;
  display:flex;flex-direction:column;gap:14px;
}
.gate-card h1{font-size:38px;margin-top:2px}
.gate-sub{color:var(--ink-3);font-size:14px;margin-bottom:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.field input{
  font:inherit;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 12px;width:100%;
}
/* Occhio per rileggere la password mentre la si digita. */
.pw{position:relative;display:flex;align-items:center}
.pw input{padding-right:44px}
.pw-eye{
  position:absolute;right:5px;background:transparent;border:0;padding:8px;border-radius:6px;
  cursor:pointer;color:var(--ink-3);display:grid;place-items:center;
}
.pw-eye:hover{color:var(--ink);background:var(--surface-2)}
.pw-eye[aria-pressed="true"]{color:var(--basil)}
.gate-err{color:var(--danger);font-size:13.5px}

.btn{
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);
  border-radius:99px;padding:8px 15px;font-size:13.5px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
}
.btn:hover{background:var(--surface-2);color:var(--ink)}
.btn-primary{
  background:var(--basil);border-color:var(--basil);color:var(--basil-ink);
  padding:12px 18px;font-size:15px;font-weight:600;
}
.btn-primary:hover{filter:brightness(1.08);background:var(--basil);color:var(--basil-ink)}
.btn-primary[disabled]{opacity:.55;cursor:default}
.btn-danger{color:var(--danger);border-color:var(--danger)}
.btn-sm{padding:5px 11px;font-size:12.5px}

/* ============================== SHELL ============================== */
.appbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  padding-top:env(safe-area-inset-top,0px);
}
.appbar-in{
  max-width:900px;margin:0 auto;padding:0 16px;min-height:50px;
  display:flex;align-items:center;gap:10px;
}
.wordmark{font-family:"Fraunces",Georgia,serif;font-size:18px;font-weight:600}
.appbar-actions{margin-left:auto;display:flex;gap:2px}
.icon-btn{
  background:transparent;border:0;padding:8px;border-radius:99px;cursor:pointer;
  color:var(--ink-3);display:grid;place-items:center;
}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.badge{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;
  background:var(--warn-bg);color:var(--warn);
}

main{
  max-width:900px;margin:0 auto;
  padding:18px 16px calc(var(--tabbar-h) + var(--safe-b) + 24px);
}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:color-mix(in srgb,var(--paper) 94%,transparent);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
.tab{
  background:transparent;border:0;cursor:pointer;position:relative;
  height:var(--tabbar-h);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--ink-3);
  font-size:11px;font-weight:500;
}
.tab.is-active{color:var(--basil)}
.tab.is-active::before{
  content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
  background:var(--basil);border-radius:0 0 2px 2px;
}
.tab-count{
  position:absolute;top:8px;right:calc(50% - 24px);
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  background:var(--basil);color:var(--basil-ink);
  min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  display:grid;place-items:center;
}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);z-index:40;
  background:var(--ink);color:var(--paper);
  padding:9px 16px;border-radius:99px;font-size:13.5px;box-shadow:var(--shadow);
  max-width:calc(100% - 32px);text-align:center;
}

/* ============================ COMPONENTI ============================ */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;border:1px solid transparent;white-space:nowrap;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.c-pesce{color:var(--pesce);background:var(--pesce-bg)}
.c-legumi{color:var(--legumi);background:var(--legumi-bg)}
.c-carne{color:var(--carne);background:var(--carne-bg)}
.c-uova{color:var(--uova);background:var(--uova-bg)}
.c-formaggi{color:var(--formaggi);background:var(--formaggi-bg)}
.c-affettati{color:var(--affettati);background:var(--affettati-bg)}
.c-tonno{color:var(--pesce);background:transparent;border-color:currentColor}
.c-tonno::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;
}
.card + .card{margin-top:12px}
.card-hd{
  padding:11px 15px;border-bottom:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:baseline;gap:9px;
}
.card-hd .count{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  margin-left:auto;font-variant-numeric:tabular-nums}

.view-hd{margin-bottom:16px}
.view-hd h2{margin-top:2px}
.view-sub{color:var(--ink-3);font-size:14px;margin-top:6px;max-width:62ch}

/* ------------------------------- OGGI ------------------------------- */
.day-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.day-nav .spacer{flex:1}
.daychip{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;
  background:var(--basil-soft);color:var(--basil);
}
.nav-btn{
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  width:34px;height:34px;border-radius:99px;cursor:pointer;display:grid;place-items:center;
}
.nav-btn:hover{background:var(--surface-2)}
.nav-btn[disabled]{opacity:.35;cursor:default}

.meal{
  display:flex;gap:12px;padding:13px 15px;border-top:1px solid var(--line);
  border-left:3px solid transparent;align-items:flex-start;
}
.meal:first-child{border-top:0}
.meal[data-cat="pesce"]{border-left-color:var(--pesce)}
.meal[data-cat="legumi"]{border-left-color:var(--legumi)}
.meal[data-cat="carne"]{border-left-color:var(--carne)}
.meal[data-cat="uova"]{border-left-color:var(--uova)}
.meal[data-cat="formaggi"]{border-left-color:var(--formaggi)}
.meal[data-cat="affettati"]{border-left-color:var(--affettati)}
.meal[data-cat="tonno"]{border-left-color:var(--pesce);border-left-style:dashed}

.tick{
  flex:none;width:24px;height:24px;border-radius:50%;cursor:pointer;
  border:1.5px solid var(--line-2);background:transparent;color:transparent;
  display:grid;place-items:center;margin-top:1px;transition:background .15s,border-color .15s;
}
.tick svg{width:14px;height:14px}
.tick[aria-pressed="true"]{background:var(--basil);border-color:var(--basil);color:var(--basil-ink)}
.meal-body{min-width:0;flex:1}
.meal-label{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px;
  flex-wrap:wrap;margin-bottom:3px;
}
.meal-text{font-size:14.5px}
.meal.is-done .meal-text{color:var(--ink-3)}
.meal-note{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-3);font-style:italic}

.dayprog{
  display:flex;align-items:center;gap:10px;padding:11px 15px;border-top:1px solid var(--line);
  background:var(--surface-2);
}
.bar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--basil);border-radius:99px;transition:width .25s}
.bar-lab{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.startdate{
  margin-top:14px;padding:12px 15px;border:1px dashed var(--line-2);border-radius:var(--r);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3);
}
.startdate input{
  font:inherit;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:5px 8px;
}

/* ------------------------------- PIANO ------------------------------ */
.wk-hd{margin:22px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wk-hd:first-child{margin-top:0}
.conto{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.conto .chip{font-size:10px}
.conto .chip b{font-weight:700;font-size:11px}

details.day-acc{border-top:1px solid var(--line)}
details.day-acc:first-of-type{border-top:0}
details.day-acc > summary{
  list-style:none;cursor:pointer;padding:12px 15px;display:flex;align-items:center;gap:10px;
}
details.day-acc > summary::-webkit-details-marker{display:none}
.acc-n{font-family:"Fraunces",Georgia,serif;font-size:16px;font-weight:600;white-space:nowrap}
.acc-dow{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.acc-cats{margin-left:auto;display:flex;gap:4px;align-items:center}
.dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.d-pesce{background:var(--pesce)}
.dot.d-legumi{background:var(--legumi)}
.dot.d-carne{background:var(--carne)}
.dot.d-uova{background:var(--uova)}
.dot.d-formaggi{background:var(--formaggi)}
.dot.d-affettati{background:var(--affettati)}
.dot.d-tonno{background:transparent;box-shadow:inset 0 0 0 1.5px var(--pesce)}
.acc-chev{color:var(--ink-3);transition:transform .2s}
details.day-acc[open] .acc-chev{transform:rotate(90deg)}
details.day-acc[open] > summary{border-bottom:1px solid var(--line);background:var(--surface-2)}

/* ------------------------------- SPESA ------------------------------ */
.shopbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 15px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);margin-bottom:14px;box-shadow:var(--shadow);
}
.shopbar .prog{flex:1 1 180px;min-width:150px}
.shopbar .acts{display:flex;gap:6px;flex-wrap:wrap}

.item{border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:11px;padding:10px 15px}
.item:first-child{border-top:0}
.item .tick{width:22px;height:22px;border-radius:6px;margin-top:1px}
.item-body{flex:1;min-width:0}
.item-top{display:flex;align-items:baseline;gap:10px}
.item-name{font-size:14.5px;flex:1;min-width:0;overflow-wrap:anywhere}
.item-qty{font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;color:var(--ink-2);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.item-note{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.item.is-done .item-name,.item.is-done .item-qty{text-decoration:line-through;color:var(--ink-3)}
.tag{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  padding:1px 5px;border-radius:3px;background:var(--basil-soft);color:var(--basil);margin-left:6px;
}
.item-acts{display:flex;gap:4px;flex:none}
.mini-btn{
  background:transparent;border:0;padding:5px;border-radius:6px;cursor:pointer;color:var(--ink-3);
  display:grid;place-items:center;
}
.mini-btn:hover{background:var(--surface-2);color:var(--ink)}
.mini-btn.danger:hover{color:var(--danger)}

.item-form{display:flex;flex-direction:column;gap:7px;padding:11px 15px;border-top:1px solid var(--line);
  background:var(--surface-2)}
.item-form .row{display:flex;gap:7px}
.item-form input{
  font:inherit;font-size:14px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:8px 10px;width:100%;min-width:0;
}
.item-form input.qty{flex:0 0 34%;font-family:"IBM Plex Mono",monospace;font-size:13px}
.item-form .row .btn{flex:none}

.add-row{padding:9px 15px;border-top:1px dashed var(--line-2)}
.add-row .btn{width:100%;color:var(--ink-3);border-style:dashed}

.strategie{display:grid;gap:10px;margin-top:16px}
.strategia{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--basil);
  border-radius:var(--r);padding:12px 15px;
}
.strategia h3{font-size:14.5px;margin-bottom:4px}
.strategia p{font-size:13.5px;color:var(--ink-2)}

/* ------------------------------ REGOLE ------------------------------ */
.rule-list{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.rule-list li{margin-bottom:5px}
.rule-list li::marker{color:var(--basil)}
.pairs{width:100%;border-collapse:collapse;font-size:14px}
.pairs td{padding:6px 0;border-top:1px solid var(--line);vertical-align:top}
.pairs tr:first-child td{border-top:0}
.pairs td:last-child{text-align:right;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  color:var(--ink-2);white-space:nowrap;padding-left:12px;font-variant-numeric:tabular-nums}
.card-body{padding:13px 15px}
.card-body p + p{margin-top:8px}
.muted{color:var(--ink-3);font-size:13.5px}

.skeleton{color:var(--ink-3);font-size:14px;padding:30px 0;text-align:center}

@media (min-width:700px){
  main{padding-top:24px}
  .strategie{grid-template-columns:repeat(3,1fr)}
  .tabbar{position:sticky;bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}