/* PhonePick demo — the strip across the top of every app page, its plan
   switcher and "what's on this plan" panel, and the toast. The app itself is
   untouched; this only makes room for the strip and draws it, in the app's own
   black theme (app.css) so it reads as part of the product, not an ad on it. */

:root{--demo-h:52px}
.ppd-bar{position:fixed;top:0;left:0;right:0;height:var(--demo-h);z-index:400;
  display:flex;align-items:center;gap:12px;padding:0 14px;
  background:#0b1224;color:#fff;border-bottom:1px solid rgba(107,149,255,.28);
  font:13px/1.3 "Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ppd-bar *{box-sizing:border-box}
.ppd-tag{display:inline-flex;align-items:center;gap:7px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.ppd-tag i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.22);flex:none}
.ppd-who{color:#aab4cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ppd-sp{flex:1}
.ppd-plans{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);flex:none}
.ppd-plans button{appearance:none;border:0;background:none;color:#c9d2e6;font:inherit;font-weight:600;
  padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:baseline;gap:6px}
.ppd-plans button small{font-size:11.5px;font-weight:500;color:#8390ad}
.ppd-plans button:hover{background:rgba(255,255,255,.08);color:#fff}
.ppd-plans button[aria-pressed="true"]{background:#fff;color:#000}
.ppd-plans button[aria-pressed="true"] small{color:#4b5563}
.ppd-plans button:focus-visible,.ppd-btn:focus-visible{outline:2px solid #6b95ff;outline-offset:2px}
.ppd-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-weight:600;padding:7px 12px;border-radius:999px;
  cursor:pointer;text-decoration:none;white-space:nowrap}
.ppd-btn:hover{background:rgba(255,255,255,.12);text-decoration:none;color:#fff}
.ppd-btn.go{background:#2563eb;border-color:#2563eb}
.ppd-btn.go:hover{background:#1d4ed8}
.ppd-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Make room: the page starts under the strip, and the sticky sidebars stop at
   it. Only where the strip is drawn (html.ppd-on) — not inside the web form
   preview's frame. */
html.ppd-on body{padding-top:var(--demo-h)}
@media (min-width:761px){
  html.ppd-on .pp-side,html.ppd-on .pp-sub{top:var(--demo-h)!important;height:calc(100vh - var(--demo-h))!important}
  html.ppd-on .pp-shell{min-height:calc(100vh - var(--demo-h))}
}
@media (max-width:760px){
  html.ppd-on .pp-side,html.ppd-on .pp-sub{top:var(--demo-h)!important}
}

/* What's on this plan */
.ppd-panel{position:fixed;top:calc(var(--demo-h) + 8px);right:12px;z-index:401;width:min(400px,calc(100vw - 24px));
  max-height:calc(100vh - var(--demo-h) - 24px);overflow:auto;background:#0f1729;color:#e6ebf5;
  border:1px solid rgba(107,149,255,.3);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.6);
  padding:18px 18px 14px;font:14px/1.45 "Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.ppd-panel[hidden]{display:none}
.ppd-panel h3{margin:0 0 2px;font-size:17px;letter-spacing:-.02em;color:#fff}
.ppd-panel .ppd-lede{margin:0 0 12px;color:#9aa6c0;font-size:13px}
.ppd-panel h4{margin:14px 0 6px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#7f8bab;font-weight:700}
.ppd-panel ul{list-style:none;margin:0;padding:0}
.ppd-panel li{margin:0}
.ppd-panel li a{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;margin:0 -10px;border-radius:10px;color:#e6ebf5;text-decoration:none}
.ppd-panel li a:hover{background:rgba(255,255,255,.06)}
.ppd-panel li a b{display:block;font-weight:600;color:#fff}
.ppd-panel li a span{display:block;font-size:12.5px;color:#9aa6c0}
.ppd-panel li a .ppd-ic{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;margin-top:1px;
  background:rgba(61,220,132,.14);color:#3ddc84;font-size:13px;font-weight:700}
.ppd-panel li.locked a .ppd-ic{background:rgba(255,255,255,.07);color:#8390ad}
.ppd-panel li.locked a b{color:#c9d2e6}
.ppd-panel .ppd-up{margin-top:12px;width:100%;justify-content:center}
.ppd-panel .ppd-fine{margin:12px 0 0;font-size:12px;color:#7f8bab}

.ppd-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);z-index:500;
  background:#0f1729;color:#fff;border:1px solid rgba(107,149,255,.35);padding:12px 16px;border-radius:14px;
  font:14px/1.45 "Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 14px 40px rgba(0,0,0,.5);max-width:min(560px,calc(100vw - 32px));opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s}
.ppd-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.ppd-toast b{color:#9fbaff}

@media (max-width:1100px){.ppd-who{display:none}}
@media (max-width:860px){.ppd-plans button small{display:none}.ppd-btn .lbl{display:none}.ppd-btn.go .lbl{display:inline}}
@media (max-width:620px){
  :root{--demo-h:96px}
  .ppd-bar{flex-wrap:wrap;align-content:center;row-gap:8px;padding:8px 12px}
  .ppd-plans{order:5;width:100%;justify-content:space-between}
  .ppd-plans button{flex:1;justify-content:center;padding:6px 6px}
  .ppd-btn.go{display:none}
}
@media print{.ppd-bar,.ppd-panel,.ppd-toast{display:none!important}html.ppd-on body{padding-top:0}}