/* demo-fullsize.css — shared "View full size" overlay for all engine demo blocks
   Canonical version. All marketing pages use the same wrapper class and button.
   v2 design system tokens assumed available on the page.
   No external dependencies. */

/* ── Wrapper + button ─────────────────────────────────────── */
.demo-fs-wrap {
  position: relative;
}

.demo-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal-deep, #0E5C5C);
  background: rgba(247, 244, 238, 0.94);
  border: 1px solid var(--teal-deep, #0E5C5C);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  line-height: 1.4;
  z-index: 3;
  transition: background 0.15s ease, color 0.15s ease;
}

.demo-fs-btn:hover,
.demo-fs-btn:focus-visible {
  background: var(--teal-deep, #0E5C5C);
  color: var(--paper, #F7F4EE);
  outline: none;
}

.demo-fs-btn::before {
  content: "⤢";
  margin-right: 6px;
  font-size: 13px;
}

/* ── Overlay ──────────────────────────────────────────────── */
.demo-fs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.92);
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 60px 24px 24px;
}

.demo-fs-overlay.is-open {
  display: flex;
}

.demo-fs-overlay-inner {
  position: relative;
  width: 100%;
  max-width: 1400px;
  background: var(--paper, #F7F4EE);
  border-radius: 6px;
  padding: 32px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.demo-fs-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper, #F7F4EE);
  border: 1px solid var(--teal-deep, #0E5C5C);
  color: var(--ink, #1A1815);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.demo-fs-close:hover,
.demo-fs-close:focus-visible {
  background: var(--teal-deep, #0E5C5C);
  color: var(--paper, #F7F4EE);
  outline: none;
}

/* The cloned demo content inside the overlay drops its own button */
.demo-fs-overlay .demo-fs-btn {
  display: none;
}

/* Body lock while overlay open */
body.demo-fs-locked {
  overflow: hidden;
}

/* Mobile */
@media (max-width: 768px) {
  .demo-fs-overlay {
    padding: 60px 12px 12px;
  }
  .demo-fs-overlay-inner {
    padding: 16px;
  }
  .demo-fs-btn {
    font-size: 11px;
    padding: 5px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo-fs-btn,
  .demo-fs-close {
    transition: none;
  }
}