/* The vouch page — layout glue only; every control is a kit .md-* class.
   Designed at 390px, one-handed, opened from a text between sets. The wide view
   is the same page stretched: one column, same colours, the window scrolling
   instead of the list. */

html, body[data-screen='vouch'] { height: 100%; }
body[data-screen='vouch'] {
  background: hsl(var(--bg-secondary));
  color: hsl(var(--text-primary));
  overflow: hidden;
}
body[data-screen='vouch'] #app { height: 100%; }

.grv { display: flex; flex-direction: column; height: 100%; max-width: 560px; margin: 0 auto; }

/* --- the ask + the search, pinned --- */
.grv-top {
  flex: 0 0 auto; padding: 14px 16px 12px;
  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
}
.grv-ask { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }
/* Corners are Micdrop's, not this page's invention: Input and Button are
   rounded-lg (8px), Checkbox is rounded (4px), Badges are rounded-full. So the
   search box, the add box, Add and Send all sit at 8px, and so do the chips
   Peet ruled to match them; the ticks are 4px squares.
   16px text, and never less: Safari zooms the whole page in when you tap an
   input smaller than that, and never zooms back out. */
.grv-searchbox { position: relative; }
.grv-search {
  height: 40px; border-radius: var(--radius); font-size: 16px !important;
  padding-left: 14px; padding-right: 38px;
}
.grv-search::-webkit-search-cancel-button { -webkit-appearance: none; }
.grv-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: none; color: hsl(var(--text-tertiary));
  font: inherit; font-size: 20px; line-height: 1; padding: 0;
}
.grv-clear:active { background: hsl(var(--muted)); }

/* --- the list, and the A-Z rail in its gutter --- */
.grv-body { flex: 1 1 auto; min-height: 0; position: relative; }
.grv-list { height: 100%; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.grv-list::-webkit-scrollbar { display: none; }
/* floats over the list, the way it does on a phone — the rows keep their full
   width and just hold their text clear of it */
.grv-index {
  position: absolute; right: 0; top: 0; bottom: 0; width: 24px; z-index: 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 0; touch-action: none; user-select: none;
}
.grv-index button {
  border: none; background: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1;
  color: hsl(var(--text-tertiary));
}
.grv-index.dragging button { color: hsl(var(--brand-primary)); }
.grv-state {
  position: sticky; top: 0; z-index: 2;
  padding: 6px 26px 6px 16px; font-size: 12px; font-weight: 700;
  color: hsl(var(--text-secondary));
  background: hsl(var(--bg-tertiary));
  border-bottom: 1px solid hsl(var(--border));
}
.grv-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 26px 10px 16px; text-align: left;
  border: none; border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card)); color: inherit; font: inherit; cursor: pointer;
}
.grv-row:last-child { border-bottom: none; }
.grv-row:active { background: hsl(var(--bg-secondary)); }
.grv-row .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grv-row .n { font-size: 15px; font-weight: 600; line-height: 1.25; }
.grv-row .c { font-size: 12.5px; color: hsl(var(--text-tertiary)); }
.grv-row .md-check { flex: 0 0 auto; }
/* the kit's own checkbox, one step up in size for a thumb — 4px corners, the
   radius Micdrop's Checkbox draws */
.grv-row .md-check .box {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: 4px;   /* Micdrop's Checkbox: rounded-DEFAULT */
  font-size: 14px; border-color: hsl(var(--text-tertiary) / 0.55); background: transparent;
}
.grv-row .md-check.on .box { background: hsl(var(--brand-primary)); border-color: hsl(var(--brand-primary)); }

/* --- the club that isn't on the list: type one, save it, type the next --- */
.grv-added { margin-bottom: 10px; border-top: 1px solid hsl(var(--border)); }
.grv-add { display: flex; gap: 8px; }
.grv-add .md-input { flex: 1 1 auto; min-width: 0; height: 40px; font-size: 16px !important; border-radius: var(--radius); padding: 0 14px; }
.grv-add .md-btn { flex: 0 0 auto; height: 40px; border-radius: var(--radius); padding: 0 18px; }

/* --- what they have picked so far, and the one Send --- */
.grv-foot {
  flex: 0 0 auto; padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: hsl(var(--card)); border-top: 1px solid hsl(var(--border));
  box-shadow: 0 -8px 24px hsl(0 0% 0% / 0.22);
}
/* Three rows, then it scrolls — and the last one fades out so the tray reads as
   having more in it rather than as having stopped. Newest sits first, so the
   club just tapped is always the one on screen. */
.grv-picked {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
  max-height: 90px; overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 66px, transparent 90px);
  mask-image: linear-gradient(to bottom, #000 66px, transparent 90px);
}
.grv-picked:not(.more) { -webkit-mask-image: none; mask-image: none; }
.grv-picked::-webkit-scrollbar { display: none; }
.grv-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  height: 26px; padding: 0 8px 0 10px; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 500;
  background: hsl(var(--muted)); color: hsl(var(--text-primary));
  border: 1px solid hsl(var(--border));
}
.grv-chip i { font-style: normal; font-size: 14px; color: hsl(var(--text-tertiary)); }

.grv-send-btn { border-radius: var(--radius); }

/* --- after Send: one screen, centred, nothing left to do --- */
.grv-done {
  height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.grv-thanks { text-align: center; max-width: 22rem; }
.grv-thanks h1 { font-size: 26px; font-weight: 700; line-height: 1.2; }
.grv-thanks p { font-size: 18px; line-height: 1.35; margin-top: 10px; color: hsl(var(--text-secondary)); }
.grv-thanks .md-btn { margin-top: 30px; border-radius: var(--radius); padding: 0 20px; }

/* --- the send card in Greenroom's referrals drawer --- */
.grv-send { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   Wide — the same page, stretched: the window scrolls instead of the list, one
   column the full width, more room inside each row. NOTHING here changes a
   colour — every surface keeps the paint it has on a phone.
   -------------------------------------------------------------------------- */
@media (min-width: 760px) {
  html, body[data-screen='vouch'] { height: auto; overflow: visible; }
  body[data-screen='vouch'] #app { height: auto; }

  .grv { height: auto; max-width: none; }

  /* the ask and the search stay reachable down a 900-club page */
  .grv-top { position: sticky; top: 0; z-index: 10; padding: 18px 28px 14px; }
  .grv-ask { font-size: 21px; }
  .grv-search { max-width: 420px; height: 40px; }

  /* the rail is a thumb's tool — a mouse has a scrollbar and a search box */
  .grv-body { position: static; }
  .grv-index { display: none; }
  .grv-list { height: auto; overflow: visible; }
  .grv-state { padding: 7px 28px; }

  /* one column, and the name reads on one line beside its town */
  .grv-row { padding: 9px 28px; min-height: 0; }
  .grv-row .who { flex: 0 1 auto; flex-direction: row; align-items: baseline; gap: 10px; }
  .grv-row:hover { background: hsl(var(--bg-secondary)); }

  .grv-foot { position: sticky; bottom: 0; z-index: 10; padding: 12px 28px 14px; }
  .grv-picked {
    max-height: 64px;
    -webkit-mask-image: linear-gradient(to bottom, #000 40px, transparent 64px);
    mask-image: linear-gradient(to bottom, #000 40px, transparent 64px);
  }
  .md-btn.lg.grv-send-btn { width: auto; min-width: 200px; }

  .grv-done { min-height: 70vh; }
  .grv-thanks h1 { font-size: 30px; }
}

/* --- passing it on, and the screen a passed-on link opens --- */
.grv-pass {
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid hsl(var(--border));
}
.grv-pass h2 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.grv-pass p { font-size: 15px; margin-top: 6px; color: hsl(var(--text-secondary)); }
.grv-pass .md-btn { margin-top: 18px; border-radius: var(--radius); padding: 0 20px; }
.grv-passlink {
  display: block; margin-top: 14px; font-size: 13px;
  color: hsl(var(--text-tertiary)); text-decoration: none;
}
.grv-name { width: 100%; max-width: 20rem; }
/* --- the question on its own screen, in two beats ---
   The thanks lands first and the question arrives under it, because a comic who
   has just handed over twelve clubs is owed the acknowledgement before the next
   ask. Nothing below the question exists until it does. */
.grv-askscreen { max-width: 24rem; width: 100%; }
.grv-askscreen .grv-second { font-size: 26px; font-weight: 700; line-height: 1.2; margin-top: 54px; }
.grv-askscreen .grv-added { margin: 26px 0 0; border-top: 0; text-align: left; }
.grv-askscreen .grv-add { margin-top: 18px; }
/* Add sits in the row with its box — the thank-you screen's 30px drop on every
   button is for the one button that stands alone down there. */
.grv-askscreen .grv-add .md-btn { margin-top: 0; }

.grv-beats h1 { animation: grvIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.grv-beats .grv-second { animation: grvIn 300ms 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.grv-beats .grv-late { animation: grvIn 300ms 860ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Somebody who asked their phone to stop moving things gets all three at once. */
@media (prefers-reduced-motion: reduce) {
  .grv-beats h1, .grv-beats .grv-second, .grv-beats .grv-late { animation: none; }
}
.grv-askscreen .md-btn.lg { margin-top: 26px; width: 100%; }

.grv-name .grv-add { margin-top: 20px; }
.grv-name .md-input { text-align: center; }
.grv-joinerr { font-size: 13.5px; margin-top: 12px; color: hsl(var(--text-secondary)); }

/* --- one screen at a time: in from below, out upward --- */
@keyframes grvIn { from { opacity: 0; transform: translateY(16px); } }
.grv-enter { animation: grvIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.grv-leave {
  opacity: 0; transform: translateY(-18px);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.4, 0, 1, 1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .grv-enter { animation: none; }
  .grv-leave { transition: none; }
}

/* the name question: the field over the button, both the width of the block */
.grv-name .md-input {
  display: block; width: 100%; margin-top: 22px; height: 48px;
  font-size: 17px !important; text-align: center; border-radius: var(--radius);
}
.grv-name .md-btn.lg { width: 100%; margin-top: 12px; border-radius: var(--radius); }