/* Push notification preview and examples (dist/push-preview.js). Editor left, phones right. */
.rs-tool{padding:10px 0 20px}
.pnp{border:1px solid var(--line);background:#fff;min-height:1080px}
.pnp[data-mode=examples]{min-height:0;border:0;background:none}
@media(max-width:900px){.pnp{min-height:1900px}.pnp[data-mode=examples]{min-height:0}}
.pnp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pnp-ed{padding:28px;display:flex;flex-direction:column;gap:20px;border-right:1px solid var(--line)}
.pnp-out{padding:28px;background:#f5f4f0}
.pnp-out>div{position:sticky;top:90px;display:flex;flex-direction:column;gap:14px}
.pnp-k,.pnp-f>label,.pnp-lab label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#555;display:block;margin-bottom:8px}
.pnp .opt{font-weight:400;text-transform:none;letter-spacing:0;color:#6b6b6b}
.pnp input[type=text],.pnp input[type=url],.pnp select,.pnp textarea{width:100%;font:500 16px var(--sans);padding:11px 13px;border:1px solid #ccc;border-radius:2px;background:#fff;color:var(--ink);box-sizing:border-box}
.pnp textarea{font:400 16px/1.55 var(--sans);resize:vertical}
#pnp-csv{font:400 14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pnp input:focus,.pnp select:focus,.pnp textarea:focus,.pnp button:focus-visible,.pnp summary:focus-visible,.pnp label:focus-within{outline:2px solid var(--red);outline-offset:1px}
.pnp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pnp-lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pnp-cnt{font-size:13px;color:#6b6b6b;font-variant-numeric:tabular-nums;white-space:nowrap}
.pnp-file{display:block;font-size:14px;color:#555;margin-top:6px;cursor:pointer}
.pnp-file input,.pnp-up input{position:absolute;width:1px;height:1px;opacity:0}
.pnp .pnp-file{text-decoration:underline;text-transform:none;letter-spacing:0;font-weight:400;font-size:14px}
.pnp-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pnp-chips .pnp-k{margin:0 4px 0 0;font-size:12px}
.pnp-chip{font:600 13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:6px 10px;border:1px solid #ccc;background:#fff;border-radius:40px;cursor:pointer;color:var(--ink)}
.pnp-chip:hover{border-color:var(--ink)}
.pnp-sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pnp-sgrid label span{display:block;font:600 13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#555;margin-bottom:4px}
.pnp code{font:500 13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f0eee8;padding:1px 5px;border-radius:2px;color:var(--ink);word-break:break-word}
.pnp-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pnp-checks li{font-size:14.5px;line-height:1.5;padding:10px 12px 10px 34px;background:#fff;border:1px solid var(--line);position:relative;color:#333}
.pnp-checks li::before{position:absolute;left:12px;top:10px;font-weight:700}
.pnp-checks li.ok::before{content:"✓";color:#1e7a46}
.pnp-checks li.warn::before{content:"!";color:#a14a06}
.pnp-checks li.bad::before{content:"×";color:#b3141a}
.pnp-checks li.note::before{content:"i";color:#555;font-style:italic}
.pnp-more{border-top:1px solid var(--line);padding-top:14px}
.pnp-more summary{font:600 15.5px var(--sans);cursor:pointer;color:var(--ink);line-height:1.4}
.pnp-in{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.pnp-hint{font-size:14px;color:#555;margin:0;line-height:1.5}
.pnp-link{font:600 14px var(--sans);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:var(--ink);text-align:left}
.pnp-btns{display:flex;flex-wrap:wrap;gap:10px}
.pnp-btn{font:600 15px var(--sans);padding:11px 18px;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;border-radius:2px;display:inline-block;position:relative}
.pnp-btn:hover{background:#e7e4dd}
.pnp-btn.pri{background:var(--ink);color:#fff}
.pnp-btn.pri:hover{background:#333}
.pnp-rule{display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);background:#fafaf8}
.pnp-rule .pnp-k{margin:0}
.pnp-rule .pnp-rt{grid-column:1/-2}
.pnp-x{font:600 20px var(--sans);width:36px;height:36px;border:1px solid #ccc;background:#fff;cursor:pointer;border-radius:2px;color:var(--ink)}
.pnp .pnp-chk{display:flex;gap:10px;align-items:flex-start;font:400 15px/1.45 var(--sans);color:var(--ink);cursor:pointer}
.pnp-chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink);flex:none}
.pnp-chk.sm{align-items:center;font-size:14px}
.pnp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);background:#fff;margin-bottom:10px}
.pnp-stats>div{padding:12px 10px;border-right:1px solid var(--line)}
.pnp-stats>div:last-child{border-right:0}
.pnp-stats b{display:block;font:700 22px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.pnp-stats span{display:block;font-size:12.5px;color:#555;margin-top:4px}
.pnp-code{font:500 13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f5f4f0;border:1px solid var(--line);padding:10px 12px;white-space:pre-wrap;word-break:break-all;margin:0}
.pnp-exp{display:flex;flex-direction:column;gap:12px;border-top:1px dashed #ccc;padding-top:14px}
.pnp-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pnp-tabs{display:flex;border:1px solid var(--ink);border-radius:2px;overflow:hidden}
.pnp-tabs button,.pnp-filter button{font:600 14px var(--sans);padding:8px 14px;border:0;background:#fff;color:var(--ink);cursor:pointer}
.pnp-tabs button+button{border-left:1px solid var(--ink)}
.pnp-tabs button[aria-pressed=true],.pnp-filter button[aria-pressed=true]{background:var(--ink);color:#fff}
.pnp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid var(--line);padding:6px}
.pnp-nav button{font:600 20px var(--sans);width:40px;height:36px;border:1px solid #ccc;background:#fff;cursor:pointer;border-radius:2px;color:var(--ink)}
.pnp-nav button:disabled{opacity:.35;cursor:default}
.pnp-nav span{font-size:14px;text-align:center}
.pnp-note{font-size:13px;color:#555;line-height:1.5;margin:0}
/* phones */
.pnp-devs{display:grid;grid-template-columns:1fr;gap:14px}
.pnp-dev{margin:0;min-width:0;overflow:hidden;container-type:inline-size}
@container (max-width:392px){.ios .pnp-wall{zoom:.9}}
@container (max-width:359px){.ios .pnp-wall{zoom:.84}.and .pnp-wall{zoom:.91}}
@container (max-width:329px){.ios .pnp-wall{zoom:.76}.and .pnp-wall{zoom:.83}}
@container (max-width:299px){.ios .pnp-wall{zoom:.68}.and .pnp-wall{zoom:.75}}
@container (max-width:269px){.ios .pnp-wall{zoom:.61}.and .pnp-wall{zoom:.66}}
@container (max-width:239px){.ios .pnp-wall{zoom:.5}.and .pnp-wall{zoom:.55}}
.pnp-dev figcaption{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#555;margin-bottom:6px}
.pnp-wall{border-radius:18px;padding:14px 12px;background:#3d4a57;width:393px;box-sizing:border-box}
.pnp-dev.and .pnp-wall{background:#e9e7ee;border-radius:14px;padding:12px 10px;width:360px}
.pnp-card{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari",system-ui,sans-serif;color:#111;overflow:hidden}
.ios .pnp-card{background:rgba(246,246,248,.96);border-radius:20px;padding:12px 14px}
.and .pnp-card{background:#fff;border-radius:22px;padding:14px 16px}
.pnp-row{display:flex;gap:10px;align-items:flex-start}
.pnp-ic{flex:none;width:38px;height:38px;border-radius:9px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:700 17px var(--sans)}
.pnp-tx{flex:1;min-width:0}
.pnp-tl{display:flex;justify-content:space-between;gap:8px;line-height:20px;font-size:15px}
.pnp-tl b{font-weight:600;white-space:pre;overflow:hidden}
.and .pnp-tl{font-size:15px}
.and .pnp-tl b{font-weight:500}
.pnp-tl i{font-style:normal;color:#6b6b6b;font-size:13px;flex:none}
.pnp-sub{font-size:15px;font-weight:600;line-height:20px}
.pnp-bd{font-size:15px;line-height:20px;white-space:pre;overflow:hidden}
.and .pnp-bd{font-size:14px;color:#3c3c3c}
.pnp-th{flex:none;width:36px;height:36px;border-radius:7px;overflow:hidden;background:#ddd}
.and .pnp-th{width:40px;height:40px;border-radius:8px}
.pnp-th img,.pnp-big img{width:100%;height:100%;object-fit:cover;display:block}
.pnp-big{margin:-12px -14px 10px;aspect-ratio:2/1;background:#ddd;overflow:hidden}
.pnp-big.and{margin:10px 0 0;border-radius:12px}
.pnp-ah{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#555;margin-bottom:6px}
.pnp-ah span{color:#6b6b6b}
.pnp-sm{width:18px;height:18px;border-radius:50%;background:#111;color:#fff!important;display:inline-flex;align-items:center;justify-content:center;font:700 10px var(--sans)}
.pnp-chev{margin-left:auto;font-size:16px;line-height:1}
.pnp-chev.up{transform:rotate(180deg)}
.pnp-meta{font-size:13px;color:#555;margin:6px 0 0;line-height:1.45}
.pnp-meta .cut{color:#8a3c00}
.pnp-devs.dark .pnp-wall{background:#0e1114}
.pnp-devs.dark .ios .pnp-card{background:rgba(44,44,46,.96);color:#f2f2f2}
.pnp-devs.dark .and .pnp-wall{background:#1b1b1f}
.pnp-devs.dark .and .pnp-card{background:#2b2930;color:#eee}
.pnp-devs.dark .and .pnp-bd{color:#d6d6d6}
.pnp-devs.dark .pnp-ah,.pnp-devs.dark .pnp-ah span,.pnp-devs.dark .pnp-tl i{color:#b5b5b5}
.pnp-devs.dark .pnp-ic,.pnp-devs.dark .pnp-sm{background:#f2f2f2;color:#111!important}
/* examples */
.pnp-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pnp-filter button{border:1px solid var(--ink);border-radius:40px;padding:7px 14px}
.pnx{border:1px solid var(--line);background:#fff;padding:18px;margin:0 0 16px}
.pnx h3{margin-top:0}
.pnx-v{min-height:165px}
.pnx-v .pnp-devs.mini{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pnx-v .pnp-dev figcaption{font-size:11.5px}
.pnx .pnx-n{font-size:14px;line-height:1.5;color:#555;margin:8px 0 0}
.pnx dd code,.pnx dd{word-break:break-word}
.pnx dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:15px}
.pnx dt{font-weight:600}
.pnx dd{margin:0}
.pnx-open{font-weight:600}
.pnp-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:12px 18px;font:600 15px var(--sans);opacity:0;pointer-events:none;transition:.2s;z-index:50;margin:0}
.pnp-toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.pnp-grid{grid-template-columns:1fr}.pnp-ed{border-right:0;border-bottom:1px solid var(--line);padding:20px}.pnp-out{padding:20px}.pnp-out>div{position:static}}
@media(max-width:620px){.pnx-v{min-height:165px}
.pnx-v .pnp-devs.mini{grid-template-columns:1fr}}
@media(max-width:520px){.pnp-two,.pnp-sgrid{grid-template-columns:1fr}.pnp-rule{grid-template-columns:1fr 1fr}.pnp-rule .pnp-k{grid-column:1/-1}.pnp-rule .pnp-rt{grid-column:1/-1}.pnp-stats{grid-template-columns:1fr 1fr}.pnp-stats>div:nth-child(2){border-right:0}.pnp-stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}