/*
 * The element ships its own layout; the tokens and the control primitives (.cg-control,
 * .cg-button, .cg-segmented) come from /assets/styles/centgenie.css, which every host that
 * mounts this element already loads.
 */

centgenie-category-editor {
  display: block;
  width: 100%;
}

centgenie-category-editor .editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

centgenie-category-editor .preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0 0.5rem;
}

centgenie-category-editor .preview-emoji {
  font-size: clamp(2.5rem, 16vw, 4rem);
  line-height: 1;
}

centgenie-category-editor .preview-name {
  font-size: 1.3rem;
}

centgenie-category-editor .preview-name[muted='true'] {
  color: var(--cg-muted);
}

centgenie-category-editor .fields {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.75rem;
}

centgenie-category-editor .icon-field .cg-control {
  text-align: center;
  font-size: 1.3rem;
}

centgenie-category-editor .hint {
  margin: 0;
  color: var(--cg-muted);
  text-align: center;
  font-size: 0.8rem;
}

centgenie-category-editor .suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

centgenie-category-editor .suggestions button {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cg-line);
  border-radius: 0.85rem;
  background: var(--cg-raise);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--cg-duration) var(--cg-ease),
    transform var(--cg-duration) var(--cg-ease);
}

centgenie-category-editor .suggestions button:hover {
  border-color: color-mix(in srgb, var(--cg-fg), transparent 60%);
}

centgenie-category-editor .suggestions button:active {
  transform: scale(0.93);
}

centgenie-category-editor .suggestions button[active='true'] {
  border-color: var(--cg-fg);
}

centgenie-category-editor .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

/*
 * Compact is the modal dressing: the editor is being shown over a screen the user has not left,
 * so it drops the poster-sized preview and the suggestion wall to stay a glance tall.
 */
centgenie-category-editor[compact] .preview {
  padding: 0.25rem 0 0;
}

centgenie-category-editor[compact] .preview-emoji {
  font-size: 2.5rem;
}

/*
 * Exactly two rows of tiles, so the list scrolls from a clean edge instead of slicing a row of
 * emoji in half — a half-visible row reads as a rendering fault rather than as "more below".
 */
centgenie-category-editor[compact] .suggestions {
  max-height: calc(2 * 2.75rem + 0.35rem);
  overflow-y: auto;
}