/* faz1/kumanda.css · the computer side of the phone remote (faz1/kumanda-host.js): the Kumanda button, the pairing card
 * and the big pointer of mouse mode. Every selector starts with .f1-kp- or #f1-kp- (and the button's own id). */
#f1-kumanda-btn .f1-ti { --ti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='4.5' y='1.5' width='7' height='13' rx='1.6'/%3E%3Cpath d='M7 12.2h2'/%3E%3C/svg%3E"); }
#f1-kumanda-btn.f1-kp-on { color: var(--pro-green, #218b6c); }
/* it sits in the playback row (faz1.html #f1-controls): icon and word, only the icon below 1600 px so the row keeps its room */
#f1-controls > #f1-kumanda-btn { display: inline-flex; align-items: center; gap: 6px; }
#f1-kumanda-btn .f1-ti { display: block; }
@media (max-width: 1599px) { #f1-controls > #f1-kumanda-btn > span { display: none; } }

/* the pairing card inside the page's modal */
.f1-kp-pair { display: flex; gap: 20px; align-items: center; max-width: 620px; }
.f1-kp-qr { flex: none; width: 220px; height: 220px; display: grid; place-items: center; border-radius: 12px; background: #fff; padding: 8px; color: #555; font-size: 12px; text-align: center; }
.f1-kp-qr svg { width: 100%; height: 100%; display: block; }
.f1-kp-side { min-width: 0; }
.f1-kp-side p { margin: 0 0 8px; }
.f1-kp-or { color: var(--pro-text2); font-size: 13px; }
.f1-kp-url { font-weight: 600; }
.f1-kp-code { font: 700 34px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; margin: 4px 0 10px !important; }
.f1-kp-status { font-size: 13px; color: var(--pro-text2); }
.f1-kp-status[data-tone="ok"] { color: var(--pro-green, #218b6c); font-weight: 600; }
.f1-kp-status[data-tone="warn"] { color: var(--st-crit, #c0392b); }

/* the link to send to a phone (Kumanda bağlantısı): in the pairing card under the code, and alone from its own button */
.f1-kp-pairwrap { display: flex; flex-direction: column; gap: 12px; max-width: 620px; }
.f1-kp-pairwrap .f1-kp-qr { width: 180px; height: 180px; }
.f1-kp-pairshare { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--pro-line); }
.f1-kp-sharecard { max-width: 560px; display: flex; flex-direction: column; gap: 8px; }
.f1-kp-sharecard p { margin: 0; }
.f1-kp-share { display: flex; flex-direction: column; gap: 8px; }
.f1-kp-share p { margin: 0; }
.f1-kp-link { width: 100%; box-sizing: border-box; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--pro-line); background: var(--pro-soft); color: var(--pro-ink); font: 600 14px/1 var(--f1-mono, monospace); }
.f1-kp-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.f1-kp-share-btns .f1-btn { height: 34px; padding: 0 14px; text-decoration: none; display: inline-flex; align-items: center; }
.f1-kp-wa { border-color: #25d366 !important; color: #128c4a !important; }
:root[data-film-theme="dark"] .f1-kp-wa { color: #4fe08b !important; }
.f1-kp-share-msg { min-height: 1.3em; font-size: 13px; color: var(--pro-green, #218b6c); }

/* who is connected: the count on the button (from two phones on) and the list in the card */
#f1-kumanda-btn { position: relative; }
.f1-kp-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--pro-green, #218b6c); color: #fff; font: 700 10.5px/16px system-ui, sans-serif; text-align: center; }
.f1-kp-count[hidden] { display: none; }
.f1-kp-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.f1-kp-people[hidden] { display: none; }
.f1-kp-people li { display: flex; align-items: baseline; gap: 6px; }
.f1-kp-people small { color: var(--pro-text2); }
.f1-kp-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; display: inline-block; transform: translateY(1px); }

/* the pointers moved from the phones: one per participant in its colour with its name, large, always on top, never in
   the way of clicks; each glides over the time between two strokes (--kp-t) */
.f1-kp-ptr { --kp-c: #5267d8; position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; width: 34px; height: 34px; margin: -3px 0 0 -4px; transition: opacity .4s, transform var(--kp-t, 0ms) linear; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.f1-kp-ptr[hidden] { display: none; }
.f1-kp-ptr svg { display: block; }
.f1-kp-ptr path { fill: var(--kp-c); stroke: #fff; }
.f1-kp-ptr.f1-kp-idle { opacity: .55; }
.f1-kp-ring { position: absolute; left: -14px; top: -14px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--kp-c); opacity: 0; }
.f1-kp-name { position: absolute; left: 24px; top: 28px; padding: 2px 8px; border-radius: 9px; background: var(--kp-c); color: #fff; font: 600 12px/1.3 -apple-system, "Segoe UI", system-ui, sans-serif; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.3); }