/* ================================================================
   ScopeDue — page-demo.css
   Demo / Sample pages (Group 9: 2 pages)
   /samples/approval-link/, /samples/proof-pack/
   Loads after styles.css. Sample banners, interactive preview.
   ================================================================ */

/* ── Sample notice banner ───────────────────────────────────────── */
.demo-banner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: var(--r-lg);
  margin-bottom: var(--s5);
}
.demo-banner-icon {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--amber-border);
  display: grid;
  place-items: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.demo-banner-text {
  flex: 1;
  font-size: .86rem;
  color: var(--amber);
  font-weight: 600;
}
.demo-banner-text strong { color: var(--amber); }

/* ── Demo container (full-width framed) ─────────────────────────── */
.demo-container {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  margin: var(--s5) 0;
}
.demo-container-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: .65rem var(--s5);
  background: var(--bg-tint);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.demo-browser-dots {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}
.demo-browser-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.demo-browser-dots .r { background: #ff5f57; }
.demo-browser-dots .y { background: #febc2e; }
.demo-browser-dots .g { background: #28c840; }
.demo-url {
  flex: 1;
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  font-family: 'Cascadia Code', 'SF Mono', ui-monospace, monospace;
}
.demo-container-content { padding: var(--s6); }

/* ── Proof Pack sections ────────────────────────────────────────── */
.proof-section {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin: var(--s4) 0;
}
.proof-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  background: var(--bg-tint);
  border-bottom: 1px solid var(--border);
}
.proof-section-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--text);
}
.proof-section-body { padding: var(--s4) var(--s5); }

/* ── "Create your own" CTA at bottom ───────────────────────────── */
.demo-cta {
  margin: var(--s7) 0 var(--s5);
  padding: var(--s5) var(--s6);
  border: 1px solid var(--ink-border);
  border-radius: var(--r-2xl);
  background: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}
.demo-cta-text h2 { margin: 0 0 var(--s2); font-size: clamp(1.2rem, 2vw, 1.6rem); }
.demo-cta-text p { margin: 0; color: var(--text-muted); font-size: .9rem; }

/* ── Sample data notice (inline) ────────────────────────────────── */
.sample-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--f-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .demo-cta { flex-direction: column; align-items: flex-start; }
  .demo-container-content { padding: var(--s4); }
}