/* The app beside the news (assets/app/pane.js): the button in the top bar and the phone-shaped pane on the right. */
.pt-app-btn { font: 600 13px var(--sans); padding: 6px 12px; min-height: 36px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--panel); color: var(--ink); cursor: pointer; margin-right: 6px; }
.pt-app-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pt-pane { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px 16px; background: var(--band); color: var(--on-band); }
.pt-pane[hidden] { display: none; }
.pt-pane-bar { width: 100%; display: flex; align-items: center; gap: 12px; font: 13px var(--sans); }
.pt-pane-bar b { flex: 1; }
.pt-pane-bar a, .pt-pane-bar button { color: var(--on-band); font: 600 13px var(--sans); background: none; border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; cursor: pointer; text-decoration: none; }
.pt-pane-phone { flex: 1; width: 390px; max-height: 844px; border: 10px solid #000; border-radius: 38px; overflow: hidden; background: #000; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.pt-pane-phone iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--paper); }
html.pt-pane-open body { margin-right: 420px; }
@media (max-width: 1099px) { .pt-pane { display: none; } html.pt-pane-open body { margin-right: 0; } }
@media print { .pt-pane, .pt-app-btn { display: none !important; } }