/* L'editor de la carta. Mateixos colors que la seva web, pero pensat per fer-ho
   amb el dit, dret, a la barra, en un minut. */
:root{
  --ocre:#B8812E;
  --ocre-fosc:#8C5F1E;
  --tinta:#191511;
  --tinta-2:#2A241C;
  --crema:#F4ECDC;
  --crema-tenue:#D8C9AF;
  --verd:#5C7A33;
  --vermell:#8C3A2E;
  --radi:0px;
  --pas:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--tinta);color:var(--crema);
  font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.5;
  padding-bottom:104px;
}
button,input{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ocre);outline-offset:2px}

/* ── la porta ──────────────────────────────────────────────────────────── */
.entrada{display:grid;place-items:center;min-height:100svh;min-height:100dvh;padding:24px;padding-bottom:24px}
.porta{width:min(100%,380px);text-align:center}
.porta__marca{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ocre)}
.porta h1{font-size:2rem;font-weight:500;margin-top:8px}
.porta__text{color:var(--crema-tenue);margin-top:10px;font-size:15px}
.porta form{display:grid;gap:10px;margin-top:26px;text-align:left}
.porta label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--crema-tenue)}
.porta input{
  background:var(--tinta-2);border:1px solid rgba(244,236,220,.24);color:var(--crema);
  padding:14px;border-radius:var(--radi);min-height:52px;width:100%;
}
.porta button{
  background:var(--crema);color:#2A1F12;border:0;border-radius:var(--radi);
  min-height:52px;cursor:pointer;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:14px;
  transition:scale .16s var(--pas);
}
.porta button:active{scale:.98}
.error{
  background:rgba(140,58,46,.18);border:1px solid var(--vermell);
  padding:10px 12px;margin-top:18px;font-size:14.5px;color:#F3C9C2;
}

/* ── barra de dalt ─────────────────────────────────────────────────────── */
.barra-dalt{position:sticky;top:0;z-index:20;background:var(--tinta);border-bottom:1px solid rgba(244,236,220,.16)}
.barra-dalt__cos{
  max-width:720px;margin:0 auto;padding:0 16px;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.marca{font-size:15px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.marca span{color:var(--ocre);font-weight:400}
.enllac{
  background:none;border:0;color:var(--crema-tenue);cursor:pointer;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  min-height:44px;padding:0 4px;
}
.enllac:hover,.enllac:focus-visible{color:var(--crema)}

/* ── el cos ────────────────────────────────────────────────────────────── */
.cos{max-width:720px;margin:0 auto;padding:18px 16px 0}
.estat-carrega{color:var(--crema-tenue);padding:40px 0;text-align:center}

.publicat{
  font-size:13px;color:var(--crema-tenue);
  padding-bottom:16px;border-bottom:1px solid rgba(244,236,220,.14);margin-bottom:20px;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
}
.publicat b{color:var(--crema);font-weight:600}
.veure{
  color:var(--ocre);text-decoration:none;border-bottom:1px solid currentColor;
  display:inline-flex;align-items:center;min-height:44px;font-size:13px;
}

.grup{
  background:var(--tinta-2);padding:14px;margin-bottom:14px;
  border:1px solid rgba(244,236,220,.12);
}
.grup__cap{display:grid;gap:6px;margin-bottom:12px}
.grup__titol,.grup__quan{
  background:transparent;border:0;border-bottom:1px dashed rgba(244,236,220,.3);
  padding:8px 2px;width:100%;min-height:44px;
}
.grup__titol{font-size:1.15rem;font-weight:600}
.grup__quan{font-size:13px;color:var(--ocre);letter-spacing:.06em}
.grup__titol:focus,.grup__quan:focus{border-bottom-style:solid;border-bottom-color:var(--ocre)}

.plats{list-style:none;display:grid;gap:8px}
.plat{
  display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;
  background:rgba(25,21,17,.55);padding:8px;
}
.plat__nom{
  grid-column:1 / -1;grid-row:1;
  background:transparent;border:0;border-bottom:1px solid transparent;
  padding:8px 4px;min-height:46px;width:100%;font-size:17px;
}
.plat__nota{
  grid-column:1;grid-row:2;
  background:transparent;border:0;padding:4px;
  font-size:13px;color:var(--crema-tenue);min-height:38px;width:100%;
}
.plat__nom:focus,.plat__nota:focus{background:rgba(244,236,220,.07);border-bottom-color:var(--ocre)}
.plat__nota::placeholder{color:rgba(216,201,175,.45)}
.plat__eines{grid-column:2;grid-row:2;display:flex;gap:4px}
.eina{
  width:44px;height:44px;border:1px solid rgba(244,236,220,.22);background:transparent;
  cursor:pointer;border-radius:var(--radi);font-size:16px;line-height:1;
  transition:background-color .2s var(--pas),scale .16s var(--pas);
}
.eina:hover,.eina:focus-visible{background:rgba(244,236,220,.12)}
.eina:active{scale:.94}
.eina.treu{color:#E9A79C}
.eina[disabled]{opacity:.3;cursor:default}

.afegeix{
  margin-top:10px;background:transparent;border:1px dashed rgba(244,236,220,.3);
  color:var(--crema-tenue);width:100%;min-height:48px;cursor:pointer;
  font-size:14px;border-radius:var(--radi);
  transition:background-color .2s var(--pas),color .2s var(--pas);
}
.afegeix:hover,.afegeix:focus-visible{background:rgba(244,236,220,.08);color:var(--crema)}

.historia{margin:26px 0 10px;padding-top:18px;border-top:1px solid rgba(244,236,220,.14)}
.historia h2{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--crema-tenue);font-weight:600}
.historia ul{list-style:none;display:grid;gap:6px;margin-top:10px}
.historia button{
  background:transparent;border:1px solid rgba(244,236,220,.2);color:var(--crema-tenue);
  width:100%;min-height:46px;cursor:pointer;font-size:14px;text-align:left;padding:0 12px;
  border-radius:var(--radi);
}
.historia button:hover,.historia button:focus-visible{color:var(--crema);border-color:var(--crema-tenue)}

/* ── barra de baix: publicar ───────────────────────────────────────────── */
.barra-baix[hidden]{display:none}
.barra-baix{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(25,21,17,.97);border-top:1px solid rgba(244,236,220,.18);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  max-width:720px;margin:0 auto;
}
.barra-baix__nota{font-size:13px;color:var(--ocre)}
.publica{
  background:var(--crema);color:#2A1F12;border:0;border-radius:var(--radi);
  min-height:52px;padding:0 26px;cursor:pointer;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:14px;
  transition:scale .16s var(--pas),background-color .2s var(--pas);
}
.publica:active{scale:.97}
.publica[disabled]{opacity:.5;cursor:default}

.avis{
  position:fixed;left:16px;right:16px;bottom:92px;z-index:40;
  max-width:688px;margin:0 auto;
  background:var(--verd);color:#F4F6EE;padding:14px 16px;font-size:15px;
  box-shadow:0 10px 30px rgba(10,8,5,.5);
}
.avis[data-mal]{background:var(--vermell);color:#FBEDEA}

@media (prefers-reduced-motion: no-preference){
  .avis{animation:puja .3s var(--pas)}
  @keyframes puja{from{opacity:0;transform:translateY(10px)}}
}

@media (min-width:600px){
  .plat{grid-template-columns:1fr 170px auto}
  .plat__nom{grid-column:1;grid-row:1}
  .plat__nota{grid-column:2;grid-row:1}
  .plat__eines{grid-column:3;grid-row:1}
}