/* The shop editor: the offers board, the inline offer editor, both shop
   windows and the settings. Board rows borrow the trading screen's look,
   item icons on grey slot tiles, so a row reads as the trade it is. */

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

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

.animus-shop-board,
.animus-shop-side,
.animus-shop-preview,
.animus-shop-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
}

.animus-shop-preview {
  container-type: inline-size;
}

.animus-shop-board-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}

.animus-shop-panel-title {
  margin: 0;
  font-size: 1rem;
}

.animus-shop-board-groups {
  display: grid;
  gap: 1rem;
}

.animus-shop-group {
  display: grid;
  gap: 0.375rem;
}

.animus-shop-group-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--animus-muted);
}

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

.animus-shop-offer {
  display: grid;
  gap: 0.5rem;
  border: 1px solid var(--animus-border);
  background: var(--background);
}

.animus-shop-offer.is-open {
  border-color: var(--primary);
  padding-bottom: 0.75rem;
}

.animus-shop-offer.is-ticked {
  background: var(--secondary);
}

.animus-shop-offer.is-drop {
  outline: 2px dashed var(--primary);
  outline-offset: -2px;
}

.animus-shop-offer.is-dragging {
  opacity: 0.55;
}

.animus-shop-offer-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 0.25rem;
  align-items: center;
  padding-right: 0.25rem;
}

.animus-shop-grip {
  display: grid;
  place-items: center;
  width: 1.25rem;
  color: var(--animus-muted);
  cursor: grab;
}

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

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

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

.animus-shop-offer-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.125rem 0.75rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.animus-shop-offer-main:hover {
  background: var(--secondary);
}

.animus-shop-offer-main:focus-visible {
  outline: 2px solid var(--ring, #ff5fa8);
  outline-offset: -2px;
}

.animus-shop-kind {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--animus-muted);
}

.animus-shop-kind.is-trade,
.animus-shop-kind.is-buy,
.animus-shop-kind.is-sell,
.animus-shop-kind.is-command {
  color: var(--foreground);
}

.animus-shop-trade {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.animus-shop-plus,
.animus-shop-arrow {
  font-family: "Minecraft", var(--font-mono);
  color: var(--animus-muted);
}

.animus-shop-arrow {
  padding: 0 0.125rem;
  font-size: 1.125rem;
}

.animus-shop-goods-icon {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}

/* The slot tile: the trading screen's grey, so icons keep the contrast
   the game gives them in both themes. */
.animus-shop-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #373737;
  background: #8b8b8b;
}

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

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

.animus-shop-icon-count {
  position: absolute;
  right: 1px;
  bottom: -1px;
  font-family: "Minecraft", var(--font-mono);
  font-size: 0.75rem;
  color: #fff;
  text-shadow: 1px 1px #3f3f3f;
}

.animus-shop-icon-price {
  font-family: "Minecraft", var(--font-mono);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.animus-shop-sentence {
  min-width: 0;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.animus-shop-where {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--animus-muted);
  white-space: nowrap;
}

.animus-shop-flag.is-error {
  color: var(--animus-error);
}

.animus-shop-flag.is-warning {
  color: var(--animus-warning);
}

.animus-shop-offer-actions {
  display: flex;
  gap: 0.125rem;
}

.animus-shop-offer > .animus-gui-problem,
.animus-shop-offer-editor {
  margin: 0 0.75rem;
}

.animus-shop-offer-editor {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.animus-shop-fields.is-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.25rem 0.75rem;
}

.animus-shop-goods-block {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--animus-border);
}

.animus-shop-goods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
}

.animus-shop-goods > .animus-item-picker,
.animus-shop-goods > .animus-gui-text {
  flex: 1 1 14rem;
  min-width: 0;
}

.animus-shop-stepper {
  display: inline-flex;
  gap: 0.125rem;
  align-items: center;
}

.animus-shop-details {
  display: grid;
  gap: 0.5rem;
}

.animus-shop-undo,
.animus-shop-bulk {
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
  background: var(--secondary);
}

.animus-shop-empty {
  margin: 0;
}

.animus-shop-previews,
.animus-shop-chest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  min-width: 0;
}

.animus-shop-previews > p {
  margin: 0;
}

.animus-shop-settings-body {
  display: grid;
  gap: 0.25rem;
}

.animus-shop-page .animus-row > .animus-gui-text {
  flex: 1 1 8rem;
  min-width: 0;
}

.animus-shop-page {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--animus-border);
}

.animus-shop-links {
  display: grid;
  gap: 0.75rem;
}

.animus-shop-users {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.animus-shop-users > li {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1px solid var(--animus-border);
}

/* Trading screen offers as buttons that pick an offer on the board. */
.animus-merchant-item {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

button.animus-merchant-offer {
  font: inherit;
  text-align: start;
  cursor: pointer;
}

button.animus-merchant-offer:hover {
  background: #b5b5b5;
}

button.animus-merchant-offer:focus-visible {
  outline: 2px solid #1d1d1d;
  outline-offset: -2px;
}

.animus-merchant-offer.is-selected {
  border-color: #fcfcfc;
}

.animus-merchant-offer.is-crossed .animus-merchant-arrow {
  color: #b02e26;
}

.animus-merchant-offer.is-crossed .animus-merchant-goods:last-child {
  opacity: 0.5;
}

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

@media (max-width: 640px) {
  .animus-shop-offer-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 0;
  }

  .animus-shop-grip {
    display: none;
  }

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

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

  .animus-shop-offer-main {
    grid-template-columns: minmax(0, 1fr);
  }


  .animus-shop-offer-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    padding: 0 0.25rem 0.25rem;
  }

  .animus-shop-offer > .animus-gui-problem,
  .animus-shop-offer-editor {
    margin: 0 0.5rem;
  }

  button.animus-merchant-offer {
    min-height: 2.75rem;
  }
}