/* presenter-remote.css — share button + QR/connection modal for the cloud
   phone remote. Mirrors the deck's existing .helpBtn so the control reads as
   native, and uses the brand tokens (with hard fallbacks so it still looks
   right if a deck doesn't expose them). All local; no remote assets. */

/* Share button — twin of .helpBtn, seated just inside it (bottom-left). It is
   hidden until presenter-remote.js reveals it, so a deck without the script has
   no dead control. */
.shareBtn{
  position:fixed;bottom:14px;left:56px;z-index:65;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--hair,rgba(0,19,31,.12));background:rgba(255,255,255,.92);
  color:var(--ink-soft,#33444c);cursor:pointer;display:none;align-items:center;justify-content:center;
  padding:0;box-shadow:0 8px 20px rgba(0,19,31,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .15s,color .2s,border-color .2s;
}
.shareBtn:hover{color:var(--brand,#FF5B05);border-color:var(--brand,#FF5B05);transform:translateY(-1px)}
.shareBtn svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.shareBtn svg circle{fill:currentColor;stroke:none}

/* Modal */
.pr-overlay{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(0,19,31,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  direction:rtl;font-family:"Noto Kufi Arabic",sans-serif;padding:24px;
}
.pr-overlay.on{display:flex}
.pr-card{
  background:#fff;border-radius:16px;border:1px solid var(--hair,rgba(0,19,31,.12));
  box-shadow:0 34px 100px rgba(0,19,31,.34);padding:26px 28px;width:min(380px,92vw);
  text-align:center;
}
.pr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--hair,rgba(0,19,31,.12));padding-bottom:13px;margin-bottom:18px}
.pr-title{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand,#FF5B05);text-align:start;line-height:1.5}
.pr-x{appearance:none;border:1px solid var(--hair,rgba(0,19,31,.12));background:#fff;
  width:30px;height:30px;border-radius:50%;font-size:19px;line-height:1;cursor:pointer;
  color:var(--ink-soft,#33444c);flex:none;display:flex;align-items:center;justify-content:center}
.pr-x:hover{color:var(--brand,#FF5B05);border-color:var(--brand,#FF5B05)}

.pr-qr{display:flex;align-items:center;justify-content:center;min-height:200px;
  background:#fff;border:1px solid var(--hair,rgba(0,19,31,.12));border-radius:12px;
  padding:14px;margin-bottom:16px}
.pr-qr svg{width:200px;height:200px;display:block;shape-rendering:crispEdges}
.pr-noqr{font-size:14px;color:var(--muted,#6a7a82);line-height:1.6}

.pr-status{font-size:14px;color:var(--ink-soft,#33444c);margin-bottom:8px;min-height:20px}
.pr-status.ok{color:#1c7a3e}
.pr-status.warn{color:#c0341d}
.pr-url{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;direction:ltr;
  word-break:break-all;color:var(--muted,#6a7a82);text-decoration:none;margin-bottom:12px}
.pr-url:hover{color:var(--brand,#FF5B05);text-decoration:underline}
.pr-hint{font-size:13px;color:var(--muted,#6a7a82);line-height:1.6;margin-bottom:18px}
.pr-disconnect{appearance:none;width:100%;padding:11px 16px;border-radius:10px;cursor:pointer;
  border:1px solid var(--hair,rgba(0,19,31,.12));background:#F4F1EA;color:var(--ink,#00131f);
  font-family:"Noto Kufi Arabic",sans-serif;font-size:14px;font-weight:600;
  transition:background .2s,color .2s,border-color .2s}
.pr-disconnect:hover{background:var(--brand,#FF5B05);border-color:var(--brand,#FF5B05);color:#00131f}

@media (prefers-reduced-motion:reduce){
  .shareBtn{transition:none}
}