/* Swipe voting styles (light theme, college colours).
   Everything lives under .swipe-app so it can't clash with Anvil's own theme.
   --tone is a direction's brand colour (fills, borders); --ink is a darker version of it that is
   readable as text on white; --on-tone is text placed on a --tone fill. */
.swipe-app {
  color-scheme: light;
  --blue: #005d84;
  --grey: #3d3d3d;
  --yellow: #fec35a;
  --green: #64b98a;
  --red: #ef4348;
  --purple: #5f4468;

  --bg: #f4f4f5;
  --surface: #ffffff;
  --text: var(--grey);
  --muted: #6b6b6b;
  --border: #dcdcde;
  --shadow: 0 10px 30px rgba(30, 30, 30, .12), 0 2px 6px rgba(30, 30, 30, .08);
  --accent: var(--blue);
  --radius: 20px;

  --t-up: var(--blue);     --i-up: var(--blue);     --o-up: #ffffff;
  --t-right: var(--green); --i-right: #2c7f55;      --o-right: #12321f;
  --t-neutral: #8a8a8a;    --i-neutral: #6b6b6b;    --o-neutral: #ffffff;
  --t-left: var(--yellow); --i-left: #9a6500;       --o-left: #3a2600;
  --t-down: var(--red);    --i-down: #cf2a30;       --o-down: #ffffff;
}

.swipe-app [data-tone="up"],      .swipe-app [data-hint="up"]      { --tone: var(--t-up);      --ink: var(--i-up);      --on-tone: var(--o-up); }
.swipe-app [data-tone="right"],   .swipe-app [data-hint="right"]   { --tone: var(--t-right);   --ink: var(--i-right);   --on-tone: var(--o-right); }
.swipe-app [data-tone="neutral"], .swipe-app [data-hint="neutral"] { --tone: var(--t-neutral); --ink: var(--i-neutral); --on-tone: var(--o-neutral); }
.swipe-app [data-tone="left"],    .swipe-app [data-hint="left"]    { --tone: var(--t-left);    --ink: var(--i-left);    --on-tone: var(--o-left); }
.swipe-app [data-tone="down"],    .swipe-app [data-hint="down"]    { --tone: var(--t-down);    --ink: var(--i-down);    --on-tone: var(--o-down); }

/* Only on the swipe page: lock the page itself so it never scrolls or bounces, whatever Anvil wraps around it. */
html:has(.swipe-app), body:has(.swipe-app) {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #f4f4f5;
  overscroll-behavior: none;          /* stops pull-to-refresh on a downward swipe */
}
.swipe-app, .swipe-app * { box-sizing: border-box; }
.swipe-app {
  position: fixed;                    /* pinned to the screen, so there is nothing to scroll */
  inset: 0;
  z-index: 10;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;                   /* cards flying off and the spinning logo never cause sideways scroll */
  padding: env(safe-area-inset-top) 16px calc(env(safe-area-inset-bottom) + 16px);
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;                 /* no page panning or pinch-zoom; taps and swipes still work */
}
.swipe-app button { font: inherit; cursor: pointer; }
.swipe-app .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.swipe-app .screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.swipe-app .screen[hidden] { display: none; }

/* ---------- Intro ---------- */
.swipe-app .intro { justify-content: center; align-items: center; gap: 18px; text-align: center; }
.swipe-app .logo-full { width: 230px; max-width: 70vw; aspect-ratio: 842 / 373; background: url("logo-full.png") center / contain no-repeat; }
.swipe-app h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.swipe-app h2 { margin: 0; font-size: 26px; }
.swipe-app .lede { margin: 0; color: var(--muted); font-size: 15px; }
.swipe-app .key {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px 14px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 320px;
  margin: 6px 0;
}
.swipe-app .key__card { grid-column: 2; grid-row: 2; width: 60px; height: 80px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.swipe-app .key__item { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.swipe-app .key__item b { font-size: 20px; }
.swipe-app .key__up { grid-column: 2; grid-row: 1; }
.swipe-app .key__left { grid-column: 1; grid-row: 2; justify-self: end; }
.swipe-app .key__right { grid-column: 3; grid-row: 2; justify-self: start; }
.swipe-app .key__down { grid-column: 2; grid-row: 3; }
.swipe-app .neutral-note { margin: 0; font-size: 14px; color: var(--muted); }
.swipe-app .btn-primary {
  appearance: none; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 17px; font-weight: 600;
  padding: 14px 36px; min-height: 48px;
}
.swipe-app .fineprint { margin: 0; font-size: 12px; color: var(--muted); max-width: 300px; }

/* ---------- Deck ---------- */
.swipe-app .topbar { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.swipe-app .progress { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.swipe-app .progress__bar { height: 100%; width: 0; background: var(--purple); transition: width .3s ease; }
.swipe-app .progress__label { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }

.swipe-app .stage {
  position: relative;
  flex: 1;
  min-height: 0;
  touch-action: none;                 /* stops the page scrolling on up/down swipes */
  user-select: none;
  -webkit-user-select: none;
}
.swipe-app .card {
  position: absolute;
  inset: 36px 34px;
  margin: auto;
  max-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 22px;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  touch-action: none;
  cursor: grab;
  outline: none;
  will-change: transform;
  transition: transform .28s ease, opacity .28s ease, border-color .12s;
}
.swipe-app .card:focus-visible { box-shadow: var(--shadow), 0 0 0 3px var(--accent); }
.swipe-app .card.is-dragging { transition: border-color .12s; cursor: grabbing; }
.swipe-app .card[data-tone] { border-color: var(--tone); }
.swipe-app .card--behind { transform: scale(.94) translateY(12px); opacity: .6; pointer-events: none; box-shadow: none; }
.swipe-app .card__logo { position: absolute; top: 14px; right: 16px; width: 42px; height: 29px; background: url("logo-mark.png") center / contain no-repeat; pointer-events: none; }
.swipe-app .card__count { position: absolute; top: 16px; left: 22px; font-size: 13px; color: var(--muted); }
.swipe-app .card__text { margin: 0; font-size: clamp(20px, 5.6vw, 26px); line-height: 1.3; font-weight: 650; text-wrap: balance; }
.swipe-app .card__stamp {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; border: 2px solid var(--tone);
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; white-space: nowrap;
  opacity: 0; pointer-events: none;
}

.swipe-app .hint {
  position: absolute;
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--muted);
  pointer-events: none;
  transition: color .12s, scale .12s;
}
.swipe-app .hint--up { top: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.swipe-app .hint--down { bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.swipe-app .hint--left, .swipe-app .hint--right { top: 50%; transform: translateY(-50%); flex-direction: column; width: 30px; }
.swipe-app .hint--left { left: 0; }
.swipe-app .hint--right { right: 0; }
.swipe-app .hint b { font-size: 16px; }
.swipe-app .hint--left > span, .swipe-app .hint--right > span { writing-mode: vertical-rl; letter-spacing: .02em; }
.swipe-app .hint--left > span { transform: rotate(180deg); }
.swipe-app .hint.is-near, .swipe-app .hint.is-active { color: var(--ink); }
.swipe-app .hint.is-active { scale: 1.15; }

/* ---------- Button bar ---------- */
.swipe-app .controls { padding-top: 10px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.swipe-app .vbtn { appearance: none; background: none; border: 0; padding: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); }
.swipe-app .vbtn__icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
  border: 2px solid var(--tone); color: var(--ink); background: var(--surface);
  transition: background .12s, color .12s, transform .1s;
}
.swipe-app .vbtn[data-vote="left"] .vbtn__icon, .swipe-app .vbtn[data-vote="right"] .vbtn__icon { width: 48px; height: 48px; font-size: 20px; }
.swipe-app .vbtn[data-vote="neutral"] .vbtn__icon { width: 44px; height: 44px; font-size: 13px; font-weight: 600; border-style: dashed; }
.swipe-app .vbtn__label { font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; }
.swipe-app .vbtn:active .vbtn__icon, .swipe-app .vbtn.is-active .vbtn__icon { background: var(--tone); color: var(--on-tone); border-style: solid; transform: scale(1.06); }

/* ---------- Done / message screens ---------- */
.swipe-app .message { touch-action: pan-y; justify-content: center; align-items: center; text-align: center; gap: 14px; overflow-y: auto; padding: 24px 0; }

/* Thank-you logo: the rings spin in, then the words slide out from behind them.
   Both layers are the full logo canvas split in two, so they line up exactly. */
.swipe-app .logo-reveal { position: relative; width: 260px; max-width: 78vw; aspect-ratio: 842 / 373; margin-bottom: 8px; }
.swipe-app .logo-reveal__rings,
.swipe-app .logo-reveal__words { position: absolute; inset: 0; background: center / contain no-repeat; }
.swipe-app .logo-reveal__rings { background-image: url("logo-rings.png"); z-index: 1; transform-origin: 72% 49%; }
.swipe-app .logo-reveal__clip { position: absolute; inset: 0; clip-path: inset(0 44% 0 0); }  /* words only show left of the rings' centre */
.swipe-app .logo-reveal__words { background-image: url("logo-words.png"); }
.swipe-app .logo-reveal.is-playing .logo-reveal__rings { animation: rings-in .9s cubic-bezier(.2, .9, .3, 1.15) both; }
.swipe-app .logo-reveal.is-playing .logo-reveal__words { animation: words-out .7s cubic-bezier(.2, .8, .2, 1) .75s both; }
@keyframes rings-in { from { transform: rotate(-160deg) scale(.3); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes words-out { from { transform: translateX(56%); } to { transform: none; } }

.swipe-app .status { margin: 0; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.swipe-app .status.is-error { color: var(--i-down); font-weight: 600; }
.swipe-app .summary { width: 100%; text-align: left; background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; padding: 12px 16px; font-size: 14px; }
.swipe-app .summary[hidden] { display: none; }
.swipe-app .summary p { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.swipe-app .summary ul { list-style: none; margin: 0; padding: 0; }
.swipe-app .summary li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.swipe-app .pill { flex: none; white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--tone); color: var(--on-tone); font-weight: 700; font-size: 12px; }
.swipe-app .btn-link { appearance: none; background: none; border: 0; color: var(--accent); text-decoration: underline; font-size: 14px; padding: 8px; }
.swipe-app .btn-link[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .swipe-app .card { transition-duration: .01s; }
  .swipe-app .logo-reveal.is-playing * { animation-duration: .01s !important; animation-delay: 0s !important; }
}