/* GUI editors: the painted chest window, inspectors, fields and completion. */

.animus-gui-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.animus-views.is-split .animus-gui-editor {
  grid-template-columns: minmax(0, 1fr);
}

.animus-gui-stage,
.animus-gui-inspector,
.animus-gui-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
}

/* The preview column is the focal point: the chest window grows to fill
   it, up to a slot size where the pixel art still reads crisply. */
.animus-gui-stage,
.animus-gui-preview {
  container-type: inline-size;
  align-content: start;
}

.animus-gui-inspector {
  max-height: calc(100vh - 9rem);
  overflow: auto;
}

.animus-gui-toolbar,
.animus-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

/* The chest window, as the client paints it. */

.animus-chest-screen {
  --animus-slot: clamp(2rem, calc((100cqi - 2.5rem) / 9), 3.5rem);
  display: grid;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  padding: 0.75rem 0.875rem 0.875rem;
  border: 3px solid #373737;
  background: #c6c6c6;
  color: #404040;
  overflow-x: auto;
}

.animus-chest-title {
  font-family: "Minecraft", var(--font-mono);
  font-size: 1rem;
  line-height: 1.2;
  white-space: pre;
  min-height: 1.2em;
}

.animus-chest {
  display: grid;
  gap: 0;
  width: max-content;
}

/* While a brush is chosen a drag paints instead of scrolling. */
.animus-chest.is-painting {
  touch-action: none;
}

.animus-gui-component-list [aria-pressed="true"] {
  background: var(--secondary, var(--animus-panel));
  color: var(--foreground, inherit);
  border-color: var(--primary, #ff5fa8);
}

.animus-chest-slot {
  position: relative;
  display: block;
  width: var(--animus-slot);
  height: var(--animus-slot);
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 2px solid #373737;
  background: #8b8b8b;
  font: inherit;
  color: inherit;
  cursor: default;
}

button.animus-chest-slot {
  cursor: pointer;
}

button.animus-chest-slot:hover,
button.animus-chest-slot:focus-visible {
  background: #a5a5a5;
}

button.animus-chest-slot:focus-visible {
  z-index: 2;
  outline: 3px solid var(--ring, #ffb3d6);
  outline-offset: 0;
}

/* The one pink in the window: the slot being edited. */
.animus-chest-slot.is-selected {
  border-color: #0d0d0f;
  outline: 2px solid var(--primary, #ff5fa8);
  outline-offset: -4px;
}

.animus-chest-slot.is-hidden .animus-chest-face {
  opacity: 0.35;
}

.animus-chest-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.animus-chest-face img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.animus-chest-missing {
  padding: 1px;
  font-size: 0.5rem;
  line-height: 1;
  text-align: center;
  overflow-wrap: anywhere;
  color: #2a2a2a;
}

.animus-chest-count {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-family: "Minecraft", var(--font-mono);
  font-size: 0.875rem;
  color: #fff;
  text-shadow: 1px 1px #3f3f3f;
  pointer-events: none;
}

.animus-chest-key {
  position: absolute;
  left: 2px;
  top: 1px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1;
  color: #1d1d1d;
  background: rgba(255, 255, 255, 0.65);
  padding: 0 2px;
  pointer-events: none;
}

.animus-chest-key.is-list {
  background: rgba(255, 236, 130, 0.85);
}

.animus-chest-tooltip {
  position: absolute;
  left: calc(100% + 4px);
  top: -0.25rem;
  z-index: 20;
  display: none;
  min-width: max-content;
  max-width: 22rem;
  padding: 0.3rem 0.45rem;
  border: 2px solid #25025a;
  background: rgba(16, 0, 16, 0.94);
  font-family: "Minecraft", var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: start;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.animus-chest-slot:hover .animus-chest-tooltip,
.animus-chest-slot:focus-visible .animus-chest-tooltip,
.animus-chest-slot.is-selected .animus-chest-tooltip.is-pinned {
  display: grid;
}

.animus-chest-tooltip-lore {
  font-style: italic;
}

/* A native shop: the villager trading screen's offer column. */

.animus-merchant-screen {
  --animus-slot: 2.25rem;
  display: grid;
  gap: 0.5rem;
  width: max-content;
  max-width: 100%;
  padding: 0.75rem 0.875rem 0.875rem;
  border: 3px solid #373737;
  background: #c6c6c6;
  color: #404040;
  overflow-x: auto;
}

.animus-merchant-offers {
  display: grid;
  grid-template-columns: max-content max-content 1.5rem max-content;
  gap: 2px 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animus-merchant-offer {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 0.25rem 0.375rem;
  border: 2px solid #373737;
  background: #a5a5a5;
}

.animus-merchant-goods {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  min-width: var(--animus-slot);
}

.animus-merchant-arrow {
  font-family: "Minecraft", var(--font-mono);
  font-size: 1.125rem;
  text-align: center;
  color: #1d1d1d;
}

.animus-merchant-price,
.animus-merchant-empty {
  margin: 0;
  font-family: "Minecraft", var(--font-mono);
  font-size: 0.8125rem;
  color: #1d1d1d;
  white-space: nowrap;
}

.animus-mc-styled {
  font-family: "Minecraft", var(--font-mono);
  white-space: pre-wrap;
}

/* Inspector fields. */

.animus-gui-fields,
.animus-gui-component,
.animus-gui-icon,
.animus-gui-actions,
.animus-gui-lines {
  display: grid;
  /* One column that never widens past the panel for a long line inside. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
}

/* One field layout everywhere: the label, then the control with its short
   hint under it. The control moves under the label whenever its column
   would drop below 12rem, so a narrow panel or a deep nesting level never
   squeezes it. The label is the first child, alone or wrapped with its tip. */
.animus-gui-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: flex-start;
}

.animus-gui-row > :first-child {
  flex: 0 0 8.5rem;
  min-width: 0;
}

.animus-gui-row > .animus-gui-control {
  flex: 1 1 12rem;
}

.animus-gui-label {
  padding-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--animus-muted);
  overflow-wrap: anywhere;
}

.animus-gui-control {
  display: grid;
  /* A select's longest option or a long value never widens the column. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  min-width: 0;
}

.animus-gui-help {
  font-size: 0.75rem;
  color: var(--animus-muted);
}

.animus-gui-problem {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.animus-gui-problem.is-error {
  color: var(--animus-error);
}

.animus-gui-problem.is-warning,
.animus-gui-problem.is-info {
  color: var(--animus-warning);
}

.animus-gui-text {
  position: relative;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 16rem;
}

.animus-gui-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--animus-border);
  background: var(--background, #0d0d0f);
  color: var(--foreground, inherit);
  font: inherit;
  font-size: 0.875rem;
}

.animus-gui-input::placeholder {
  color: var(--animus-muted);
  opacity: 1;
}

.animus-gui-input:hover {
  border-color: var(--animus-muted);
}

.animus-gui-input.is-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.animus-gui-input.is-number {
  /* As wide as the widest value the field allows, plus padding and the
     step arrows; --animus-digits comes from the field's range. The 100%
     cap lets a narrow cell shrink it instead of being pushed open. */
  width: min(100%, calc(var(--animus-digits, 8) * 1ch + 2.75rem));
  flex: 0 0 auto;
}

.animus-gui-input:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: 1px;
}

.animus-gui-input.is-invalid {
  border-color: var(--animus-error);
}

.animus-gui-sample {
  padding: 0.2rem 0.4rem;
  background: #1f1f1f;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.animus-gui-line,
.animus-gui-goods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
  min-width: 0;
}

.animus-gui-xyz .animus-gui-input.is-number {
  width: 5.5rem;
}

.animus-gui-section {
  border: 1px solid var(--animus-border);
  padding: 0.375rem 0.625rem;
  min-width: 0;
}

.animus-gui-section > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.25rem 0;
}

.animus-gui-section > summary .animus-count {
  margin-inline-start: 0.5rem;
  font-weight: 400;
  color: var(--animus-muted);
}

.animus-gui-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.375rem 0 0.25rem;
  min-width: 0;
}

.animus-gui-action {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
  min-width: 0;
}

.animus-gui-action.is-refused {
  border-color: var(--animus-error);
}

.animus-gui-action-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.animus-gui-action-index {
  font-family: var(--font-mono);
  color: var(--animus-muted);
  min-width: 1.25rem;
}

.animus-gui-refused {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--animus-error);
  overflow-wrap: anywhere;
}

.animus-gui-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--animus-warning);
}

.animus-gui-component-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.animus-gui-stage-3d {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-new {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.animus-rename {
  max-width: 32rem;
}

@media (max-width: 1100px) {
  .animus-gui-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .animus-gui-inspector {
    max-height: none;
  }
}

@media (max-width: 520px) {
  .animus-gui-row > :first-child {
    flex-basis: 100%;
  }

  /* Thumb-sized targets: a 9-wide window scrolls inside its frame rather
     than shrinking slots below 44 px. */
  .animus-chest-screen {
    --animus-slot: 2.75rem;
  }

  .animus-gui-input {
    min-height: 2.75rem;
  }

  .animus-gui-label {
    padding-top: 0;
  }

  .animus-chest-tooltip {
    left: 0;
    top: calc(100% + 2px);
  }
}

/* Read by assistive technology, not shown. */
.animus-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;
}

/* Section tabs share the view tabs' frame, tab and selected rule
   (`.animus-tabs`, `.animus-tab`). */
.animus-gui-tabs .animus-tab:disabled {
  opacity: 0.5;
}

/* Menu component pick zones over the stage: invisible until hovered, and
   a pink ring on the selected one. */
.animus-gui-pick {
  position: absolute;
  min-width: 16px;
  min-height: 16px;
  margin: -4px;
  padding: 4px;
  border: 1px dashed transparent;
  box-sizing: content-box;
  transition: border-color 120ms ease-out;
}

.animus-gui-pick[data-gizmo] {
  pointer-events: all;
  cursor: pointer;
}

.animus-gui-pick:hover {
  border-color: rgba(255, 255, 255, 0.55);
}

.animus-gui-pick.is-selected {
  border: 2px solid var(--primary, #ff5fa8);
}

@media (prefers-reduced-motion: reduce) {
  .animus-gui-pick {
    transition: none;
  }
}

/* Hologram rows and the text animation preview. */
.animus-gui-holo-row {
  display: grid;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
  min-width: 0;
}

.animus-gui-holo-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.375rem 0.75rem;
}

.animus-gui-fix {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--animus-error);
}

.animus-gui-anim-preview {
  display: grid;
  gap: 0.5rem;
}

.animus-gui-anim-stage {
  display: grid;
  place-items: center;
  min-height: 8rem;
  padding: 1rem;
  background: #0d0d0f;
  color: #ffffff;
  font-size: 1.25rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.animus-gui-editor.is-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 56rem;
}

/* Item picker: the item's inventory icon beside its id field. */
.animus-item-picker {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: 1 1 12rem;
}

.animus-item-picker-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--animus-border);
  background: color-mix(in srgb, var(--animus-border) 60%, transparent);
  color: var(--animus-muted);
}

.animus-item-picker-img {
  width: 2.25rem;
  height: 2.25rem;
  image-rendering: pixelated;
}

.animus-item-picker-note {
  grid-column: 2;
}

.animus-item-picker.is-bare {
  grid-template-columns: minmax(0, 1fr);
}

.animus-item-picker.is-bare > .animus-item-picker-note {
  grid-column: 1;
}

/* Typed forms inside a GUI row: preset values and inventory args. */
.animus-gui-preset-values,
.animus-gui-args {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}