/* Removing photos and videos: the clear Delete button on every card, the "Are you
   sure you want to remove this?" ask, the Undo bar and the Manage Media list.
   Every control is at least 44px so it is easy to hit with a thumb. */

/* ------------------------------------------------ direct card Delete button */
.member-photo-grid figure,.short-clip-card,.media-manage-card{position:relative}
.media-menu{position:absolute;top:6px;right:6px;z-index:3}
.media-menu[hidden]{display:none}
.media-delete-direct{display:flex;align-items:center;justify-content:center;min-width:78px;min-height:44px;padding:9px 13px;border:2px solid #fff;border-radius:999px;background:var(--rs-red,#ce0633);color:#fff;font:800 14px/1 var(--r-sans);cursor:pointer;touch-action:manipulation;box-shadow:0 3px 12px #17171773}
.media-delete-direct:hover,.media-delete-direct:focus-visible{background:#8d0821;outline:3px solid var(--rs-gold,#ffbf46);outline-offset:2px}
.media-delete-direct:disabled{opacity:.58;cursor:default}
.roster-clip-rail>.media-menu{position:static;top:auto;right:auto}.roster-clip-rail .media-delete-direct{min-width:72px;min-height:48px;padding:8px 11px}
.media-menu-trigger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--rs-gold,#ffbf46);border-radius:50%;background:#171717d9;color:#fff;cursor:pointer;touch-action:manipulation;box-shadow:0 2px 6px #17171759}
.media-menu-trigger:hover,.media-menu-trigger:focus-visible{background:var(--rs-red-deep,#ce0633);border-color:#fff}
.media-menu-trigger:focus-visible{outline:3px solid var(--rs-gold,#ffbf46);outline-offset:2px}
.media-menu-trigger:disabled{opacity:.55;cursor:default}
.media-menu-dots{display:block;font:700 24px/1 var(--r-sans);margin-top:-10px}
.media-menu-list{position:absolute;top:48px;right:0;min-width:190px;padding:6px;border:2px solid var(--rs-red-deep,#ce0633);background:#fff;box-shadow:0 10px 30px #17171740}
.media-menu-list[hidden]{display:none}
.media-menu-delete{display:block;width:100%;min-height:48px;padding:12px 14px;border:0;background:#fff;color:#a50428;font:700 16px/1.2 var(--r-sans);text-align:left;cursor:pointer;touch-action:manipulation}
.media-menu-delete:hover,.media-menu-delete:focus-visible{background:var(--rs-red,#ce0633);color:#fff;outline:0}
.media-menu-delete:focus-visible{box-shadow:inset 0 0 0 3px var(--rs-gold,#ffbf46)}

/* ---------------------------------------------------- are you sure? dialog */
.media-confirm{width:min(420px,92vw);padding:20px;border:2px solid var(--rs-red-deep,#ce0633);background:#fff;color:#171719;font-family:var(--r-sans);box-shadow:0 18px 60px #5a101f70}
.media-confirm::backdrop{background:#430a15c9}
.media-confirm:not([open]){display:none}
.media-confirm-title{margin:0 0 8px;font-size:21px;line-height:1.25;color:#a50428}
.media-confirm-note{margin:0 0 18px;font-size:15px;line-height:1.5;color:#5b524b}
.media-confirm-actions{display:flex;gap:10px;flex-wrap:wrap}
.media-confirm-actions button{flex:1 1 140px;min-height:52px;padding:12px 16px;border:2px solid var(--rs-red-deep,#ce0633);font:700 17px/1.2 var(--r-sans);cursor:pointer;touch-action:manipulation}
.media-confirm-remove{background:var(--rs-red,#ce0633);color:#fff}
.media-confirm-cancel{background:#fff;color:#a50428}
.media-confirm-actions button:focus-visible{outline:3px solid var(--rs-gold,#ffbf46);outline-offset:2px}

/* ------------------------------------------------------------- undo notice */
.media-toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:2100;display:flex;align-items:center;gap:12px;flex-wrap:wrap;width:min(560px,94vw);box-sizing:border-box;padding:12px 14px;border:2px solid var(--rs-gold,#ffbf46);background:#171717f2;color:#fff;font-family:var(--r-sans);box-shadow:0 12px 34px #17171773}
.media-toast[hidden]{display:none}
.media-toast-text{flex:1 1 180px;margin:0;font-size:15px;line-height:1.4}
.media-toast button{min-height:46px;padding:10px 16px;border:2px solid var(--rs-gold,#ffbf46);font:700 16px/1.2 var(--r-sans);cursor:pointer;touch-action:manipulation}
.media-toast-undo{background:var(--rs-gold,#ffbf46);color:#4a2c00}
.media-toast-close{background:transparent;color:#ffe9b3;border-color:#ffe9b366}
.media-toast button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.media-toast button:disabled{opacity:.6;cursor:default}
@media(max-width:600px){.media-toast{left:8px;right:8px;bottom:10px;width:auto;transform:none}.media-toast-undo{flex:1 1 auto}}

/* --------------------------------------------------------- manage media */
.member-media-manage{margin:18px 0}
.member-media-manage h3{margin:0 0 6px;color:#a50428}
.media-manage-intro{margin:0 0 10px;font-size:14px;line-height:1.5;color:#5b524b}
.media-manage-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
.media-manage-toolbar button{min-height:48px;padding:12px 16px;border:2px solid var(--rs-red-deep,#ce0633);background:#ffffff;color:#891329;font:700 15px/1.2 var(--r-sans);cursor:pointer;touch-action:manipulation}
.media-manage-toolbar button:disabled{opacity:.5;cursor:default}
.media-manage-toolbar button:focus-visible{outline:3px solid var(--rs-gold,#ffbf46);outline-offset:2px}
.media-manage-remove{background:var(--rs-red,#ce0633)!important;color:#fff!important}
.media-manage-count{font-size:14px;font-weight:700;color:#5b524b}
.media-manage-status{min-height:1.4em;margin:8px 0;font-size:14px;font-weight:700}
.media-manage-group{margin:14px 0 0}
.media-manage-group h4{margin:0 0 8px;font-size:16px;color:#171717}
.media-manage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.media-manage-card{margin:0;padding:0;border:2px solid #e6e1d5;background:#fff}
.media-manage-card[data-selected=true]{border-color:var(--rs-red,#ce0633);box-shadow:0 0 0 2px #e3183733}
.media-manage-pick{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px;font:700 14px/1.3 var(--r-sans);color:#171719;cursor:pointer;touch-action:manipulation}
.media-manage-pick input{width:26px;height:26px;flex:none;accent-color:#a50428}
.media-manage-card img,.media-manage-card video{display:block;width:100%;height:150px;object-fit:cover;background:#f7f5ef}
.media-manage-note{margin:0;padding:8px 10px;font-size:12px;line-height:1.4;color:#6e645c;overflow-wrap:anywhere}
.media-manage-state{display:inline-block;margin:0 0 8px 10px;padding:3px 8px;border-radius:10px;background:#fff3df;color:#6f3800;font:700 12px/1.5 var(--r-sans)}
.media-manage-empty{margin:8px 0;font-size:14px;color:#6e645c}
@media(max-width:600px){.media-manage-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}.media-manage-toolbar button{flex:1 1 46%}}