:root {
  --bg: #efe7da;               /* warmer cream so white cards pop */
  --bg-soft: #e6dccc;
  --surface: #ffffff;
  --surface-2: #f7f1e7;        /* slightly off-white for purchased */
  --ink: #1b1813;
  --ink-2: #5a544c;
  --ink-3: #948c81;
  --accent: #2e6c4a;
  --danger: #c75942;
  --shadow-sm: 0 1px 2px rgba(28, 24, 20, 0.05);
  --shadow:    0 1px 2px rgba(28, 24, 20, 0.05),
               0 3px 10px rgba(28, 24, 20, 0.05);
  --shadow-lg: 0 1px 3px rgba(28, 24, 20, 0.06),
               0 8px 22px rgba(28, 24, 20, 0.07);
  --radius: 14px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-leave: cubic-bezier(0.55, 0, 0.25, 1);

  --overlay-soft: rgba(28, 24, 20, 0.032);
  --overlay-toggle: rgba(0, 0, 0, 0.045);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #1a1612;
    --bg-soft:   #2a241d;
    --surface:   #2d2721;
    --surface-2: #3a342c;
    --ink:       #ece4d6;
    --ink-2:     #b0a89c;
    --ink-3:     #7c7468;
    --danger:    #d97560;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow:    0 1px 2px rgba(0, 0, 0, 0.35),
                 0 3px 10px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 2px 5px rgba(0, 0, 0, 0.45),
                 0 12px 28px rgba(0, 0, 0, 0.35);
    --overlay-soft:   rgba(255, 255, 255, 0.04);
    --overlay-toggle: rgba(255, 255, 255, 0.06);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: contain;
}

html, body {
  /* Kill any page-level scroll — only inner .scrollarea / .purchased-list
     are allowed to scroll. Pins cumpărate to the bottom of the viewport. */
  height: 100%;
  overflow: hidden;
}

.app {
  max-width: 520px;
  margin: 0 auto;
  /* On every edge: full system safe-area inset + an extra comfort buffer.
     Standalone PWAs paint under the status bar / home indicator (viewport-fit
     is "cover"), so we re-claim that space with padding here. The extra
     padding keeps interactive elements out of thumb-collision zones. */
  padding: calc(env(safe-area-inset-top) + 14px)
           calc(env(safe-area-inset-right) + 16px)
           calc(env(safe-area-inset-bottom) + 18px)
           calc(env(safe-area-inset-left) + 16px);
  display: flex;
  flex-direction: column;
  /* Fallback first, dvh wins where supported. Reversing this from before:
     100vh on iOS reports the URL-bar-hidden height — using it as the final
     declaration made the app taller than the visible viewport. */
  height: 100vh;
  height: 100dvh;
}

/* The active-list scrolls independently inside this area. Composer stays
   pinned at top, cumpărate stays pinned at bottom — always visible. */
.scrollarea {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

/* ── composer (input + inline view toggle) ────────── */
.composer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 12px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 5px 7px 5px 5px;
  box-shadow: var(--shadow);
  transition: box-shadow 200ms var(--ease);
}
.composer:focus-within { box-shadow: var(--shadow-lg); }
.composer input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 13px 18px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  outline: none;
  border-radius: var(--radius-pill);
}
.composer input::placeholder { color: var(--ink-3); }

.view-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--overlay-toggle);
  padding: 3px;
  border-radius: var(--radius-pill);
}
.view-btn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              box-shadow 200ms var(--ease), transform 160ms var(--ease);
}
.view-btn svg { display: block; fill: currentColor; width: 16px; height: 16px; }
.view-btn:active { transform: scale(0.92); }
.view-btn[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* ── suggestion chips ─────────────────────────────── */
.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0 2px;
}
.suggestions:empty { margin: 0; }
.chip {
  appearance: none;
  border: 0;
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 9px 15px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 160ms var(--ease), background 160ms var(--ease),
              color 160ms var(--ease);
  animation: chip-in 240ms var(--ease) both;
  opacity: 0.75 !important;
}
.chip:active { transform: scale(0.94); background: var(--bg-soft); }
@media (hover: hover) { .chip:hover { color: var(--ink); } }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(-3px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── list (rows view) ─────────────────────────────── */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.row {
  position: relative;
  display: block;
  margin: 6px 0;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 200ms var(--ease);
}

.row .swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px;
  background: var(--danger);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.row.dragging .swipe-bg { opacity: 1; }

.row .body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--surface);
  border-radius: var(--radius-pill);
  transition: transform 240ms var(--ease), background 200ms var(--ease);
  cursor: pointer;
  user-select: none;
  touch-action: pan-y;
}
.row.dragging .body { transition: none; }
.row .body:active { background: var(--bg-soft); }

.row .text {
  flex: 1;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  display: inline-block;
}

/* long-press pre-delete pulse */
.row.holding .body { transform: scale(0.97); background: var(--bg-soft); }

/* ── View Transitions ─────────────────────────────────
   Every row gets a unique view-transition-name in JS. When the row migrates
   between active and purchased (or rows ↔ pills view), the browser captures
   before/after positions and morphs the element across the screen. */
::view-transition-group(*) {
  animation-duration: 480ms;
  animation-timing-function: var(--ease-leave);
}
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 360ms;
  animation-timing-function: var(--ease-leave);
}

/* ── empty state ─────────────────────────────────── */
.empty {
  margin: auto;
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.04em;
  animation: fade-in 320ms var(--ease) both;
}
.empty p { margin: 0; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── purchased block (always visible, pinned bottom) ── */
.purchased-block {
  flex-shrink: 0;
  margin: 0 -10px;
  padding: 8px 12px 10px;
  background: var(--overlay-soft);
  border-radius: 20px;
}
.purchased-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 8px 6px;
  margin-bottom: 4px;
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 999px;
}
.purchased-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.purchased-count {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.chev {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform 240ms var(--ease);
}
.purchased-block[data-open="true"] .chev { transform: rotate(45deg); }

.purchased-list {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 360ms var(--ease), opacity 200ms var(--ease);
}
/* When expanded: take natural height up to 33% of viewport, then scroll. */
.purchased-block[data-open="true"] .purchased-list {
  max-height: 33dvh;
  opacity: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* purchased rows: compact, flat, tinted, no shadow */
.purchased-list .row {
  background: var(--surface-2);
  box-shadow: none;
  margin: 4px 0;
  border-radius: var(--radius-pill);
}
.purchased-list .row .swipe-bg { display: none; }
.purchased-list .row .body {
  background: var(--surface-2);
  padding: 11px 20px;
  border-radius: var(--radius-pill);
}
.purchased-list .row .body:active { background: var(--bg-soft); }
.purchased-list .row .text {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   PILLS VIEW
   ═══════════════════════════════════════════════════ */

/* Each list (active + purchased) becomes a flex-wrap container of pills.
   Scoped per-id so they can have different paddings/margins. The numeric
   values below are the "spacious" baseline; data-density on body scales
   them down when the list grows. */
body[data-view="pills"] #active-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 2px;
  margin-top: 6px;
}
body[data-view="pills"] #purchased-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 0;
}

/* Base pill style — applies to every row in pills view. */
body[data-view="pills"] .row {
  margin: 0;
  border-radius: var(--radius-pill);
  overflow: visible;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: opacity 380ms var(--ease-leave),
              transform 400ms var(--ease-leave),
              box-shadow 200ms var(--ease);
}
body[data-view="pills"] .row .swipe-bg { display: none; }
body[data-view="pills"] .row .body {
  padding: 13px 21px;
  border-radius: var(--radius-pill);
  touch-action: manipulation;
}
body[data-view="pills"] .row .text {
  font-size: 17px;
  font-weight: 500;
}

/* Purchased pills: tinted, flat (no shadow), 1px-smaller text than active. */
body[data-view="pills"] #purchased-list .row {
  background: var(--surface-2);
  box-shadow: none;
}
body[data-view="pills"] #purchased-list .row .body {
  background: var(--surface-2);
  padding: 11px 19px;
}
body[data-view="pills"] #purchased-list .row .text {
  color: var(--ink-2);
  font-size: 16px;
}

/* ── density: normal — moderate fill, slightly tighter ─── */
body[data-view="pills"][data-density="normal"] #active-list { gap: 7px; }
body[data-view="pills"][data-density="normal"] #purchased-list { gap: 6px; }
body[data-view="pills"][data-density="normal"] .row .body { padding: 11px 18px; }
body[data-view="pills"][data-density="normal"] .row .text { font-size: 16px; }
body[data-view="pills"][data-density="normal"] #purchased-list .row .body { padding: 9px 16px; }
body[data-view="pills"][data-density="normal"] #purchased-list .row .text { font-size: 15px; }

/* ── density: compact — heavy fill, smallest still-readable size ─── */
body[data-view="pills"][data-density="compact"] #active-list { gap: 5px; }
body[data-view="pills"][data-density="compact"] #purchased-list { gap: 5px; }
body[data-view="pills"][data-density="compact"] .row .body { padding: 9px 14px; }
body[data-view="pills"][data-density="compact"] .row .text { font-size: 14.5px; }
body[data-view="pills"][data-density="compact"] #purchased-list .row .body { padding: 7px 13px; }
body[data-view="pills"][data-density="compact"] #purchased-list .row .text { font-size: 13.5px; }

/* In pills view the purchased block is always expanded; hide chevron
   and neutralize the toggle cursor since clicking it does nothing. */
body[data-view="pills"] .chev { display: none; }
body[data-view="pills"] .purchased-toggle { cursor: default; }
body[data-view="pills"] .purchased-list {
  max-height: 33dvh;
  opacity: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Long-press feedback in pills */
body[data-view="pills"] .row.holding { transform: scale(0.92); }