/* roulette.css — the 🎲 Roulette result card (roulette.js). House popover
 * style (kit.css .kit-borrow-pop): fixed, accent top rule, --jamn-* tokens.
 * It stays open while you play the pads (no outside-click dismiss) so
 * "Spin again" is one tap away; ✕ / Esc closes it. */

/* Owner bug report (2026-09-27): Filters could run past the bottom of the
 * viewport with no way to reach them — `max-height` here used to be a FIXED
 * function of the viewport alone, with no regard for where roulette.js's
 * place() actually put `top` (a button low on the page could push the
 * whole card's bottom edge off-screen, and a position:fixed element gets
 * no scrollbar for THAT — only for its own content exceeding its own box).
 * Fix, in two parts:
 *   1. place() (roulette.js#placeCard) now sets an inline `top`/`max-height`
 *      that's actually the room available on whichever side of the anchor
 *      it opened, so the box itself never claims more height than fits.
 *   2. This is now a column flexbox with ONE scrolling region (.rlt-body):
 *      header and the Spin/Keep/♡ row are outside it, so they can never be
 *      the thing that scrolls out of reach — only Filters can, and now it
 *      always CAN (scrollIntoView / a mouse wheel reaches it), matching the
 *      "Advanced: pick sides" bug report exactly. */
.rlt-card {
  position: fixed;
  z-index: 1003;
  width: 336px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 88px); /* placeCard overrides this inline once placed */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 12px 12px;
  border: 1px solid var(--jamn-border, #2A2A36);
  border-top: 2px solid var(--jamn-accent, #8B5CF6);
  border-radius: var(--jamn-radius-md, 12px);
  background: var(--jamn-surface1, #14141A);
  color: var(--jamn-text, #fff);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  box-sizing: border-box;
}

.rlt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  margin-bottom: 8px;
}

/* The one scrollable region — mode chips, the result card and Filters.
 * min-height: 0 is load-bearing on a flex child: without it the column
 * never shrinks below its content's natural height, so overflow-y:auto
 * would never actually engage no matter how tall Filters got. */
.rlt-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Below ~560px wide (isSheetLayout) there's no room beside/under a button
 * for a floating 336px card without it spanning the screen anyway, so it
 * opens as a full-width sheet from the bottom instead — same head/body/
 * actions structure, just anchored to the viewport edges by CSS rather
 * than roulette.js#placeCard (place() clears the inline geometry and
 * leaves sizing entirely to this rule while `.is-sheet` is set). */
.rlt-card.is-sheet {
  left: 0 !important;
  right: 0;
  top: auto !important;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  max-height: min(85vh, calc(100dvh - 24px)) !important;
  border-radius: var(--jamn-radius-md, 12px) var(--jamn-radius-md, 12px) 0 0;
  border-bottom: none;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.rlt-title { font-size: 13px; font-weight: 700; }

.rlt-close {
  appearance: none;
  border: none;
  background: none;
  color: var(--jamn-text2, #A1A1AA);
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
}
.rlt-close:hover { color: var(--jamn-text, #fff); }

/* Segmented groups (mode + scope) — the toolbar's segmented shell. */
.rlt-seg {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--jamn-border, #2A2A36);
  border-radius: 8px;
  margin-bottom: 8px;
}

.rlt-seg-btn {
  appearance: none;
  flex: 1 1 0;
  border: 0;
  background: transparent;
  color: var(--jamn-text2, #A1A1AA);
  font: inherit;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.rlt-seg-btn.is-on { background: var(--jamn-accent, #8B5CF6); color: var(--jamn-text, #fff); }
.rlt-seg-btn:disabled { opacity: .35; cursor: default; }

.rlt-result { margin-bottom: 8px; }

.rlt-pair { font-size: 13px; font-weight: 700; line-height: 1.35; }
.rlt-dot { color: var(--jamn-text2, #A1A1AA); font-weight: 400; }

.rlt-mode-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--jamn-accent, #8B5CF6);
  color: var(--jamn-accent, #8B5CF6);
  font-size: 11px;
  font-weight: 600;
}

.rlt-why { margin: 6px 0 4px; padding-left: 16px; color: var(--jamn-text, #fff); }
.rlt-why li { margin: 1px 0; }

.rlt-borrow, .rlt-conform { color: var(--jamn-text2, #A1A1AA); margin-top: 3px; }
/* Slip's Roulette hint (§4.1) — an amber accent, matching the Slip pads
 * page's own tint, so it reads as "here's a move you can make now". */
.rlt-slip-hint { color: #F59E0B; margin-top: 5px; font-size: 12px; }
.rlt-credit { color: var(--jamn-text3, #71717A); font-size: 10.5px; margin-top: 3px; }

.rlt-status { margin-top: 6px; color: var(--jamn-text2, #A1A1AA); min-height: 1em; }
.rlt-status.is-error { color: var(--jamn-danger, #F87171); }

.rlt-spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--jamn-border, #2A2A36);
  border-top-color: var(--jamn-accent, #8B5CF6);
  border-radius: 50%;
  animation: rlt-spin .8s linear infinite;
}
@keyframes rlt-spin { to { transform: rotate(360deg); } }

/* Pinned footer (outside .rlt-body's scroll) — flex: 0 0 auto keeps its
 * height out of the column's shrink calculation so it never gets squeezed
 * or scrolled away regardless of how tall Filters gets above it. */
.rlt-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-top: 10px; }

.rlt-spin, .rlt-keep, .rlt-fav, .rlt-adv, .rlt-side-btn, .rlt-swap, .rlt-chip {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-radius: 8px;
}

.rlt-spin {
  flex: 1 1 auto;
  font-weight: 700;
  padding: 6px 10px;
  border: 1px solid var(--jamn-accent, #8B5CF6);
  background: var(--jamn-accent, #8B5CF6);
  color: var(--jamn-text, #fff);
}
.rlt-spin:disabled { opacity: .6; cursor: default; }

.rlt-keep, .rlt-fav {
  padding: 6px 10px;
  border: 1px solid var(--jamn-accent, #8B5CF6);
  background: transparent;
  color: var(--jamn-accent, #8B5CF6);
  font-weight: 600;
}
.rlt-keep.is-on { background: rgba(139, 92, 246, .18); }
.rlt-keep:disabled, .rlt-fav:disabled { opacity: .4; cursor: default; }

.rlt-filters-wrap { border-top: 1px solid var(--jamn-border, #2A2A36); padding-top: 8px; }

.rlt-filters-toggle {
  appearance: none;
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: var(--jamn-text2, #A1A1AA);
  font-weight: 600;
  padding: 2px 0;
}
.rlt-filters-toggle:hover, .rlt-filters-toggle[aria-expanded="true"] { color: var(--jamn-text, #fff); }

.rlt-filters { padding-top: 8px; }

.rlt-label { color: var(--jamn-text2, #A1A1AA); font-weight: 600; margin-bottom: 4px; }

.rlt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 104px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.rlt-chip {
  padding: 2px 8px;
  border: 1px solid var(--jamn-border, #2A2A36);
  background: transparent;
  color: var(--jamn-text2, #A1A1AA);
}
.rlt-chip.is-on {
  border-color: var(--jamn-accent, #8B5CF6);
  background: rgba(139, 92, 246, .18);
  color: var(--jamn-text, #fff);
}

.rlt-hint { color: var(--jamn-text3, #71717A); }

.rlt-adv {
  border: 0;
  background: none;
  color: var(--jamn-text2, #A1A1AA);
  padding: 2px 0;
  margin-bottom: 6px;
}
.rlt-adv:hover, .rlt-adv.is-on { color: var(--jamn-text, #fff); }

.rlt-sides { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

.rlt-side-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--jamn-border, #2A2A36);
  background: transparent;
  color: var(--jamn-text, #fff);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rlt-side-btn.is-open { border-color: var(--jamn-accent, #8B5CF6); }

.rlt-swap {
  padding: 4px 8px;
  border: 1px solid var(--jamn-border, #2A2A36);
  background: transparent;
  color: var(--jamn-text2, #A1A1AA);
}
.rlt-swap:hover { color: var(--jamn-text, #fff); }

.rlt-mine { display: flex; align-items: center; gap: 4px; color: var(--jamn-text2, #A1A1AA); }

.rlt-card button:focus-visible { outline: 2px solid var(--jamn-accent, #8B5CF6); outline-offset: 1px; }