/* My Files — Signal design (verbatim translation of docs/design/myfiles/My Files.dc.html, .mf namespace).
   Colors come from CSS custom props set in JS (tokens(): shared + light + dark). Almost all layout is inline
   on the markup (verbatim from the mockup); this file carries only what can't be inlined: the font import,
   the helmet <style> rules (scrollbar / hover / focus / drop-hover), and the few helper classes added during
   translation (spinner, page-number active state, menu-item & share-btn hovers). */

/* fonts the mockup references with NO generic fallback (shell only loads Inter) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.mf-root, .mf-root * { box-sizing: border-box; }
.mf-root ::selection { background: #C2CCFB; }

/* scrollbar (helmet) */
.mf-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.mf-scroll::-webkit-scrollbar-thumb { background: var(--border-strong, #cfd4e4); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.mf-scroll::-webkit-scrollbar-track { background: transparent; }

/* row hover (helmet) */
.mf-row { transition: background .12s; }
.mf-row:hover { background: var(--surface-2, #FAFBFE); }
.mf-row:hover .mf-kebab { opacity: 1 !important; }

/* generic action hover (helmet) */
.mf-act { transition: filter .14s, background .14s, border-color .14s, color .14s, box-shadow .14s; }
.mf-act:hover { filter: brightness(.97); }

/* inputs (helmet) */
.mf-in::placeholder { color: var(--faint, #A2A7BC); }
.mf-in:focus { outline: none; border-color: var(--brand-400, #7B8FF3); box-shadow: 0 0 0 3px rgba(94,118,238,.14); }

/* upload drop hover (helmet) */
.mf-drop { transition: border-color .16s, background .16s; }
.mf-drop:hover, .mf-drop-over { border-color: var(--brand-400, #7B8FF3); background: var(--brand-50, #EEF1FE); }

/* row Share button hover (mockup style-hover) */
.mf-sharebtn:hover { background: var(--brand-50); border-color: var(--brand-100); }

/* kebab menu item hovers (mockup style-hover) */
.mf-menu-item:hover { background: var(--surface-2); }
.mf-menu-danger:hover { background: var(--bad-bg); }

/* pagination page-number buttons (default + active) */
.mf-pgnum { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.mf-pgnum-on { border: none; background: var(--brand-600); color: #fff; }

/* spinner used in the Browse button while uploading */
.mf-spin { width: 26px; height: 26px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: mf-spin .7s linear infinite; }
.mf-spin-sm { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes mf-spin { to { transform: rotate(360deg); } }

/* disabled pager arrows */
.mf-act:disabled { opacity: .45; cursor: default; filter: none; }