/* Contourly — 2c matchmaking queue. Owned by Wave-2 agent B.
   Foundation (.ct-queue__*, .ct-stage, .ct-actions) lives in app.css; this file
   carries only the STAGE-archetype layout + desktop presentation. The screen root
   is .ct-screen.ct-screen--stage.ct-queue → the app shell paints one unified paper
   dot-grid behind a centered column (no phone-column, no doubled grid). */

/* Center block spacing matches the reference artboard (spinner ↔ title ↔ tip). */
.ct-queue .ct-stage { gap: 26px; }

/* Topbar (‹ Cancel + elapsed chip) spans the stage column width. */
.ct-queue__topbar { width: 100%; }

/* The searching spinner never grows past its intrinsic size on any width. */
.ct-queue__spinner { flex: none; }

/* Rival-found pop-in sits centered in the stage; keep the spinning outline burst
   clear of the stage's max-width so it is never clipped. */
.ct-queue__found { margin: 8px 0; }

/* The rotating tip changes length every few seconds; without a reserved box the
   card would grow/shrink and shove the spinner, heading and "Start now" button up
   and down on every rotation. Reserve a fixed height for the tallest tip and
   vertically center the text within it, so the copy swaps INSIDE the box and the
   surrounding UI never moves. Mobile is the narrow case where the longest tip wraps
   to 3 lines; tablet/desktop are wider so 2 lines is the worst case (see @768 below).
   The icon centers against the same reserved box. */
.ct-queue__tip { align-items: center; }
.ct-queue__tip-text {
  flex: 1;
  min-height: 64px;          /* ≈ 3 lines at 13px/1.5 — the narrow-phone worst case */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* vertically center the tip line within the reserved box */
}
/* The tip copy is one inline block (keeps "Tip:" inline with the sentence and wraps
   normally to 1–2 lines) — it must NOT become sibling flex items of the container. */
.ct-queue__tip-line { display: block; }

/* ---- tablet / desktop: one cohesive centered stage on the dot-grid ----------
   On mobile the stage fills the phone height (spinner vertically centered). From
   768 up we stop the stage from growing to full height so the whole screen —
   topbar, spinner block, "Start now" — reads as a single comfortably-sized card
   centred on the paper dot-grid, not a tall column with the CTA stranded at the
   very bottom of a wide viewport. */
@media (min-width: 768px) {
  .ct-queue { justify-content: center; gap: 14px; padding-top: 28px; padding-bottom: 28px; }
  .ct-queue .ct-stage { flex: 0 0 auto; gap: 28px; padding-left: 20px; padding-right: 20px; }
  .ct-queue__topbar { padding: 0 4px; }
  .ct-queue .ct-actions { padding: 4px 8px 0; }
  /* Wider column here → the longest tip is only 2 lines, so a tighter reserve keeps
     the card compact while still fully preventing any rotation reflow. */
  .ct-queue__tip-text { min-height: 48px; }
}