/* ---- UI: Edit category (js/vault-category-edit.js): a pencil beside the trash on the tile (on a
   computer, on hover), Edit on the category's page, and a small panel: name, colour, move. */
.vd-tile-edit {
  position: absolute; top: 50%; right: 14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 12px; background: var(--raised); color: var(--muted); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(-50%); transition: opacity 120ms, color 120ms;
}
.vd-tile-wrap:has(.vd-tile-del) .vd-tile-edit { right: 58px; }
.vd-tile-edit svg { width: 18px; height: 18px; }
.vd-tile-wrap:hover .vd-tile-edit, .vd-tile-edit:focus-visible { opacity: 1; pointer-events: auto; }
.vd-tile-wrap:has(.vd-tile-edit:focus-visible) .vd-ring { opacity: 0; }
.vd-tile-edit:hover, .vd-tile-edit:focus-visible { color: var(--text); outline: none; box-shadow: inset 0 0 0 1.5px var(--accent, currentColor); }
@media (max-width: 760px), (hover: none) { .vd-tile-edit { display: none; } }
.vd-drill-acts .vd-drill-edit { display: inline-flex; align-items: center; gap: 8px; }
.vd-drill-edit svg { width: 18px; height: 18px; }

dialog.panel.vce .em-ask-inner { gap: 14px; }
.vce-look, .vce-move { display: flex; flex-direction: column; gap: 12px; }
.vce-look[hidden], .vce-move[hidden] { display: none; }
.vce-move { padding-top: 14px; border-top: 1px solid var(--line, rgba(127, 127, 127, .2)); }
.vce-colors { margin: 0; padding: 0; border: 0; min-width: 0; }
.vce-colors legend { padding: 0; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.vce-swatches { display: grid; grid-template-columns: repeat(6, 44px); gap: 6px; }
.vce-swatch { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; }
.vce-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.vce-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--c); transition: transform 120ms; }
.vce-swatch:hover .vce-dot { transform: scale(1.08); }
.vce-swatch:has(input:checked) { box-shadow: inset 0 0 0 2px var(--c); }
.vce-swatch:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.vce-move-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vce-move-row .btn { height: 44px; min-width: 96px; }
.vce-move-note { flex: 1; }
.vce-error:empty { display: none; }
@media (max-width: 760px) {
  .vce-swatches { grid-template-columns: repeat(6, 1fr); }
  .vce-swatch { width: 100%; }
  .vce-move-row .btn { min-width: 120px; }
}
#vaults-page .vd-drill-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* UI: the pencil and trash on a tile, smaller (32 px; a computer only, on hover) */
#vd-tiles .vd-tile-wrap .vd-tile-edit, #vd-tiles .vd-tile-wrap .vd-tile-del { width: 32px; height: 32px; border-radius: 10px; right: 12px; }
#vd-tiles .vd-tile-wrap:has(.vd-tile-del) .vd-tile-edit { right: 50px; }
#vd-tiles .vd-tile-wrap .vd-tile-edit svg, #vd-tiles .vd-tile-wrap .vd-tile-del svg { width: 15px; height: 15px; }