/* Contourly — system states (2o). Every bad-day sticker card (match lost, server
   error, second tab, rate limit, force update, old browser, match-not-found) is a
   .ct-panel centred by .ct-sys-screen. Foundation lays it out; this file gives the
   full-screen states the paper dot-grid backdrop + a comfortable desktop size +
   the slight sticker tilt the design ships. Owned by Wave-2.
   (Reconnect + offline are a banner/card built elsewhere — not styled here.) */

.ct-sys-screen {
  position: relative;
  background: var(--ct-paper);
}
/* paper dot-grid behind the centred panel (matches the app-shell stage texture) */
.ct-sys-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--ct-ink) 1.3px, transparent 1.3px);
  background-size: 24px 24px;
  opacity: .05;
}
.ct-sys-screen > * { position: relative; z-index: 1; }

/* comfortable card, slight sticker tilt */
.ct-sys-screen .ct-panel { width: min(408px, 100%); }
.ct-sys-screen .ct-sys { transform: rotate(-1.2deg); }
/* keep the centred (blocking) variants upright — a tilt reads odd full-bleed */
.ct-sys-screen .ct-sys--center { transform: none; }

@media (min-width: 768px) {
  .ct-sys-screen { padding: 32px; }
  .ct-sys-screen .ct-panel { width: min(440px, 100%); }
  .ct-sys__title { font-size: 20px; }
  .ct-sys__body { font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-sys-screen .ct-sys { transform: none; }
}