/* ============================================================
   demo.css - showcase chrome ONLY (top strip, page switcher,
   x-ray toggle, slot labels, toast). No mirrored-page styles
   and no sponsor-unit styles live here.
   ============================================================ */

.demo-strip{
  background:#384050;color:#fff;font:600 11px/1.4 "DM Sans",system-ui,sans-serif;
  letter-spacing:.4px;text-align:center;padding:7px 14px;
}
.demo-strip strong{color:#D8B868;font-weight:700;}

/* ---- Floating switcher: compact bar + pop-up page menu ---- */
.demo-tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:99990;
  display:flex;align-items:center;gap:6px;
  background:rgba(42,49,64,.96);border:1px solid rgba(216,184,104,.45);
  border-radius:999px;padding:6px 8px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:"DM Sans",system-ui,sans-serif;
}
.demo-menu-btn,.demo-xray-btn{
  border:1px solid transparent;background:transparent;color:#e7eaf0;cursor:pointer;
  font:700 12px "DM Sans",system-ui,sans-serif;letter-spacing:.3px;
  border-radius:999px;padding:7px 13px;white-space:nowrap;
}
.demo-menu-btn:hover{background:rgba(255,255,255,.12);}
.demo-menu-btn.demo-open{background:#D8B868;color:#2a3140;}
.demo-here{color:#D8B868;font:600 11.5px "DM Sans",system-ui,sans-serif;padding:0 6px;white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis;}
.demo-xray-btn{border-color:#D8B868;color:#D8B868;}
.demo-xray-btn:hover{background:rgba(216,184,104,.15);}
body.demo-xray .demo-xray-btn{background:#D8B868;color:#2a3140;}

.demo-menu{
  position:fixed;left:50%;transform:translateX(-50%) translateY(6px);bottom:66px;z-index:99991;
  background:rgba(42,49,64,.98);border:1px solid rgba(216,184,104,.45);
  border-radius:16px;padding:14px 16px;box-shadow:0 16px 48px rgba(0,0,0,.45);
  display:none;grid-template-columns:1fr 1fr;gap:2px 26px;
  max-width:min(92vw,560px);max-height:70vh;overflow:auto;
  font-family:"DM Sans",system-ui,sans-serif;opacity:0;transition:opacity .15s,transform .15s;
}
.demo-menu.demo-open{display:grid;opacity:1;transform:translateX(-50%) translateY(0);}
.demo-menu-group{font:800 9.5px "DM Sans",system-ui,sans-serif;letter-spacing:1.8px;color:#D8B868;text-transform:uppercase;margin:8px 0 4px;grid-column:span 1;}
.demo-menu a{
  display:block;color:#e7eaf0;text-decoration:none;font-size:12.5px;font-weight:600;
  padding:6px 8px;border-radius:8px;white-space:nowrap;
}
.demo-menu a:hover{background:rgba(255,255,255,.12);}
.demo-menu a.demo-tab-active{background:#D8B868;color:#2a3140;}
@media (max-width:700px){
  .demo-tabbar{bottom:76px;}
  .demo-menu{bottom:128px;grid-template-columns:1fr;max-height:56vh;}
  .demo-here{display:none;}
}

/* ---- X-ray: outline every injected sponsor unit + slot label ---- */
body.demo-xray [data-slot]{
  outline:2px dashed #D8B868 !important;outline-offset:3px;position:relative;
}
body.demo-xray [data-slot]::before{
  content:attr(data-slot);
  position:absolute;top:-22px;left:0;z-index:9000;
  background:#D8B868;color:#2a3140;
  font:700 10px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  max-width:92vw;overflow:hidden;text-overflow:ellipsis;
}
/* PROPOSED slots: distinct treatment - dotted outline, outlined label */
body.demo-xray [data-slot][data-proposed]{
  outline-style:dotted !important;outline-width:2.5px !important;
}
body.demo-xray [data-slot][data-proposed]::before{
  background:#ffffff;color:#b8983e;border:1.5px dashed #D8B868;
}

/* ---- Toast ---- */
.demo-toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(8px);bottom:64px;z-index:99999;
  background:#2a3140;color:#fff;border-left:3px solid #D8B868;
  font:600 13px/1.4 "DM Sans",system-ui,sans-serif;
  padding:10px 16px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  max-width:calc(100vw - 32px);text-align:center;
}
.demo-toast.demo-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (max-width:700px){
  .demo-toast{bottom:132px;}
}