/* Phone demo widget — PleasePray marketing site.
   Shared shell only: two-column / tablist layout, phone bezel + status
   chrome, the spec's global keyframes, and the few pseudo-class states
   (hover/active/focus) that inline styles can't express. Everything that
   the owner's design spec writes as inline style is written as inline
   style by the JS (core.h), so the CSS here is deliberately small.
   Scoped under .pp-demo (plus .pp-demo-outbound, which is appended to
   <body> on narrow screens). */

.pp-demo, .pp-demo * { box-sizing: border-box; }
.pp-demo {
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  color: #22262E;
  text-align: left;
}
.pp-demo *:focus-visible { outline: 2px solid #738BCF; outline-offset: 2px; }
.pp-demo input:focus-visible, .pp-demo textarea:focus-visible { outline: none; }
.pp-demo button { font-family: inherit; }
.pp-demo [data-noscroll] { scrollbar-width: none; }
.pp-demo [data-noscroll]::-webkit-scrollbar { display: none; }

/* ----- Skip link (spec: left:-9999px, style-focus left:20px) ----- */
.pp-skip-link {
  position: absolute; left: -9999px; top: 16px;
  padding: 10px 14px; border-radius: 10px;
  background: #22262E; color: #fff; font-size: 14px;
  text-decoration: none; z-index: 5;
}
.pp-skip-link:focus { left: 20px; }

/* ================================================================
   Two-column scroll-sync layout + mobile tablist (spec demoCols etc.)
   ================================================================ */

.pp-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: stretch; }
.pp-demo--wide .pp-demo-grid { grid-template-columns: minmax(0, 1fr) 460px; }
.pp-demo-left, .pp-demo-right { min-width: 0; }
.pp-demo-right { position: relative; }

.pp-demo-tablist { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 20px; scrollbar-width: none; }
.pp-demo-tablist::-webkit-scrollbar { display: none; }
.pp-demo--wide .pp-demo-tablist { display: none; }

.pp-demo-tab {
  flex: none; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid #E4E2DB;
  background: #FFFFFF; color: #22262E;
  font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.pp-demo-tab.is-active { background: #22262E; color: #FFFFFF; }

.pp-demo-caption-stack { display: flex; flex-direction: column; }
.pp-demo-caption {
  min-height: 0; padding: 4px 0 28px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 1; transition: opacity .45s ease;
}
.pp-demo--wide .pp-demo-caption { min-height: 100vh; padding: 48px 0; opacity: .32; }
.pp-demo--wide .pp-demo-caption.is-active { opacity: 1; }

/* ================================================================
   Phone (spec `ph`: sticky on wide, in-flow on narrow, CSS-scaled)
   ================================================================ */

.pp-demo-phone-sticky { position: relative; top: 0; display: flex; justify-content: center; width: 100%; }
.pp-demo-phone-size { position: relative; }
.pp-demo-phone-scaled { position: absolute; left: 0; top: 0; width: 417px; height: 876px; transform-origin: top left; }

.pp-bezel {
  position: absolute; inset: 0; border-radius: 67px; background: #16161A;
  padding: 12px; box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(34, 38, 46, .1), 0 24px 60px rgba(34, 38, 46, .28), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.pp-bezel-btn { position: absolute; width: 3px; background: #16161A; }
.pp-bezel-btn--mute { left: -3px; top: 150px; height: 28px; border-radius: 2px 0 0 2px; }
.pp-bezel-btn--vol1 { left: -3px; top: 200px; height: 56px; border-radius: 2px 0 0 2px; }
.pp-bezel-btn--vol2 { left: -3px; top: 268px; height: 56px; border-radius: 2px 0 0 2px; }
.pp-bezel-btn--power { right: -3px; top: 220px; height: 96px; border-radius: 0 2px 2px 0; }

.pp-screen {
  position: relative; width: 393px; height: 852px; border-radius: 55px; overflow: hidden;
  background: #FBFAF6; isolation: isolate; transform: translateZ(0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif; color: #22262E;
  -webkit-user-select: none; user-select: none;
}
.pp-screen input, .pp-screen textarea { -webkit-user-select: text; user-select: text; }

/* Content host: screen modules draw their own [data-phone-scroll] area
   (and the Rosary its z-index:95 overlay) inside it. No z-index here on
   purpose, so module layers interleave with the shell/sheet/toast/SMS
   layers by their own z-index (40/50 shell, 90 sheet, 95 rosary, 110
   toast, 120 SMS, 130 status chrome). */
.pp-content { position: absolute; inset: 0; overflow: hidden; background: #FBFAF6; }

/* ----- Status bar / island / home indicator ----- */
.pp-statusrow { position: absolute; left: 0; right: 0; top: 0; height: 54px; z-index: 130; pointer-events: none; color: #22262E; transition: color .15s; }
.pp-screen--status-light .pp-statusrow { color: #FFFFFF; }
.pp-statusrow-clock { position: absolute; left: 34px; top: 17px; font-size: 16px; font-weight: 600; }
.pp-statusrow-right { position: absolute; right: 30px; top: 19px; display: flex; gap: 6px; align-items: center; }
.pp-battery { position: relative; display: inline-block; width: 24px; height: 12px; border-radius: 3.5px; border: 1.5px solid currentColor; box-sizing: border-box; opacity: .95; }
.pp-battery-fill { position: absolute; inset: 1.5px; border-radius: 1.5px; background: currentColor; }
.pp-battery-nub { position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.pp-island { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 130; pointer-events: none; }
.pp-home-indicator { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; transform: translateX(-50%); border-radius: 999px; background: #22262E; z-index: 130; pointer-events: none; transition: background .15s; }
.pp-screen--status-light .pp-home-indicator { background: #FFFFFF; }

/* Pseudo-class states from the spec (style-hover / style-active) */
.pp-demo .pp-sheet-row:hover { background: #EEF0F7 !important; }
.pp-demo .pp-sms-link:active { opacity: .6; }

.pp-missing-screen, .pp-missing-caption { padding: 54px 20px; text-align: center; color: #8A8F99; font-size: 14px; }

/* ================================================================
   Spec global keyframes (verbatim)
   ================================================================ */
@keyframes ppRowIn { from { grid-template-rows: 0fr; opacity: 0 } to { grid-template-rows: 1fr; opacity: 1 } }
@keyframes ppRowOut { from { grid-template-rows: 1fr; opacity: 1 } to { grid-template-rows: 0fr; opacity: 0 } }
@keyframes ppFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ppSheet { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes ppBanner { from { transform: translateY(-130%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ppSlideUp { from { opacity: 0; transform: translateY(20px) scale(.95) } to { opacity: 1; transform: none } }
@keyframes ppHint { 0% { box-shadow: 0 0 0 0 rgba(115, 139, 207, .6) } 70% { box-shadow: 0 0 0 12px rgba(115, 139, 207, 0) } 100% { box-shadow: 0 0 0 0 rgba(115, 139, 207, 0) } }
@keyframes ppPan { 0%, 100% { transform: scale(1.04) translate3d(-.5%, -.3%, 0) } 50% { transform: scale(1.1) translate3d(.6%, .5%, 0) } }
@keyframes ppSwap { from { opacity: 0; transform: translateY(6px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes ppBlink { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes ppBob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* Spec reduced-motion rule, scoped to the demo */
@media (prefers-reduced-motion: reduce) {
  .pp-demo *, .pp-demo *::before, .pp-demo *::after,
  .pp-demo-outbound, .pp-demo-outbound * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}