/* The New menu (M14): a palette near the top of the screen, like Railway's, then one step per kind. */

:root {
  --kind-repo: var(--ink);
  --kind-database: light-dark(#2a78d6, #6ea6ef);
  --kind-bucket: light-dark(#d4592a, #f08a5d);
  --kind-image: light-dark(#148a61, #3cc493);
  --kind-template: light-dark(#6250d6, #9c91ee);
}

.dialog--palette { width: min(640px, 100%); align-self: start; margin-top: max(8vh, 3.5rem); }
.dialog-backdrop:has(.dialog--palette) { align-items: flex-start; }

.palette__search {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.palette__search svg { width: 20px; height: 20px; flex: none; }
.palette__input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1.1rem; color: var(--ink);
}
.palette__input::placeholder { color: var(--muted); }
.palette__input::-webkit-search-cancel-button { display: none; }
.palette__kbd, .palette__foot kbd {
  font: 600 0.72rem/1 var(--mono);
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: var(--r-sm);
  color: var(--muted); background: var(--surface-sunken);
}
.palette__foot kbd { margin-right: 0.2rem; }

.palette__options { list-style: none; margin: 0; padding: 0.4rem; max-height: min(60vh, 460px); overflow-y: auto; }
.palette__option {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  cursor: pointer;
}
.palette__option[aria-selected="true"] { background: var(--surface-sunken); }
.palette__option[aria-selected="true"]::before {
  content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--ink);
}
.palette__text { display: grid; gap: 0.1rem; min-width: 0; }
.palette__text strong { font-weight: 700; }
.palette__text span { color: var(--muted); font-size: 0.87rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__go { color: var(--muted); opacity: 0; }
.palette__go svg { width: 16px; height: 16px; }
.palette__option[aria-selected="true"] .palette__go { opacity: 1; }

/* Each kind of thing has its colour, on a wash of itself. */
.palette__icon {
  display: inline-grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 9px;
  color: var(--kind, var(--ink));
  background: color-mix(in srgb, var(--kind, var(--ink)) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kind, var(--ink)) 22%, transparent);
}
.palette__icon svg { width: 18px; height: 18px; }
.palette__icon--repository { --kind: var(--kind-repo); }
.palette__icon--database { --kind: var(--kind-database); }
.palette__icon--bucket { --kind: var(--kind-bucket); }
.palette__icon--image { --kind: var(--kind-image); }
.palette__icon--template { --kind: var(--kind-template); }
.palette__icon--empty { --kind: var(--muted); background: transparent; box-shadow: none; }

.palette__empty { padding: 0.5rem 1.2rem 1rem; margin: 0; }
.palette__foot { margin: 0; padding: 0.65rem 1.1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }

.palette-step__head {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.palette-step__head h2 { margin: 0; font-size: 1.05rem; }
.palette-step__back { gap: 0.35rem; }
.palette-step__back svg { width: 16px; height: 16px; }
.palette__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
.palette__choices .catalog-item[aria-disabled="true"] { opacity: 0.55; cursor: default; }

@media (max-width: 600px) {
  .dialog--palette { margin-top: 0; }
  .palette__text span { white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  .dialog--palette { animation: palette-in 140ms ease-out; }
  @keyframes palette-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* Repository picker (shared/_repository_picker, combobox_controller.js) ------------------------- */
.combobox { position: relative; }
.combobox__field { position: relative; }
.combobox__field svg { position: absolute; left: 0.7rem; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.combobox__input { width: 100%; padding-left: 2.1rem; }
.combobox__list {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 4px);
  /* At least as wide as the field, wider in a narrow column so names aren't cut off. */
  width: max(100%, min(26rem, calc(100vw - 2rem)));
  margin: 0; padding: 0.3rem; list-style: none;
  max-height: 16rem; overflow-y: auto;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow);
}
.combobox__option {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.6rem; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 0.86rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combobox__option svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.combobox__option[aria-selected="true"] { background: var(--surface-sunken); box-shadow: inset 3px 0 0 var(--ink); }
.combobox__owner { color: var(--muted); }
.combobox__label { overflow: hidden; text-overflow: ellipsis; }
.combobox__name { color: var(--ink); font-weight: 600; }
.combobox__empty { padding: 0.5rem 0.6rem; color: var(--muted); font-size: 0.86rem; }