/* ════════════════════════════════════════════════════════════════════
   RING-SYNC — Demo host chrome (Digital Glass)
   Loaded *after* /assets/ring-sync.css so it can reuse the brand tokens
   (--canvas, --silver, --violet, --slate, …).

   IMPORTANT: this styles only the demo "host site" frame and the
   Ring-Sync demo bar that wraps the embedded widget. The injector widget
   itself (inject/) has its own scoped styles under .rsync-root and is
   deliberately left untouched — it remains the star of each demo.
   ════════════════════════════════════════════════════════════════════ */
body.rs-demo {
  background: var(--canvas);
  color: var(--slate);
  font-family: "Inter", "Helvetica Neue", Arial, "Open Sans", sans-serif;
  margin: 0;
}

/* ─── Ring-Sync demo bar (brand-owned) ───────────────────────────── */
.rs-demobar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 11px 22px;
  background: rgba(240,244,248,.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--silver);
}
.rs-demobar .logo .logo-word { font-size: 19px; }
.rs-demobar .demo-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--violet); background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.30); border-radius: 999px; padding: 4px 10px;
}
.rs-demobar .bar-links { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.rs-demobar .bar-links a { font-size: 13.5px; font-weight: 500; color: var(--slate-soft); transition: color .15s; }
.rs-demobar .bar-links a:hover { color: var(--violet); }
.rs-demobar .bar-links a.cta {
  color: #fff; background: var(--violet); border: 1.5px solid var(--violet);
  border-radius: var(--radius); padding: 8px 14px; font-weight: 600;
  transition: background .15s, transform .12s;
}
.rs-demobar .bar-links a.cta:hover { background: var(--violet-dark); transform: translateY(-1px); }

/* ─── Context strip — explains the frame below is a generic host ─── */
.host-context {
  text-align: center; font-size: 12.5px; color: var(--slate-soft);
  padding: 9px 16px; background: var(--white); border-bottom: 1px solid var(--silver);
}
.host-context strong { color: var(--slate); font-weight: 600; }

/* ─── Host site (the prospect's own site — kept neutral & serif) ─── */
.host-header {
  background: var(--white); border-bottom: 1px solid var(--silver);
  padding: 18px 24px; display: flex; align-items: center; justify-content: space-between;
}
.host-logo {
  font-family: Georgia, "Times New Roman", serif; font-weight: normal;
  font-size: 22px; letter-spacing: 2px; color: var(--slate);
}
.host-logo span { color: var(--slate-soft); opacity: .8; font-size: 10px; letter-spacing: 3px; display: block; }
.host-nav { display: flex; gap: 28px; font-size: 13px; }
.host-nav a { color: var(--slate-soft); text-decoration: none; transition: color .15s; }
.host-nav a:hover { color: var(--slate); }
.host-nav a.active { color: var(--slate); border-bottom: 2px solid var(--violet); padding-bottom: 4px; }

.host-page-title { max-width: 1100px; margin: 0 auto; padding: 40px 24px 24px; }
.host-page-title h1 {
  font-family: Georgia, serif; font-weight: normal; font-size: 36px; margin: 0 0 8px; color: var(--slate);
  letter-spacing: 0;
}
.host-page-title p { font-size: 14px; color: var(--slate-soft); margin: 0; max-width: 560px; line-height: 1.6; }

/* ─── Section header between surfaces (all-three) ────────────────── */
.surface-header { max-width: 540px; margin: 56px auto 0; padding: 0 24px; }
.surface-label {
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--violet); margin-bottom: 8px; font-weight: 700;
}
.surface-header h2 { font-family: Georgia, serif; font-weight: normal; font-size: 22px; margin: 0 0 4px; color: var(--slate); }
.surface-header p { font-size: 13px; color: var(--slate-soft); margin: 0; line-height: 1.5; }

/* ─── Widget column (wraps the injected surface) ─────────────────── */
.widget-column { max-width: 760px; margin: 0 auto; padding: 16px 0 64px; }
.widget-column.wide { max-width: 1140px; }
.widget-column.flush { padding-top: 0; }

/* ─── Host footer ────────────────────────────────────────────────── */
.host-footer {
  border-top: 1px solid var(--silver); background: var(--white);
  padding: 24px; text-align: center; font-size: 12px; color: var(--slate-soft); margin-top: 8px;
}
.host-footer a { color: var(--violet); text-decoration: none; }

/* ─── "View the embed code" panel (brand-owned, no JS — uses details) ─ */
.code-panel {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  width: 540px; max-width: calc(100vw - 40px);
  background: var(--white); border: 1px solid var(--silver); border-radius: 6px;
  box-shadow: 0 18px 50px -16px rgba(30,41,59,.45); overflow: hidden;
}
.code-panel > summary {
  list-style: none; cursor: pointer;
  background: var(--violet); color: #fff;
  padding: 12px 16px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.code-panel > summary::-webkit-details-marker { display: none; }
.code-panel > summary .chev { transition: transform .2s; flex: none; }
.code-panel[open] > summary .chev { transform: rotate(180deg); }
.code-panel .panel-body {
  padding: 16px; background: var(--canvas);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.65; color: var(--slate); white-space: pre; overflow-x: auto;
}
.code-panel .panel-body .c-tag  { color: #6366F1; }
.code-panel .panel-body .c-attr { color: #0d9488; }
.code-panel .panel-body .c-str  { color: #b45309; }
.code-panel .panel-body .c-com  { color: #64748b; }
.code-panel .panel-note {
  border-top: 1px solid var(--silver); padding: 12px 16px;
  color: var(--slate-soft); font-size: 11px; line-height: 1.5;
}
.code-panel .panel-note strong { color: var(--slate); }

/* ─── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .rs-demobar { padding: 10px 14px; gap: 10px; }
  .rs-demobar .demo-pill { display: none; }
  .rs-demobar .bar-links { gap: 10px; }
  .rs-demobar .bar-links a:not(.cta) { display: none; }
  .host-header { padding: 14px 16px; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .host-logo { font-size: 18px; letter-spacing: 1.5px; text-align: center; }
  .host-nav { display: none; }
  .host-page-title { padding: 28px 20px 16px; }
  .host-page-title h1 { font-size: 28px; }
  .surface-header { margin-top: 40px; padding: 0 20px; }
  .code-panel .panel-body { font-size: 10px; }
  .code-panel > summary { font-size: 10px; padding: 10px 14px; }
}