/* =============================================================
   demo-toolbar.css — shared styles for the demo wrapper, the
   right-side toolbar (device + theme switcher) and the bottom
   theme picker on direct-mobile mode.

   Self-contained: uses literal colors (no CSS vars from the
   host page), so the toolbar looks identical across demos.
   ============================================================= */

/* ----- Mode visibility ----- */
.demo-wrapper{ display: none; }
:root[data-mode="demo"] .demo-wrapper{ display: flex; }
:root[data-mode="demo"] .page-content{ display: none; }
:root[data-mode="demo"] body{ overflow: hidden; height: 100vh; }

/* ----- Demo wrapper (the "preview chrome") ----- */
.demo-wrapper{
  position: fixed; inset: 0;
  background: oklch(0.93 0.005 80);
  background-image:
    radial-gradient(circle at 20% 20%, oklch(0.96 0.01 80) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, oklch(0.96 0.01 80) 0%, transparent 50%);
  align-items: stretch;
  justify-content: center;
  padding: 28px 100px 28px 28px;
  z-index: 1000;
}
.demo-stage{
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: auto;
}
.demo-iframe{
  width: 100%;
  max-width: 1440px;
  height: 100%;
  min-height: 600px;
  border: 1px solid oklch(0.85 0.012 75);
  border-radius: 14px;
  box-shadow: 0 20px 80px oklch(0.2 0.01 60 / 0.18), 0 4px 12px oklch(0.2 0.01 60 / 0.06);
  background: white;
  transition: width .4s cubic-bezier(.2,.8,.2,1), max-width .4s cubic-bezier(.2,.8,.2,1);
}
.demo-iframe[data-size="tablet"]{ width: 820px; max-width: 820px; }
.demo-iframe[data-size="phone"]{ width: 412px; max-width: 412px; border-radius: 28px; }

/* ----- Right-side toolbar ----- */
.demo-toolbar{
  position: fixed;
  top: 50%; right: 18px;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  gap: 14px;
  background: white;
  padding: 14px 10px;
  border-radius: 999px;
  box-shadow: 0 12px 40px oklch(0.2 0.01 60 / 0.15), 0 2px 6px oklch(0.2 0.01 60 / 0.06);
  z-index: 1100;
}
.demo-toolbar-group{
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.demo-toolbar-group + .demo-toolbar-group{
  border-top: 1px solid oklch(0.88 0.01 75);
  padding-top: 12px;
  margin-top: 4px;
}
.demo-btn{
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: oklch(0.45 0.012 60);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  transition: background .18s, color .18s, border-color .18s;
}
.demo-btn:hover{ background: oklch(0.96 0.01 80); color: oklch(0.22 0.012 60); }
.demo-btn.active{
  background: oklch(0.22 0.012 60);
  color: white;
}
.demo-btn svg{ width: 22px; height: 22px; }

/* ----- Theme circles (used in toolbar AND mobile picker) ----- */
.demo-theme-circle{
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px oklch(0.85 0.01 75 / 0.5);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  margin: 0 auto;
  padding: 0;
  font: inherit;
}
.demo-theme-circle:hover{ transform: scale(1.08); }
.demo-theme-circle.active{
  border-color: oklch(0.22 0.012 60);
  box-shadow: inset 0 0 0 1px white, 0 0 0 1px oklch(0.22 0.012 60);
}
.demo-theme-circle[data-theme="braun"]{
  background: linear-gradient(135deg, oklch(0.96 0.012 80) 0%, oklch(0.72 0.075 60) 50%, oklch(0.42 0.012 60) 100%);
}
.demo-theme-circle[data-theme="gruen"]{
  background: linear-gradient(135deg, oklch(0.95 0.018 145) 0%, oklch(0.58 0.105 150) 50%, oklch(0.30 0.060 150) 100%);
}
.demo-theme-circle[data-theme="blau"]{
  background: linear-gradient(135deg, oklch(0.95 0.018 235) 0%, oklch(0.58 0.135 235) 50%, oklch(0.32 0.080 240) 100%);
}
.demo-theme-circle[data-theme="rotweiss"]{
  background: linear-gradient(135deg, white 0%, white 49%, oklch(0.55 0.220 28) 51%, oklch(0.55 0.220 28) 100%);
}

/* ----- Compact toolbar on small viewports ----- */
@media (max-width: 720px){
  .demo-wrapper{ padding: 16px 76px 16px 16px; }
  .demo-toolbar{ right: 10px; padding: 10px 6px; gap: 10px; }
  .demo-btn{ width: 38px; height: 38px; }
  .demo-btn svg{ width: 18px; height: 18px; }
  .demo-theme-circle{ width: 26px; height: 26px; }
  .demo-iframe{ min-height: 480px; }
}

/* ----- Floating theme picker (direct-mobile mode only) ----- */
.mobile-theme-picker{ display: none; }
:root[data-direct-mobile] .mobile-theme-picker{
  display: flex;
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: oklch(1 0 0);
  padding: 10px 16px;
  border-radius: 999px;
  box-shadow: 0 10px 30px oklch(0.2 0.01 60 / 0.20), 0 2px 6px oklch(0.2 0.01 60 / 0.08);
  gap: 14px;
  align-items: center;
}
:root[data-direct-mobile] .mobile-theme-picker .demo-theme-circle{
  width: 28px; height: 28px;
  margin: 0;
}