/* owner-picker.js — the admin's "Change owner" dialog. Its own sheet because
   two pages raise it (home.html, index.html) and neither page's sheet is
   one the other loads. The backdrop and box match home.css's deleteconfirm,
   so the dialogs on a page read as one family. */
.ownerpicker {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16, 20, 26, 0.32);
}
.ownerpicker__box {
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
  max-height: min(560px, 100%);
  padding: 20px;
  background: var(--bg-panel);
  border-radius: var(--radius-thumb);
  box-shadow: 0 8px 24px rgba(16, 20, 26, 0.20);
}
.ownerpicker__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ownerpicker__body {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
}

.ownerpicker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
}
.ownerpicker__search:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
.ownerpicker__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  outline: none;
}

/* Scrolls on its own so the search field and the buttons stay put however
   many people match. */
.ownerpicker__list {
  flex: 1 1 auto;
  min-height: 120px;
  margin: 8px -8px 0;
  overflow-y: auto;
}
.ownerpicker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: var(--cursor-pointer);
}
.ownerpicker__row:hover:not(:disabled) { background: var(--bg-hover); }
.ownerpicker__row[aria-selected="true"] { background: var(--bg-accent-soft); }
.ownerpicker__row:disabled { cursor: var(--cursor-default); }
.ownerpicker__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* avatarImg (comments.js) hands back a .commentavatar, sized in
   comments.css — which home.html does not load — so the circle is filled
   here rather than relying on it. */
.ownerpicker__avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
}
.ownerpicker__avatar .commentavatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.ownerpicker__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ownerpicker__name,
.ownerpicker__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ownerpicker__name { font-size: 13px; font-weight: 500; }
.ownerpicker__email { font-size: 12px; color: var(--ink-soft); }
/* The pinned row is set apart from the search results beneath it. */
.ownerpicker__row--pinned {
  position: relative;
  margin-bottom: 9px;
}
.ownerpicker__row--pinned::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -5px;
  border-bottom: 1px solid var(--line);
}

/* One-click rows (rowAction): the button stays laid out so a row never
   changes height, and only shows on hover or keyboard focus. */
.ownerpicker__row--action:hover:not(.is-disabled) { background: var(--bg-hover); }
.ownerpicker__row--action.is-disabled { cursor: var(--cursor-default); }
.ownerpicker__pick {
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: var(--cursor-pointer);
  visibility: hidden;
}
.ownerpicker__row--action:hover .ownerpicker__pick,
.ownerpicker__pick:focus-visible { visibility: visible; }
.ownerpicker__pick:hover { filter: brightness(1.06); }
.ownerpicker__pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ownerpicker__tag { flex: none; font-size: 12px; color: var(--ink-soft); }
.ownerpicker__check { flex: none; display: inline-flex; color: var(--accent); }
.ownerpicker__empty {
  margin: 16px 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.ownerpicker__error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--danger);
}

.ownerpicker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.ownerpicker__cancel,
.ownerpicker__confirm {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  cursor: var(--cursor-pointer);
}
.ownerpicker__cancel { background: transparent; color: var(--ink); }
.ownerpicker__cancel:hover:not(:disabled) { background: var(--bg-hover); }
.ownerpicker__confirm { background: var(--accent); color: #fff; font-weight: 500; }
.ownerpicker__confirm:hover:not(:disabled) { filter: brightness(1.06); }
.ownerpicker__confirm:disabled,
.ownerpicker__cancel:disabled { opacity: 0.5; cursor: var(--cursor-default); }