/* ---------------- Base / Theme ---------------- */
* { box-sizing: border-box }
:root{
  /* JS sets --vh = window.innerHeight * 0.01 (see app.js) */
  --vh: 1vh;

  /* Layout tuning */
  --tabbar: 72px;     /* was 88px -> ~50% slimmer overall frame */
  --peek-frac: 0.16;  /* portion of viewport for top/bottom peeks */
  --gap-vh: 1.5;      /* gaps between slots, in vh */
  --actions-min: 112px; /* min space reserved for CTA area */

  /* Colors */
  --bg:#f3f5fb; --fg:#111827; --muted:#6b7280;
  --card:#ffffff; --border:#e5e7eb; --shadow:0 8px 18px rgba(17,24,39,.07);
  --chip:#eef2ff; --chip-text:#3b82f6;
  --accent:#3b82f6; --accent-ink:#0b4dcc;
  --up:#22c55e; --up-ink:#16a34a;
  --down:#ef4444; --down-ink:#b91c1c;

  /* Rounding */
  --radius-card: 12px;    /* was 22px → ~50% smaller */
  --radius-inner: 8px;    /* was 16px */
  --radius-pill: 12px;    /* was 22–24px */
}

html, body { height: 100% }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden; /* no free scroll */
}

.container{ max-width:none; margin:0; padding:0 }
h2{ margin:0 0 8px; font-weight:800 }
h3{ margin:0 0 8px }

/* ---------------- Auth cards ---------------- */
.card.auth{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  padding:12px; margin:10px 0;
}
.input{
  width:100%; padding:10px; border-radius:var(--radius-inner);
  border:1px solid var(--border); background:#fff; color:#111; margin:6px 0;
}
.button{
  width:100%; padding:10px; border-radius:var(--radius-inner); border:none;
  background:var(--accent); color:#fff; font-weight:800;
}

/* ---------------- Three-slot viewport (no free scroll) ---------------- */
.viewport{
  height: calc(var(--vh) * 100 - var(--tabbar));
  position: relative;
}

/* peeks use smaller padding and height for tighter look */
.slot{ position:absolute; left:0; right:0; padding:0; display:flex; justify-content:center }
.slot.prev{
  top:0;
  height: calc(var(--vh) * 100 * var(--peek-frac));
}
.slot.next{
  bottom:0;
  height: calc(var(--vh) * 100 * var(--peek-frac));
}
.slot.current{
  top: calc( (var(--vh) * 100 * var(--peek-frac)) + (var(--vh) * var(--gap-vh)) );
  height: calc(
    var(--vh) * 100
    - (var(--vh) * 100 * var(--peek-frac))
    - (var(--vh) * 100 * var(--peek-frac))
    - (var(--vh) * var(--gap-vh) * 2)
    - var(--tabbar)
  );
}

/* ---------------- Card ---------------- */
.card{
  width:100%; height:100%;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  padding:10px;                /* was 16px */
  overflow:hidden;
  display:flex; flex-direction:column;
  will-change: transform, opacity;
  transition: transform .24s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
  position: relative;
  /* single transition declaration above */
}

/* ---------------- Collapsed previous (top) ---------------- */
.collapsed .topline{ display:flex; gap:10px; align-items:flex-start }
.title{ font-weight:800; font-size:20px; line-height:1.2 } /* slightly smaller */
.subtitle{ color:var(--muted); margin-top:4px }
.statline{ margin-top:8px; color:#374151; font-weight:600 }

/* (Removed) range toggle (1D/1M/6M/1Y) */

/* Donut ring (only on collapsed-voted) */
.ring{ position:relative; width:64px; height:64px } /* smaller ring */
.ring svg{ transform:rotate(-90deg) }
.ring .txt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; text-align:center }

/* If collapsed card was skipped, hide stats/ring/range */
.collapsed.skipped .statline,
.collapsed.skipped .range,
.collapsed.skipped .pcnt { display:none }

/* Small thumbnail in previous voted card */
.thumb{ width:48px; height:48px; border-radius:var(--radius-inner); object-fit:cover; border:1px solid var(--border); flex:0 0 48px }

/* ---------------- Current (active) ---------------- */
.media{
  position:relative; width:100%;
  /* Make image tall but always leave room for title + sticky buttons */
  height: clamp(160px, 34vh, calc(100% - var(--actions-min) - 96px));
  border-radius:var(--radius-inner);
  overflow:hidden; border:1px solid var(--border);
  background: linear-gradient(180deg,#f8fafc,#eef2f7); /* graceful when image fails */
}
.media img{ width:100%; height:100%; object-fit:cover }
.chip{
  position:absolute; left:10px; top:10px;
  background:var(--chip); color:var(--chip-text);
  font-weight:800; padding:5px 10px; border-radius:var(--radius-pill);
}
.row{ display:flex; align-items:flex-start; gap:10px; margin-top:10px }

/* Sticky actions at bottom of CURRENT card */
.actions{
  position:absolute; left:10px; right:10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  background:#fff; padding-top:8px;
}
.actions::before{
  content:''; display:block; height:1px; background:#e5e7eb; margin-bottom:8px;
}
.cta{ display:flex; gap:10px }
.btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius:var(--radius-inner); font-weight:800; color:#fff; border:none;
}
.btn.down{ background:var(--down) }
.btn.down:active{ background:var(--down-ink) }
.btn.up{ background:var(--up) }
.btn.up:active{ background:var(--up-ink) }

/* ---------------- Next (peek) ---------------- */
.peek .media{ height:100% }
.peek .shade{ position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.22)) }
.peek .peek-title{
  position:absolute; left:12px; bottom:8px;
  font-weight:800; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* ---------------- Bottom Tabbar ---------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid var(--border);
  display:flex; justify-content:space-around; padding:8px 6px; z-index:50;
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  text-decoration:none; color:#6b7280; font-weight:700; font-size:11px;
}
.tab-ico{ font-size:18px; line-height:1 }
.tab.active{ color:#7c3aed }
.tab.active .tab-ico{ color:#7c3aed }
.tab.logout{ background:transparent; border:none; cursor:pointer; color:#6b7280; font-size:18px }

/* ---------------- Anim helpers ---------------- */
/* fresh inserts gently fade/settle (works with your existing .fade-in/.ready) */
.fade-in{ opacity:0; transform:translateY(6px) }
.fade-in.ready{ opacity:1; transform:translateY(0) }
.small{ color:var(--muted); font-size:12px }

/* current → prev: slide up a bit & fade */
.anim-out{
  transform: translateY(-16px) scale(.985);
  opacity: 0;
}

/* next → current: a subtle lift/scale as it promotes */
.promote{
  transform: translateY(-6px) scale(1.015);
}


/* Panes for search/analytics */
.pane{ position:absolute; inset:0; padding:10px }
.list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; overflow:auto }
.list-item{ display:flex; gap:10px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:var(--radius-inner); background:#fff }
.list-item .li-body{ display:flex; flex-direction:column }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px; overflow:auto }
.tile{ display:flex; flex-direction:column; gap:6px; align-items:center; padding:8px; border:1px solid var(--border); border-radius:var(--radius-inner); background:#fff }
.tile{ position:relative; min-height:120px }
.tile .thumb{ position:absolute; top:8px; left:8px; width:48px; height:48px; object-fit:cover; border-radius:var(--radius-inner); border:1px solid var(--border) }
.tile .badge{ position:absolute; top:8px; right:8px; font-size:20px }
.tile .name{ position:absolute; left:8px; right:8px; bottom:8px; font-weight:700; text-align:center }


/* toast */
.toast{ position:fixed; left:50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:#111827; color:#fff; padding:10px 14px; border-radius:10px; opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease; z-index:100 }
.toast.show{ opacity:1; transform:translate(-50%,-4px) }