:root {
  --bak: #FBF6EE;
  --yta: #FFFFFF;
  --text: #2B2118;
  --svag: #8A7A6A;
  --linje: #EADFCF;
  --morot: #E0782A;
  --morot-text: #FFFFFF;
  --blad: #4E8B3A;
  --topp: 112px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bak: #1D1915;
    --yta: #2A241E;
    --text: #F3EADC;
    --svag: #A39483;
    --linje: #3A322A;
    --morot: #F08A3C;
    --morot-text: #1D1915;
    --blad: #7DBB66;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bak);
  color: var(--text);
  font: 17px/1.35 ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.dold { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Toppen: rubriken till vänster, Truls-Morot på kanten till höger */
.topp {
  position: sticky; top: 0; z-index: 5;
  height: calc(var(--topp) + env(safe-area-inset-top));
  padding: calc(env(safe-area-inset-top) + 22px) 20px 0;
  background: var(--bak);
  border-bottom: 2px solid var(--linje);
  overflow: hidden;
}
.rubrik { position: relative; z-index: 1; max-width: 55%; }
h1 { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; }
#lage { margin: 4px 0 0; color: var(--svag); font-size: 15px; }
#toppkatt { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--topp); pointer-events: none; }
#klappa { position: absolute; right: 0; bottom: 0; width: 150px; height: 100px; border: 0; background: none; }

main { max-width: 560px; margin: 0 auto; padding: 14px 14px calc(40px + env(safe-area-inset-bottom)); }

#ny { display: flex; gap: 8px; margin-bottom: 14px; }
#vara {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px;
  border: 2px solid var(--linje); border-radius: 16px; background: var(--yta);
  font-size: 17px; outline: none;
}
#vara:focus { border-color: var(--morot); }
#vara::placeholder { color: var(--svag); }
#ny button {
  width: 52px; height: 52px; flex: none; border: 0; border-radius: 16px;
  background: var(--morot); color: var(--morot-text); font-size: 30px; line-height: 1; font-weight: 600;
}
#ny button:active { transform: scale(0.94); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; align-items: center; gap: 4px;
  min-height: 56px; margin-bottom: 8px; padding: 0 4px 0 0;
  background: var(--yta); border: 1px solid var(--linje); border-radius: 16px;
  transition: transform 0.38s cubic-bezier(0.3, 0, 0.7, 0.4), opacity 0.38s ease-in;
}
.lista li.ny { animation: in 0.3s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(-10px) scale(0.98); } }
.lista li.puttad { transform: translateX(115%) rotate(7deg); opacity: 0; }

.bock {
  flex: none; width: 56px; height: 56px; border: 0; background: none; padding: 0;
  display: grid; place-items: center;
}
.bock::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--svag);
}
.klar .bock::before {
  border-color: var(--blad); background: var(--blad);
  /* bocken ritas som en liten vinkel */
  background-image: linear-gradient(var(--blad), var(--blad));
}
.klar .bock::after {
  content: ""; position: absolute; width: 11px; height: 6px; margin-top: -3px;
  border: solid var(--yta); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
.bock { position: relative; }
.namn { flex: 1; min-width: 0; padding: 8px 0; overflow-wrap: anywhere; }
.klar .namn { color: var(--svag); text-decoration: line-through; }
.vem-la {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: var(--svag); border: 1px solid var(--linje);
}
.bort {
  flex: none; width: 44px; height: 56px; border: 0; background: none;
  color: var(--svag); font-size: 22px; line-height: 1;
}

.mellanrubrik { display: flex; align-items: center; justify-content: space-between; margin: 26px 4px 10px; }
h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--svag); text-transform: uppercase; letter-spacing: 0.06em; }
#rensa { border: 0; background: none; color: var(--morot); font-weight: 600; padding: 8px 4px; }

#tomt { text-align: center; padding: 34px 0 10px; color: var(--svag); }
#sovkatt { width: 240px; height: 100px; }
#tomt p { margin: 12px 0 0; }
#tomt strong { color: var(--text); font-size: 19px; }

/* Katten som puttar bort en vara ligger ovanpå listan */
#radkatt {
  position: fixed; left: 0; top: 0; z-index: 8; width: 164px; height: 92px;
  pointer-events: none; opacity: 0; transition: opacity 0.14s;
}
#radkatt.syns { opacity: 1; }

#fest {
  position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center;
  pointer-events: none; overflow: hidden;
  background: color-mix(in srgb, var(--bak) 96%, transparent);
  animation: festin 0.25s ease-out;
}
#fest.ut { opacity: 0; transition: opacity 0.4s; }
@keyframes festin { from { opacity: 0; } }
#hoppkatt { width: 340px; height: 230px; max-width: 92vw; }
#fest p { margin: 6px 0 0; font-size: 30px; font-weight: 700; }
.morot { position: absolute; top: -40px; font-size: 30px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--varv)); } }

#besked {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 10;
  transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 999px;
  background: var(--text); color: var(--bak); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: in 0.25s ease-out;
}

dialog {
  border: 0; border-radius: 24px; padding: 26px 22px; width: min(340px, calc(100vw - 32px));
  background: var(--yta); color: var(--text); text-align: center;
}
dialog::backdrop { background: var(--bak); }
dialog img { border-radius: 22px; }
dialog h2 { margin: 14px 0 14px; font-size: 24px; color: var(--text); text-transform: none; letter-spacing: 0; }
.vem { display: flex; gap: 10px; }
.vem label { flex: 1; }
.vem input { position: absolute; opacity: 0; }
.vem span {
  display: block; padding: 14px 0; border-radius: 14px; border: 2px solid var(--linje); font-weight: 600;
}
.vem input:checked + span { border-color: var(--morot); background: color-mix(in srgb, var(--morot) 14%, transparent); }
.vem input:focus-visible + span { outline: 2px solid var(--morot); outline-offset: 2px; }
.kodrad { display: block; margin-top: 18px; text-align: left; font-size: 14px; color: var(--svag); }
.kodrad input {
  display: block; width: 100%; height: 50px; margin-top: 6px; padding: 0 14px;
  border: 2px solid var(--linje); border-radius: 14px; background: var(--bak); font-size: 17px; outline: none;
}
.kodrad input:focus { border-color: var(--morot); }
#kodfel { margin: 10px 0 0; color: #C0392B; font-size: 15px; }
dialog button {
  width: 100%; height: 52px; margin-top: 18px; border: 0; border-radius: 14px;
  background: var(--morot); color: var(--morot-text); font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .lista li, .lista li.ny, #fest, #besked { animation: none; transition: none; }
}