.pagination-container {
  display: flex;
  justify-content: center;
}


.chuds-amount {
  /* border: 0px; */
  padding: 0;
  margin: 0;
  font-size: 2em;
  text-align: center;
  max-width: 80px;
}

ul.timeline {
  list-style-type: none;
  position: relative;
}
ul.timeline:before {
  content: ' ';
  background: #d4d9df;
  display: inline-block;
  position: absolute;
  left: 29px;
  width: 2px;
  height: 100%;
  z-index: 400;
}
ul.timeline > li {
  margin: 20px 0;
  padding-left: 20px;
}
ul.timeline > li:before {
  content: ' ';
  background: white;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border: 3px solid #22c0e8;
  left: 20px;
  width: 20px;
  height: 20px;
  z-index: 400;
}

.icon-text-white {
  /* 
    https://isotropic.co/tool/hex-color-to-css-filter/
  */
  
  filter: invert(97%) sepia(98%) saturate(64%) hue-rotate(271deg) brightness(115%) contrast(100%);
}

.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.fade-highlight {
  transition: background-color 2s ease-out;
  background-color: transparent !important;
}

.pagy {
  display: flex;
  font-family: sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #6b7280;
}
.pagy > :not([hidden]) ~ :not([hidden]) {
  --space-reverse: 0;
  margin-right: calc(0.25rem * var(--space-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--space-reverse)));
}
.pagy a:not(.gap) {
  display: block;
  text-decoration: none;
  border-radius: 0.5rem;
  background-color: #e5e7eb;
  padding: 0.25rem 0.75rem;
  color: inherit;
}
.pagy a:not(.gap):hover {
  background-color: #d1d5db;
}
.pagy a:not(.gap):not([href]) { /* disabled links */
  cursor: default;
  background-color: #f3f4f6;
  color: #d1d5db;
}
.pagy a:not(.gap).current {
  background-color: #9ca3af;
  color: white;
}
.pagy label {
  white-space: nowrap;
  display: inline-block;
  border-radius: 0.5rem;
  background-color: #e5e7eb;
  padding: 0.125rem 0.75rem;
}
.pagy label input {
  line-height: 1.5rem;
  border-radius: 0.375rem;
  border-style: none;
  background-color: #f3f4f6;
}

/* Row striping stays as you have */


/* Qty pills for line items */
.qty-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 28px; border-radius: 8px;
  font-weight: 700; color: #fff; padding: 0 .5rem;
}

/* ===== performers/pay page only ===== */
#performers-pay {
  background-image: url("/assets/GrossProphets-StoryBKG-Clouds-9x16-39928e9f.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Hero */
#performers-pay .pay-hero .hero-inner {
  max-width: 560px;
}
#performers-pay .pay-hero .hero-title {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-weight: 800;
}
#performers-pay .pay-hero .hero-subtitle {
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  margin-bottom: 0.75rem;
}
#performers-pay .pay-hero .hero-mascot {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Remaining chuds pill */
#performers-pay .balance-pill {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  min-width: 70px;  /* keep pill shape */
}

/* Performer cards: soft glass on white so bg peeks through */
#performers-pay .performer-card {
  background: rgba(255, 255, 255, 0.78);              /* <= transparency */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1rem;
  backdrop-filter: saturate(140%) blur(4px);           /* subtle glass */
  -webkit-backdrop-filter: saturate(140%) blur(4px);   /* iOS Safari */
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.6) inset !important;            /* faint top shine */
}

/* Two-line stacked name style (subtle stylization like the mock) */
#performers-pay .name-stack .name-top { letter-spacing: .04em; }
#performers-pay .name-stack .name-bottom { letter-spacing: .06em; font-size: 1.05rem; }

/* Quantity control */
/* The overall pill */
#performers-pay .qty-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: 1.25rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.06),
    0 2px 6px rgba(0,0,0,.08);
}

/* Kill outlines/borders/backgrounds on +/– so it feels like one pill */
#performers-pay .qty-pill .qty-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .25rem .5rem;          /* bigger tap target */
  line-height: 1;
}
#performers-pay .qty-pill .qty-btn:focus,
#performers-pay .qty-pill .qty-btn:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Icon sizing inside the pill */
#performers-pay .qty-pill .qty-btn svg {
  width: 22px;
  height: 22px;
}

/* The number field melts into the pill */
#performers-pay .qty-pill .qty-input {
  width: 2.5rem;
  text-align: center;
  border: 0;
  background: transparent;
  box-shadow: none !important;
  font-weight: 800;
  font-size: 1.25rem;
  padding: 0;
}
#performers-pay .qty-pill .qty-input:focus {
  outline: none;
  box-shadow: none;
}

/* Optional: tighter look—remove any residual Bootstrap borders */
#performers-pay .qty-pill .btn-warning,
#performers-pay .qty-pill .btn-outline-secondary {
  border: 0 !important;
  background: transparent !important;
}


#performers-pay .qty-input {
  width: 2.5rem;
  background: transparent;
  font-weight: 700;
  font-size: 1.25rem;
  padding: 0;
  height: 2rem;
  line-height: 2rem;
}
#performers-pay .qty-input:focus {
  box-shadow: none;
}
#performers-pay .qty-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Sticky CTA
#performers-pay .send-chuds-cta {
  background: linear-gradient(to top, rgba(255,255,255,.9), rgba(255,255,255,0));
} */

.transparent-glass {
  position: relative;
  backdrop-filter: blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
              inset 0 4px 20px rgba(255, 255, 255, 0.3);

}
.transparent-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
              inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}


.glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2), 
              inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

.glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  backdrop-filter: blur(1px);
  box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
              inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
  opacity: 0.6;
  z-index: -1;
  filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}
/* The dashboard's tabs. Bootstrap 5.0.2 has no .nav-underline — it arrived in
   5.3 — and the tabs here are plain links rather than a JS component, because
   which screen the operator is on has to survive a redirect and a reload. */
.nav-underline .nav-link {
  border-bottom: 2px solid transparent;
  color: var(--bs-gray-700, #495057);
  padding-bottom: 0.5rem;
}

.nav-underline .nav-link:hover,
.nav-underline .nav-link:focus {
  border-bottom-color: var(--bs-gray-400, #ced4da);
}

.nav-underline .nav-link.active {
  border-bottom-color: var(--bs-primary, #0d6efd);
  color: var(--bs-primary, #0d6efd);
  font-weight: 600;
}

.dashboard-tabs .nav-link.active {
  border-bottom-width: 3px;
}

/* While the next screen is on its way. A tab press that looks like nothing
   happened gets pressed again. */
.dashboard-tabs.is-loading .nav-link.is-target::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.4em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gp-spin 0.6s linear infinite;
}

@keyframes gp-spin {
  to { transform: rotate(360deg); }
}

/* The busy state of a segmented control. The spinner sits BESIDE the label
   rather than replacing it: the label vanishing for a moment reads as the
   button having lost its mind. */
.segmented__btn.is-busy::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.4em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gp-spin 0.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-tabs.is-loading .nav-link.is-target::after,
  .segmented__btn.is-busy::after { animation: none; }
}

/* ---------------------------------------------------------------------------
   The dashboard, on a phone, in a booth. Bootstrap 5.0.2 is what this app has;
   everything below is what 5.0.2 does not carry.
   --------------------------------------------------------------------------- */

/* Flash as an overlay rather than a block in the flow. Fixed, so nothing under
   it moves when a cue lands mid-show. */
.admin-toasts {
  position: fixed;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  width: min(36rem, calc(100vw - 1.5rem));
}

.admin-toasts .alert {
  margin-bottom: 0.5rem;
}

/* The tabs scroll rather than wrap: a second row of tabs moves every control on
   the screen down, and the operator is reading this one-handed. Edge to edge on
   a phone, so the scroll is visibly a scroll. */
.dashboard-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* The muted rule the active underline sits on. The underline is thicker and
     sits over this, so the selected tab reads as a mark on the line rather than
     a break in it. */
  border-bottom: 1px solid var(--bs-gray-300, #dee2e6);
  /* Soft at both ends rather than a hard cut, so a tab half out of view reads
     as "there is more" instead of as a clipped word. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.25rem,
                                      #000 calc(100% - 1.25rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 1.25rem,
                              #000 calc(100% - 1.25rem), transparent 100%);
}

.dashboard-tabs::-webkit-scrollbar {
  display: none;
}

.dashboard-tabs .nav-link {
  white-space: nowrap;
  /* Over the nav's own rule, not above it. */
  margin-bottom: -1px;
}

/* The show header: what is true on every tab. */
.show-header .show-header__qr {
  line-height: 1;
  color: var(--bs-gray-600, #6c757d);
  text-decoration: none;
}

.show-header .show-header__qr:hover {
  color: var(--bs-primary, #0d6efd);
}

.show-header__qr svg {
  width: 1rem;
  height: 1rem;
}

/* Three tiles, equal width, each a link to the screen that changes it. */
.show-tiles {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

.show-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  height: 100%;
  padding: 0.5rem 0.25rem;
  border-top: 1px solid var(--bs-gray-200, #e9ecef);
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.show-tile:hover,
.show-tile:focus {
  background-color: var(--bs-gray-100, #f8f9fa);
  color: inherit;
}

.show-tile__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-gray-600, #6c757d);
}

.show-tile__value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.show-tile__value--success { color: var(--bs-success, #198754); }
.show-tile__value--info    { color: var(--bs-info, #0dcaf0); }
.show-tile__value--warning { color: var(--bs-warning, #ffc107); }
.show-tile__value--dark    { color: var(--bs-dark, #212529); }
.show-tile__value--secondary { color: var(--bs-gray-600, #6c757d); }

/* The segmented control. One pill, moved by a custom property the server sets,
   so the browser animates the move and there is no JS to keep in step with the
   state. Each segment stays its own form: the URL a segment posts to is the URL
   the QLab cue fires. */
.segmented {
  position: relative;
  display: flex;
  padding: 0.25rem;
  background-color: var(--bs-gray-200, #e9ecef);
  border-radius: 0.5rem;
}

.segmented__pill {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc((100% - 0.5rem) / var(--segments));
  border-radius: 0.375rem;
  background-color: var(--bs-secondary, #6c757d);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform: translateX(calc(100% * var(--segment-index)));
  transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.segmented__pill--success { background-color: var(--bs-success, #198754); }
.segmented__pill--info    { background-color: var(--bs-info, #0dcaf0); }
.segmented__pill--warning { background-color: var(--bs-warning, #ffc107); }
.segmented__pill--dark    { background-color: var(--bs-dark, #212529); }
.segmented__pill--secondary { background-color: var(--bs-gray-600, #6c757d); }

@media (prefers-reduced-motion: reduce) {
  .segmented__pill { transition: none; }
}

.segmented__form {
  flex: 1 1 0;
  min-width: 0;
}

.segmented__btn {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--bs-gray-700, #495057);
  font-weight: 500;
  white-space: nowrap;
}

.segmented__btn.is-current {
  color: #fff;
  font-weight: 600;
}

/* Warning is the one state light enough that white text on it fails to read. */
.segmented__pill--warning ~ .segmented__form .segmented__btn.is-current {
  color: var(--bs-dark, #212529);
}

/* A segment the server will not accept. The quiz uses one: a question the room
   has already been shown the answer to cannot go back up, so "open" is offered
   greyed rather than as a button whose only outcome is a refusal. */
.segmented__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.segmented.is-pending {
  opacity: 0.6;
  cursor: progress;
}

/* The destructive end of a screen, fenced off. */
.danger-zone {
  border-color: var(--bs-danger, #dc3545);
}

.danger-zone__title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

/* One performer, as a card. The table this replaces ran off the side of a
   phone, and the ID column was the widest thing on it. */
.performer-card {
  padding: 0.75rem;
  border: 1px solid var(--bs-gray-300, #dee2e6);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #fff;
  transition: opacity 0.15s ease-in-out, border-color 0.15s ease-in-out;
  cursor: pointer;
}

/* Everyone who is not the one being paid. The number about to be typed belongs
   to one person, and that has to be unmistakable at a glance. */
.performer-card.is-muted {
  opacity: 0.4;
}

.performer-card.is-open {
  border-color: var(--bs-primary, #0d6efd);
}

.performer-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.performer-card__avatar {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

.performer-card__avatar--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bs-dark, #212529);
}

.performer-card__who {
  min-width: 0;
  flex: 1 1 auto;
}

.performer-card__name {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
}

.performer-card__meta {
  color: var(--bs-gray-600, #6c757d);
  font-size: 0.875rem;
}

.performer-card__sep {
  margin: 0 0.25rem;
}

.performer-card__chuds {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.05;
}

.performer-card__chuds-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
}

.performer-card__chuds-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-gray-600, #6c757d);
}

.performer-card__controls {
  margin-top: 0.75rem;
}

/* The modal's scrim. Bootstrap 5.0.2 renders .modal-backdrop at 0.5 opacity;
   over a page that is mostly white cards it reads as barely there, and what is
   behind the QR keeps competing with it. */
.modal-backdrop.show {
  opacity: 0.7;
}

.modal-content {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
}

.attendee-optin svg {
  width: 0.85em;
  height: 0.85em;
}

/* The drag handle for reordering quiz questions, moments and answers. A
   dedicated cursor and focus ring, rather than an icon font pulled in for one
   glyph — the dots read as a handle on their own. */
.drag-handle {
  cursor: grab;
  display: inline-block;
  padding: 0 0.35em;
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.drag-handle:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

/* Wide admin tables, on a phone.
   Below md a table that does not FIT stops being a grid and becomes one card
   per row: every cell on its own line with its column heading beside it. Both
   halves of that come from the stacked-table Stimulus controller — the heading
   text, because CSS cannot read another element's text, and the is-stacked
   class, because CSS cannot ask whether a table overflowed. A narrow table
   keeps its columns: stacking a three-column list of levels would turn short
   rows into three lines each for no gain.

   The alternative was the sideways scroll that .table-responsive gives, which
   hides half of every row behind a gesture nobody makes in a booth. */
@media (max-width: 767.98px) {
  .table-stacked.is-stacked thead {
    /* Not display:none — that takes the headings out of the accessibility tree
       as well, and they are still the names of the values below. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table-stacked.is-stacked,
  .table-stacked.is-stacked tbody,
  .table-stacked.is-stacked tr,
  .table-stacked.is-stacked td {
    display: block;
    width: auto;
  }

  .table-stacked.is-stacked tr {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--bs-body-bg, #fff);
  }

  /* Striping is a row-level cue and rows are cards now, so it reads as a card
     colour rather than as a stripe. */
  .table-stacked.is-stacked.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: transparent;
  }

  .table-stacked.is-stacked td {
    border: 0;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
    padding: 0.5rem 0;
    text-align: left;
  }

  .table-stacked.is-stacked tr > td:last-child {
    border-bottom: 0;
  }

  /* The label, from the controller. A cell with no data-label — an actions
     column, whose heading is deliberately blank — just takes the full width. */
  .table-stacked.is-stacked td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.125rem;
  }

  /* A cell holding nothing would otherwise be a label with a blank under it. */
  .table-stacked.is-stacked td:empty {
    display: none;
  }
}

/* A setting's value in the list. Long ones are truncated server-side; this is
   what keeps a value with no spaces in it — a key, a URL, a minified line —
   from pushing the column wider than the screen anyway. */
.setting-preview {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 0.875rem;
}

/* The quiz card's heading is its own toggle, so the whole width of it is a
   target for a thumb in the dark rather than a chevron at one end. It is a
   button, so Bootstrap's link styling has to be undone to leave the heading
   looking like a heading. */
.quiz-card__toggle {
  color: inherit;
  border: 0;
  background: none;
}

.quiz-card__toggle:hover,
.quiz-card__toggle:focus {
  color: inherit;
}

/* Which way the card is facing. Rotates rather than swapping glyphs, so there
   is one thing to look at and it moves. */
.quiz-card__toggle::after {
  content: "\203A";
  float: right;
  margin-left: 0.5rem;
  transform: rotate(90deg);
  transition: transform 0.15s ease-in-out;
  display: inline-block;
}

.quiz-card__toggle[aria-expanded="false"]::after {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .quiz-card__toggle::after { transition: none; }
}

/* A takeover: the whole phone, with nothing to close it.
   Used by the two moments the show cannot proceed past — a quiz question the
   room is answering, and the "I'm ready" the operator is waiting on. Both stay
   until the operator moves on, which is why there is no close control here to
   style: there isn't one. */
.takeover {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Participation: the page behind is gone. Being about to go on stage is not
   something to read past, so there is nothing behind the card to look at. */
.takeover--blocking {
  background: var(--bs-dark, #212529);
}

/* The quiz: a big card sitting high, with the page dimmed but still there
   behind it. The room is answering a question, not leaving the site — and the
   card is toward the top so a thumb reaches the answers without stretching. */
.takeover--quiz {
  background: rgba(0, 0, 0, 0.6);
  align-items: flex-start;
  padding-top: 3.5rem;
}

.takeover--quiz .takeover__inner {
  max-width: 36rem;
}

.takeover--quiz .takeover__card {
  padding: 1.5rem;
}

.takeover__inner {
  width: 100%;
  max-width: 32rem;
  /* A long question with many answers scrolls inside the card rather than
     pushing the buttons off a short phone. */
  max-height: 100%;
  overflow-y: auto;
}

.takeover__card {
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
}

/* Participation outranks the quiz when both are up. Being about to go on stage
   is more urgent than a question the whole room is answering, and the operator
   is holding a cue on the first one. */
.takeover--blocking {
  z-index: 1060;
}

/* The Chud Checkpoint takeover.

   1065 clears standby (1060) and the quiz (1055), which is the order Corey
   settled on 2026-09-14: a checkpoint is the most important thing anyone is
   doing for that minute, unless they personally have something to do in the
   show. */
.takeover--checkpoint {
  z-index: 1065;
}

/* The two states that outrank it, made to outrank it.

   Being chosen and being on stage both beat the checkpoint; standby does not.
   But being chosen and standby are one class (.takeover--blocking) on two
   partials, so no z-index can put the checkpoint between them. This does the
   split by presence instead, which also means the checkpoint comes back by
   itself when the higher frame clears — no broadcast, no round trip.

   The first selector is the id the instruction card already sets. The second
   identifies participation/_live by what makes it structurally unique: a modal
   dialog inside the participation frame that is NOT a .takeover, because it is
   styled inline rather than with the class. Neither hook belongs to this
   change, so neither breaks when the other session refactors — and both fail
   visible rather than hidden. */
body:has(#participation_frame [aria-labelledby="participation_instruction_header"]) .takeover--checkpoint,
body:has(#participation_frame [role="dialog"][aria-modal="true"]:not(.takeover)) .takeover--checkpoint {
  display: none;
}

/* The chosen character, ringed in their own colour and lifted.
   --performer-accent is set per button and already falls back when
   icon_color is blank or white; see PerformersHelper#checkpoint_accent. */
.takeover--checkpoint [data-checkpoint-target="performerButton"] img {
  border: 3px solid transparent;
  transition: transform 120ms ease, border-color 120ms ease;
}

.takeover--checkpoint [data-checkpoint-target="performerButton"].is-selected img {
  border-color: var(--performer-accent, var(--gp-accent-fallback));
  transform: scale(1.08);
}