/* Admin ordering overlay for /admin/curate.html: the homepage, plus handles on every gallery
   tile and a dock along the bottom. Every class is cu- prefixed so nothing in /styles.css applies. */
.cu { padding-bottom: 76px; }
.cu #wall .rc { cursor: grab; transition: opacity .12s; }
.cu #wall .rc.cu-drag { opacity: .35; }
.cu #wall .t-media { overflow: visible; }
.cu #wall .t-media video, .cu #wall .t-media img { border-radius: 8px; }
.cu #wall .rc.cu-before .t-media::before, .cu #wall .rc.cu-after .t-media::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: var(--acid); z-index: 3; }
.cu #wall .rc.cu-before .t-media::before { left: calc(var(--g) / -2 - 2px); }
.cu #wall .rc.cu-after .t-media::before { right: calc(var(--g) / -2 - 2px); }

.cu-tools { position: absolute; z-index: 2; top: 6px; left: 6px; display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: rgba(0, 0, 0, .78); color: #fff; font: 500 11px/1 var(--mono); }
.cu-n { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px 0 6px; border-radius: 4px; background: var(--acid); color: var(--acid-ink); font-variant-numeric: tabular-nums; }
.cu-tools button { width: 26px; height: 26px; border-radius: 4px; color: #fff; font: 500 13px/1 var(--mono); }
.cu-tools button:hover:not(:disabled), .cu-tools button:focus-visible { background: rgba(255, 255, 255, .22); outline: none; }
.cu-tools button:disabled { opacity: .3; cursor: default; }
.cu-meta { position: absolute; z-index: 2; left: 6px; bottom: 6px; max-width: calc(100% - 12px); padding: 5px 7px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: #fff;
  font: 400 10px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.cu-meta b { font-weight: 500; color: var(--acid); }

.cu-phone #main { max-width: 390px; margin-inline: auto; }

.cu-dock { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 12px;
  border-radius: 10px; background: var(--fill); color: var(--ink-2); font: 500 11px/1.2 var(--mono); letter-spacing: .04em; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.cu-dock a.cu-back { color: var(--ink-3); }
.cu-dock a.cu-back:hover { color: var(--ink); }
.cu-seg { display: inline-flex; padding: 3px; border-radius: 6px; background: var(--bg); }
.cu-seg button { padding: 6px 10px; border-radius: 4px; color: var(--ink-3); font: inherit; white-space: nowrap; }
.cu-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.cu-stat { color: var(--ink-3); white-space: nowrap; }
.cu-stat b { color: var(--ink); font-weight: 500; }
.cu-state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); white-space: nowrap; }
.cu-state i { width: 8px; height: 8px; border-radius: 50%; background: #0ca30c; }
.cu-state.cu-warn i { background: #fab219; }
.cu-state.cu-bad i { background: #d03b3b; }
.cu-state a { text-decoration: underline; }
.cu-act { padding: 8px 12px; border-radius: 5px; background: var(--fill-2); color: var(--ink); font: inherit; }
.cu-act:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.cu-act.cu-go { background: var(--acid); color: var(--acid-ink); }
.cu-act:disabled { opacity: .4; cursor: default; }
@media (max-width: 760px) {
  .cu { padding-bottom: 150px; }
  .cu-state { margin-left: 0; }
  .cu-stat { display: none; }
}