/* StelixPWA: the right-click menu and the swipe drawer of every Stelix PWA (Felix 2026-10-30).
   One source: StelixOS-Kit ui/pwa/. Stelix Code's look (1919ffe, gestures.js); each app's own tokens
   come first (Stelix Code: --paper/--ink..., StelixOS Kit: --surface-raised/--text...), then a plain default. */

/* Right click on the desktop: what you can do with the thing under the pointer. */
.rmenu { position: fixed; z-index: 200; min-width: 220px; max-width: 320px; padding: 6px;
  background: var(--paper, var(--surface-raised, #fff)); color: var(--ink, var(--text, #111113));
  border: 1px solid var(--hair, var(--border, #e6e6e9)); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(10,9,8,.16), 0 2px 6px rgba(10,9,8,.08); }
.rmenu[hidden] { display: none; }
.rmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; font: inherit; font-size: 16px; color: var(--ink, var(--text, #111113)); white-space: nowrap; cursor: default; }
.rmenu button:hover, .rmenu button:focus-visible { background: var(--wash, var(--surface, #f1f1f4)); outline: 0; }
.rmenu button .ic { width: 17px; height: 17px; flex: none; color: var(--muted, var(--text-muted, #6b6b73)); }
.rmenu button.danger, .rmenu button.danger .ic { color: var(--bad, var(--danger, #b42318)); }
/* Long press on a phone: finger-sized rows. */
.rmenu.touch button { padding: 12px 12px; font-size: 16px; }
.rmenu hr { border: 0; border-top: 1px solid var(--hair, var(--border, #e6e6e9)); margin: 5px 4px; }
.rmenu-head { padding: 5px 10px 6px; font-size: 16px; font-weight: 600; color: var(--muted, var(--text-muted, #6b6b73));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rmenu-target { outline: 2px solid rgba(var(--ember-rgb, 255,106,0),.35); outline-offset: -2px; border-radius: 8px; }

/* The phone drawer, Stelix Code's: from the left, min(320px, 88vw), 200ms, the scrim under it. An app that
   has its own drawer CSS (Stelix Code) does not need these classes. */
.stx-scrim { position: fixed; inset: 0; background: rgba(10,9,8,.4); z-index: 40; transition: opacity .2s; }
.stx-scrim[hidden] { display: none; }
.stx-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 88vw); z-index: 50;
  transform: translateX(-100%); transition: transform .2s; }
.stx-drawer.open { transform: none; }
.stx-drawer.open, .stx-drawer[style*="translate"] { box-shadow: 20px 0 50px rgba(10,9,8,.12); }