/* NPC browser, typed NPC editors, route editor and dialogue view.
   Cards and rows get a full hairline border, never a one-sided stripe. */

/* Browser */

.animus-npc-browser {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  container-type: inline-size;
}

.animus-npc-browser-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.animus-npc-browser-head h2 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.animus-npc-search {
  display: flex;
  flex: 1 1 18rem;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.animus-npc-search > .animus-gui-text {
  flex: 1 1 auto;
  min-width: 0;
}

.animus-npc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.animus-npc-filter-select {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--animus-muted);
}

.animus-npc-browser-body {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

/* The folder tree moves above the list once the panel, not the window, is
   too narrow for both side by side. */
@container (max-width: 40rem) {
  .animus-npc-browser-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.animus-npc-browser-main {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.animus-npc-folders {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-npc-folders h3 {
  margin: 0;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--animus-muted);
}

.animus-npc-tree,
.animus-npc-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.125rem;
}

.animus-npc-tree ul {
  padding-left: 0.75rem;
}

.animus-npc-tree-item {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

/* Nesting reads from the indent; capped so 8 levels stay inside the sidebar. */
.animus-npc-tree-item {
  justify-content: flex-start;
  padding-left: calc(0.25rem + min(var(--animus-tree-level, 0), 8) * 0.625rem);
}

.animus-npc-tree-toggle {
  flex: none;
  width: 1rem;
  text-align: center;
  color: var(--animus-muted);
}

.animus-npc-tree-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.animus-npc-folder-panel,
.animus-npc-folder-actions,
.animus-npc-folder-form {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-npc-folder-where {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.animus-npc-folder-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.animus-npc-folder-new-npc {
  color: inherit;
  font-size: 0.8125rem;
  text-underline-offset: 0.2em;
}

.animus-npc-folder-new-npc:hover {
  color: var(--primary, #ff5fa8);
}

.animus-npc-folder-new-npc:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: 2px;
}

.animus-npc-folder-label {
  font-size: 0.8125rem;
  color: var(--animus-muted);
}

.animus-npc-folder-form {
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
}

.animus-npc-folder-actions .animus-error {
  margin: 0;
  overflow-wrap: anywhere;
}

.animus-npc-tree-item:hover {
  border-color: var(--animus-border);
}

.animus-npc-tree-item:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: -2px;
}

.animus-npc-tree-item.is-selected {
  border-color: var(--animus-border);
  background: color-mix(in srgb, var(--primary, #ff5fa8) 18%, transparent);
}

.animus-npc-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.animus-npc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  max-width: 100%;
  padding: 0.0625rem 0.45rem;
  border: 1px solid var(--animus-border);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.animus-npc-tag .arcane-button,
.animus-npc-tag button {
  min-height: 0;
  padding: 0;
}

.animus-tag.is-muted {
  opacity: 0.75;
}

/* Bulk bar */

.animus-npc-bulk {
  display: grid;
  gap: 0.5rem;
  padding: 0.625rem;
  border: 1px solid var(--animus-border);
  background: var(--animus-panel);
  min-width: 0;
}

.animus-npc-bulk-head,
.animus-npc-bulk-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.animus-npc-bulk-group > .animus-gui-text {
  flex: 0 1 10rem;
  min-width: 6rem;
}

.animus-npc-bulk-label {
  min-width: 4.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--animus-muted);
}

/* List */

.animus-npc-list {
  display: grid;
  border: 1px solid var(--animus-border);
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
}

/* The list's own width decides its columns: beside the folder tree and the
   sidebar it is narrower than the window suggests. */
@container (max-width: 40rem) {
  .animus-npc-row {
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .animus-npc-row > .animus-npc-col-type,
  .animus-npc-row > .animus-npc-col-world,
  .animus-npc-row.is-head > span:last-child {
    display: none;
  }

  .animus-npc-row > .animus-npc-badges {
    grid-column: 2;
  }
}

.animus-npc-row {
  display: grid;
  grid-template-columns: 1.75rem minmax(9rem, 1.4fr) minmax(5rem, 0.7fr) minmax(4rem, 0.6fr) minmax(0, 1.6fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.4rem 0.625rem;
  border-top: 1px solid var(--animus-border);
  min-width: 0;
}

.animus-npc-row:first-child {
  border-top: 0;
}

.animus-npc-row.is-head {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--animus-muted);
}

.animus-npc-row.is-selected {
  background: color-mix(in srgb, var(--primary, #ff5fa8) 12%, transparent);
}

.animus-npc-check {
  display: grid;
  place-items: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  cursor: pointer;
}

.animus-npc-row input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

.animus-npc-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: 1px;
}

.animus-npc-name {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.animus-npc-name-text {
  display: grid;
  min-width: 0;
}

.animus-npc-name a {
  color: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.animus-npc-name code {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.animus-npc-col-type,
.animus-npc-col-world {
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.animus-npc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
}

.animus-npc-badges .animus-badge {
  grid-column: auto;
  grid-row: auto;
}

.animus-npc-empty {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  padding: 1rem;
}

.animus-npc-empty p {
  margin: 0;
  color: var(--animus-muted);
}

.animus-npc-empty-action {
  color: var(--primary, #ff5fa8);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.animus-npc-empty-action:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: 2px;
}

/* NPC Visual: inspector beside the stage */

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

.animus-npc-visual > .animus-npc-preview {
  position: sticky;
  top: 0.75rem;
}

/* Equipment */

.animus-equipment {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-equipment-slot {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
  min-width: 0;
}

.animus-equipment-slot.is-empty {
  opacity: 0.85;
}

.animus-equipment-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-equipment-img {
  width: 2.25rem;
  height: 2.25rem;
  image-rendering: pixelated;
}

.animus-equipment-fields {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.animus-equipment-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}

/* Skins */

.animus-skin-picker {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-skin-new,
.animus-body-type {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.animus-skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.375rem;
}

.animus-skin-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem;
  border: 1px solid var(--animus-border);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.animus-skin-card.is-selected {
  border-color: color-mix(in srgb, var(--primary, #ff5fa8) 70%, var(--animus-border));
  background: color-mix(in srgb, var(--primary, #ff5fa8) 14%, transparent);
}

.animus-skin-face {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: 800% 800%;
  background-position: 14.2857% 14.2857%;
  image-rendering: pixelated;
}

.animus-skin-face.is-blank {
  border: 1px solid var(--animus-border);
  background: color-mix(in srgb, var(--animus-border) 45%, transparent);
  color: var(--animus-muted);
  font-size: 0.75rem;
}

.animus-skin-face.is-small {
  width: 1.75rem;
  height: 1.75rem;
}

.animus-skin-face.is-large {
  width: 6rem;
  height: 6rem;
}

.animus-skin-card-text {
  display: grid;
  min-width: 0;
  font-size: 0.75rem;
}

.animus-skin-card-text code {
  overflow-wrap: anywhere;
}

/* Tags in the inspector */

.animus-tag-editor {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

/* Route editor */

.animus-route-editor {
  display: grid;
  gap: 0.625rem;
  min-width: 0;
}

.animus-route-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  min-width: 0;
}

.animus-route-grid-wrap {
  display: grid;
  gap: 0.25rem;
  max-width: 34rem;
}

.animus-route-grid {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--animus-border);
  background: var(--animus-panel);
  touch-action: none;
  user-select: none;
}

.animus-route-grid.is-adding {
  cursor: crosshair;
}

.animus-route-gridline {
  stroke: var(--animus-border);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.animus-route-gridline.is-axis {
  stroke: var(--animus-muted);
}

/* The route grid is grey chrome; pink marks only the picked point and the
   keyboard focus. */
.animus-route-link {
  stroke: var(--animus-muted);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.animus-route-link.is-mesh {
  stroke-width: 1px;
  stroke-dasharray: 4 3;
}

.animus-route-wander {
  fill: color-mix(in srgb, var(--animus-muted) 10%, transparent);
  stroke: var(--animus-muted);
  stroke-width: 1px;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.animus-route-npc {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.animus-route-dot {
  fill: #d9d4d8;
  stroke: #0d0d0f;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  cursor: grab;
}

html.light .animus-route-dot {
  fill: #ffffff;
  stroke: #4a444a;
}

.animus-route-node.is-guide .animus-route-dot {
  fill: var(--animus-muted);
}

.animus-route-node.is-selected .animus-route-dot {
  fill: var(--primary, #ff5fa8);
  stroke-width: 2px;
}

.animus-route-dot:focus {
  outline: none;
}

.animus-route-dot:focus-visible {
  stroke: var(--ring, #ff5fa8);
  stroke-width: 4px;
}

.animus-route-grid.is-readonly .animus-route-dot {
  cursor: pointer;
}

.animus-route-label {
  fill: #0d0d0f;
  font-family: var(--font-mono);
  font-weight: 600;
  pointer-events: none;
}

.animus-route-label.is-npc {
  fill: currentColor;
}

.animus-route-node.is-selected .animus-route-label {
  fill: #0d0d0f;
}

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

.animus-route-problems {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animus-route-picked {
  display: grid;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
}

.animus-route-step {
  display: grid;
  gap: 0.375rem;
}

.animus-route-coords {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.375rem;
}

.animus-route-coords label {
  display: grid;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--animus-muted);
}

.animus-route-list {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 16rem;
  overflow: auto;
  padding: 2px;
}

.animus-route-list-item {
  display: grid;
  /* The point keeps its natural width; the wait note takes the rest and wraps. */
  grid-template-columns: 2rem 3.5rem auto minmax(0, 1fr);
  gap: 0.5rem;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.animus-route-list li.is-selected .animus-route-list-item,
.animus-route-list-item:hover {
  border-color: var(--animus-border);
}

.animus-route-list li.is-selected .animus-route-list-item {
  background: color-mix(in srgb, var(--primary, #ff5fa8) 14%, transparent);
}

.animus-route-list-item:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: -2px;
}

.animus-route-add {
  display: grid;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
}

/* A wait: one count, or Min and Max with Range pressed. The fields share a
   row with the toggle and wrap under it on phones. */
.animus-route-wait {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.375rem;
  min-width: 0;
}

.animus-route-wait > .animus-gui-input,
.animus-route-wait-end {
  flex: 1 1 6rem;
  min-width: 0;
}

.animus-route-wait-end {
  display: grid;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--animus-muted);
}

/* Junctions: a point's next points, each a target and a weight. */
.animus-route-junctions {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.animus-route-junctions-head {
  display: grid;
  gap: 0.125rem;
}

.animus-route-junction {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.375rem;
  min-width: 0;
}

.animus-route-junction > label {
  display: grid;
  flex: 1 1 7rem;
  gap: 0.125rem;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--animus-muted);
}

.animus-route-junction > .animus-gui-problem {
  flex-basis: 100%;
}

/* Where a junction can lead: grey and dashed, apart from the solid walk. */
.animus-route-link.is-junction {
  stroke-width: 1.5px;
  stroke-dasharray: 2 3;
}

/* NPC inspector parts */

.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;
}

.animus-npc-section > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.animus-npc-section > summary:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: 2px;
}

.animus-npc-section-summary {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--animus-muted);
  overflow-wrap: anywhere;
  min-width: 0;
}

.animus-npc-section[open] > summary .animus-npc-section-summary {
  display: none;
}

.animus-npc-subhead {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--animus-border);
}

.animus-gui-section-body > .animus-npc-subhead:first-child,
.animus-npc-behaviors > .animus-npc-subhead:first-child,
.animus-npc-module > .animus-npc-subhead:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.animus-npc-subhead h4 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.animus-npc-subhead p {
  margin: 0;
}

.animus-npc-module,
.animus-npc-behaviors,
.animus-npc-route {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-hologram-editor,
.animus-armor-stand,
.animus-npc-inventory {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-hologram-preview {
  display: grid;
  justify-items: center;
  gap: 0.125rem;
  padding: 0.625rem;
  background: #0d0d0f;
  color: #f3f0f2;
  font-family: "Minecraft", var(--font-mono);
  text-align: center;
  overflow-wrap: anywhere;
}

.animus-hologram-preview-line {
  padding: 0 0.375rem;
  background: rgb(0 0 0 / 0.35);
}

.animus-armor-stand-parts {
  display: grid;
  gap: 0.375rem;
}

.animus-armor-stand-part {
  display: grid;
  grid-template-columns: 5.5rem repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
  align-items: end;
}

.animus-armor-stand-part label {
  display: grid;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--animus-muted);
}

.animus-armor-stand-part .animus-gui-input.is-number {
  width: 100%;
  box-sizing: border-box;
}

.animus-armor-stand-name {
  align-self: center;
  font-size: 0.8125rem;
}

.animus-armor-stand-part > .animus-gui-problem {
  grid-column: 1 / -1;
}

.animus-npc-inventory-slot {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 5rem auto;
  gap: 0.375rem;
  align-items: center;
}

.animus-npc-inventory-slot > .animus-gui-problem {
  grid-column: 1 / -1;
}

.animus-npc-inventory-number {
  text-align: center;
  color: var(--animus-muted);
}

/* Skin and pack documents */

.animus-skin-summary,
.animus-pack-editor {
  display: grid;
  gap: 0.75rem;
}

.animus-skin-summary-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: start;
}

.animus-skin-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 0.75rem;
  margin: 0;
  min-width: 0;
  flex: 1 1 16rem;
}

.animus-skin-facts dt {
  color: var(--animus-muted);
  font-size: 0.8125rem;
}

.animus-skin-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.animus-skin-wearers {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animus-pack-module {
  display: grid;
  gap: 0.5rem;
}

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

  .animus-npc-visual > .animus-npc-preview {
    position: static;
    order: -1;
  }
}

@media (max-width: 760px) {
  .animus-route-grid-wrap {
    max-width: none;
  }
}

/* Phone widths and touch screens: 44 px tap targets. */
@media (max-width: 520px), (pointer: coarse) {
  .animus-npc-tree-item,
  .animus-route-list-item {
    min-height: 44px;
    align-items: center;
  }

  .animus-npc-check {
    min-width: 44px;
    min-height: 44px;
  }

  .animus-npc-folder-actions button,
  .animus-npc-folder-actions .animus-select-trigger,
  .animus-npc-folder-actions input,
  .animus-npc-bulk button,
  .animus-npc-bulk .animus-select-trigger,
  .animus-npc-bulk input:not([type="checkbox"]) {
    min-height: 44px;
  }

  .animus-npc-folder-new-npc {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .animus-npc-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .animus-npc-row input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  .animus-armor-stand-part {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .animus-armor-stand-name {
    grid-column: 1 / -1;
  }

  .animus-npc-inventory-slot {
    grid-template-columns: 2rem minmax(0, 1fr) 4.5rem;
  }
}

/* Skins are named by a 64-character hash: let the document header wrap a
   long unbroken title instead of widening the page. */
.animus-document-header > div:first-child {
  min-width: 0;
  max-width: 100%;
}

.animus-document-header h2,
.animus-document-header > div:first-child > code {
  overflow-wrap: anywhere;
}

/* Attributes: the range and vanilla default sit beside each value. */
.animus-npc-attributes {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
}

.animus-npc-attribute .animus-gui-input.is-number {
  width: 7rem;
}

.animus-npc-attribute-range {
  color: var(--animus-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}