/* The avatar and companion editors of the settings' "Perfil" pane (theme/hud-profile.js), in the dialog's own look: the
   tokens of moment-hud.css and its classes (.kmh-set-section, .kmh-set-group, .kmh-set-button), the segmented control's
   colours for the tabs. Sprites are CSS backgrounds scaled by a whole number of device pixels (--kp-t thumbnails,
   --kp-h preview, --kp-v turns) and drawn pixelated; one custom property repaints every layer stack. No blur. */
.kp-slot { display: contents; }
.kp-slot > .kmh-set-section:first-child { margin-top: 14px; }
/* a flex item of the scrolling pane: it keeps its height (overflow would otherwise let it shrink to nothing) */
.kp-card { flex: none; overflow: hidden; }

/* the parts, as the dialog's segmented control */
.kp-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 12px 12px 0; padding: 3px; border-radius: 10px; background: rgba(3, 5, 26, .45); }
.kp-tabs:empty { display: none; }
.kp-tab {
  flex: 1 1 auto; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; white-space: nowrap;
  font: 600 13px/1.3 Urbanist, sans-serif !important; color: var(--kmh-fg-2) !important;
  transition: color 160ms var(--kmh-out-expo), background-color 160ms var(--kmh-out-expo);
}
.kp-tab:hover { color: var(--kmh-fg) !important; }
.kp-tab[aria-selected="true"] { background: var(--kmh-hover); color: var(--kmh-accent) !important; box-shadow: inset 0 0 0 1px rgba(83, 255, 200, .25); }
/* the ready-made characters are another way in, not a part: a hairline sets them apart */
.kp-tab-ready { position: relative; margin-left: 9px; }
.kp-tab-ready::before { content: ''; position: absolute; left: -6px; top: 6px; bottom: 6px; width: 1px; background: var(--kmh-border); }

.kp-body { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 12px; padding: 12px; }
.kp-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 196px; padding: 12px 8px;
  border-radius: var(--k-radius-inner, 8px); background: rgba(3, 5, 26, .45);
}
.kp-name { font: 600 13px/1.3 Urbanist, sans-serif; color: var(--kmh-fg); text-align: center; }

/* a sheet's standing frame (column 1) on the row --kp-row: down 0, left 1, right 2, up 3 */
.kp-sprite {
  --kp-s: var(--kp-t, 2);
  display: block; flex: none; width: calc(32px * var(--kp-s)); height: calc(32px * var(--kp-s));
  background-repeat: no-repeat; background-size: calc(96px * var(--kp-s)) calc(128px * var(--kp-s));
  background-position: calc(-32px * var(--kp-s)) calc(-32px * var(--kp-s) * var(--kp-row, 0));
  image-rendering: pixelated;
}
.kp-hero { --kp-s: var(--kp-h, 4); background-image: var(--kp-layers, none); }
.kp-views { display: flex; gap: 2px; }
.kp-view { display: grid; place-items: center; padding: 2px; border: 1px solid transparent; border-radius: 6px; background: transparent; }
.kp-view:hover { background: rgba(255, 255, 255, .08); }
.kp-view[aria-pressed="true"] { border-color: rgba(83, 255, 200, .5); background: rgba(83, 255, 200, .08); }
.kp-view .kp-sprite { --kp-s: var(--kp-v, 1); background-image: var(--kp-layers, none); }

/* the options: a list that scrolls on its own, a sticky heading per section */
.kp-scroll { height: 292px; overflow: auto; padding: 0 6px 8px 6px; overscroll-behavior: contain; scrollbar-width: thin; }
.kp-companion .kp-scroll { height: auto; max-height: 220px; }
.kp-part[hidden], .kp-status[hidden] { display: none; }
.kp-lead { margin: 8px 2px 0; font: 500 13px/1.4 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kp-sec {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 2px 2px; background: var(--kmh-elevated);
  font: 600 12px/1.5 Urbanist, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--kmh-fg-2);
}
/* the 6 px above the first row hold its focus ring (3 px and 2 px away), which the sticky heading would cover */
.kp-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 2px; }
.kp-opt {
  display: grid; place-items: center; padding: 3px; border: 1px solid transparent; border-radius: var(--k-radius-inner, 8px);
  background: rgba(255, 255, 255, .04); transition: background-color 120ms var(--kmh-out-expo), border-color 120ms var(--kmh-out-expo);
}
.kp-opt:hover { background: rgba(255, 255, 255, .09); }
.kp-opt[aria-checked="true"] { border-color: var(--kmh-accent); background: rgba(83, 255, 200, .12); }
/* a piece on your avatar (the layers under and over it come from the script); a whole character or a pet alone */
.kp-opt .kp-sprite { background-image: var(--kp-img, none); }
.kp-part:not([data-kp-part="woka"]) .kp-opt .kp-sprite { background-image: var(--kp-over, none), var(--kp-img, none), var(--kp-under, none); }
.kp-none { width: calc(32px * var(--kp-t, 2) + 8px); height: calc(32px * var(--kp-t, 2) + 8px); color: var(--kmh-muted); }
.kp-none .kmh-ic { width: 26px; height: 26px; stroke-width: 1.6; }
.kp-status { margin: 0; padding: 16px 4px; font: 500 13px/1.5 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kp-card[data-state="loading"] .kp-stage { visibility: hidden; }
.kp-card[data-state="error"] :is(.kp-stage, .kp-foot) { display: none; }

/* the hint on the left, the actions on the right */
.kp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--kmh-border); }
.kp-hint { flex: 1 1 200px; min-width: 0; font: 500 13px/1.4 Urbanist, sans-serif; color: var(--kmh-fg-2); }
.kp-error { flex-basis: 100%; order: 9; font: 500 13px/1.4 Urbanist, sans-serif; color: #ff8a8a; }
.kp-error:empty { display: none; }
.kp-ghost {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--kmh-border-strong); border-radius: 10px;
  background: transparent; font: 600 13px/1.3 Urbanist, sans-serif !important; color: var(--kmh-fg) !important;
}
.kp-ghost:hover { background: var(--kmh-hover); }
.kp-ghost .kmh-ic { width: 16px; height: 16px; }
.kp-card button:disabled { opacity: .45; cursor: default; }
.kp-card button:disabled:hover { background: transparent; filter: none; }
.kp-card .kmh-set-button:disabled:hover { background: var(--kmh-accent); }
.kp-card[data-saving] .kp-scroll { pointer-events: none; opacity: .6; }

@media (max-width: 720px) { .kp-body { grid-template-columns: 1fr; } .kp-stage { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .kp-tab, .kp-opt { transition: none; } }
/* the pet's own name (window.__kPets), under the companion grid, saved with the same Salvar */
.kp-petname { gap: 16px; border-top: 1px solid var(--kmh-border); }
.kp-petname[hidden] { display: none; }
.kp-petname input {
  flex: 0 1 240px; min-width: 0; padding: 8px 12px; border: 1px solid var(--kmh-border-strong); border-radius: 10px;
  background: rgba(3, 5, 26, .45); font: 600 14px/1.3 Urbanist, sans-serif; color: var(--kmh-fg);
}