/* railedit.js: editing the sidebar on the sidebar. The sliders button at the
 * right of the search row, and edit mode: rows with a grip, the name and an
 * eye, in the rail's place; Reset and Done under them. Quiet, ink only. */

.rail-nav { position: relative; }
.rail-edit-open {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  color: var(--sv-ink-tertiary);
  opacity: 0;
  transition: opacity var(--sv-dur-instant) var(--sv-ease-out), color var(--sv-dur-instant) var(--sv-ease-out);
}
.rail-nav:is(:hover, :focus-within) .rail-edit-open, .rail-edit-open:focus-visible { opacity: 1; }
/* Searching takes the row (the field's clear button sits there); editing hides the way in. */
.rail-nav:has(.rail-search:focus, .rail-search:not(:placeholder-shown)) .rail-edit-open,
.rail-nav.editing .rail-edit-open { display: none; }
.rail-nav .rail-search-wrap .rail-search { padding-right: 32px; }

/* Edit mode: the rows stand in for the destinations. */
.rail-nav.editing > .rail-work { display: none; }
.rail-edit[hidden] { display: none; }
.rail-edit { display: grid; gap: var(--sv-space-1); margin-top: calc(-1 * var(--sv-space-2)); }
.rail-edit-hint { margin: 0; padding: 0 var(--sv-space-3); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.rail-edit-list { position: relative; display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.rail-edit-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sv-space-2);
  min-height: 32px;
  padding: 0 2px 0 var(--sv-space-1);
  border-radius: var(--sv-radius);
  background: var(--ws-sidebar);
  color: var(--sv-ink);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rail-edit-row:hover { background: var(--ws-hover); }
.rail-edit-row:focus-visible { outline: 2px solid var(--sv-ink); outline-offset: -2px; }
.rail-edit-grip { display: inline-flex; align-items: center; justify-content: center; width: 20px; align-self: stretch; color: var(--sv-ink-tertiary); touch-action: none; }
.rail-edit-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-edit-eye { flex: none; width: 28px; height: 28px; min-height: 28px; padding: 0; color: var(--sv-ink-tertiary); }
.rail-edit-eye:hover { color: var(--sv-ink); }
/* Hidden from the sidebar: still here, dimmed, with eye-off, so it can come back. */
.rail-edit-row[data-off] > :not(.rail-edit-eye) { opacity: 0.45; }
.rail-edit-row[data-off] .rail-edit-eye { color: var(--sv-ink-secondary); }
/* The row a pointer drags: lifted above the rest, which give way as it passes. */
.rail-edit-list.dragging .rail-edit-row { cursor: grabbing; }
.rail-edit-list.dragging .rail-edit-row:not(.dragging):hover { background: var(--ws-sidebar); }
.rail-edit-row.dragging { z-index: 1; background: var(--sv-surface-raised); box-shadow: var(--pop-shadow); }

.rail-edit-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--sv-space-1); padding: 0 2px 0 var(--sv-space-1); }
.rail-edit-reset { margin-right: auto; color: var(--sv-ink-tertiary); font-weight: 400; }
.rail-edit-reset[hidden] { display: none; }
.rail-edit-done.primary { min-height: 28px; padding: 0 var(--sv-space-3); }
.rail-edit .sr-only, .look-field .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Touch: the way in always shows, and every target is 44px. */
@media (hover: none), (max-width: 760px) {
  .rail-edit-open { opacity: 1; }
}
@media (hover: none) and (pointer: coarse), (max-width: 760px) {
  .rail-edit-open { top: 0; right: 0; width: 44px; height: 44px; }
  .rail-nav .rail-search-wrap .rail-search { padding-right: 44px; }
  .rail-edit-row { min-height: 44px; cursor: default; }
  .rail-edit-grip { width: 44px; margin-left: calc(-1 * var(--sv-space-1)); }
  .rail-edit-eye { width: 44px; height: 44px; }
  .rail-edit-bar button, .rail-edit-bar .rail-edit-done.primary { min-height: 44px; }
}