@charset "UTF-8";

:root {
  color-scheme: dark;

  --nmx-village-bg: #20170f;
  --nmx-village-bg-deep: #120d08;

  --nmx-card-bg: rgba(51, 36, 22, 0.94);
  --nmx-card-bg-solid: #332416;
  --nmx-card-border: rgba(218, 173, 101, 0.32);

  --nmx-soft-bg: rgba(71, 49, 29, 0.72);
  --nmx-sub-bg: rgba(42, 29, 17, 0.92);

  --nmx-wood: #47311d;
  --nmx-wood-dark: #2a1d11;
  --nmx-wood-border: #8a6438;

  --nmx-text: #f4ead6;
  --nmx-muted: #c6ad85;
  --nmx-faint: #9c7d53;

  --nmx-emerald: #2fa866;
  --nmx-emerald-bright: #49cf82;
  --nmx-lantern: #f0c36a;
  --nmx-redstone: #bd4b3d;
  --nmx-stone: #5e6057;

  --nmx-shadow: rgba(0, 0, 0, 0.36);

  --nmx-workspace-pad: 0.75rem;
  --nmx-workspace-gap: 0.75rem;
  --nmx-workspace-inner-pad: 0.75rem;
}

/* Bootstrap dark theme overrides */
[data-bs-theme='dark'] {
  --bs-body-bg: var(--nmx-village-bg);
  --bs-body-color: var(--nmx-text);
  --bs-secondary-color: var(--nmx-muted);

  --bs-primary: var(--nmx-emerald);
  --bs-primary-rgb: 47, 168, 102;

  --bs-success: var(--nmx-emerald-bright);
  --bs-success-rgb: 73, 207, 130;

  --bs-info: var(--nmx-lantern);
  --bs-info-rgb: 240, 195, 106;
  --bs-info-text-emphasis: var(--nmx-lantern);

  --bs-warning: var(--nmx-lantern);
  --bs-warning-rgb: 240, 195, 106;

  --bs-danger: var(--nmx-redstone);
  --bs-danger-rgb: 189, 75, 61;

  --bs-border-color: rgba(218, 173, 101, 0.28);
  --bs-border-color-translucent: rgba(218, 173, 101, 0.2);

  --bs-tertiary-bg: #2a1d11;
  --bs-secondary-bg: #332416;
}

/* Page background */
html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  color: var(--nmx-text);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    radial-gradient(circle at top left, rgba(91, 126, 52, 0.18), transparent 32%),
    radial-gradient(circle at top right, rgba(240, 195, 106, 0.12), transparent 35%),
    linear-gradient(145deg, var(--nmx-village-bg), var(--nmx-village-bg-deep));
  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto,
    auto;
}

/* Navbar */
.navbar {
  background: rgba(36, 24, 13, 0.94) !important;
  border-bottom: 3px solid var(--nmx-wood-border) !important;
  box-shadow: 0 6px 18px var(--nmx-shadow);
}

.navbar-brand {
  color: var(--nmx-text) !important;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.navbar-brand .text-info {
  color: var(--nmx-lantern) !important;
}

button.nav-link {
  color: var(--nmx-muted);
  font-weight: 700;
  border: 2px solid transparent;
  border-radius: 0.2rem;
}

button.nav-link:hover {
  color: var(--nmx-text);
  background: rgba(240, 195, 106, 0.06);
  border-color: rgba(240, 195, 106, 0.18);
}

button.nav-link.active {
  color: var(--nmx-lantern);
  background: rgba(240, 195, 106, 0.08);
  border-color: rgba(240, 195, 106, 0.28);
  font-weight: 900;
}

/* Icons use escaped unicode only. Do not duplicate these later with literal emoji. */
.navbar [data-route='home']::before {
  content: '\1F3E0\00A0';
}

.navbar [data-route='npc']::before {
  content: '\1F464\00A0';
}

.navbar [data-route='dialogue']::before {
  content: '\1F4AC\00A0';
}

.navbar [data-route='merchant']::before {
  content: '\1F48E\00A0';
}

.navbar [data-route='item']::before {
  content: '\1F9F0\00A0';
}

#settingsMenuBtn::before {
  content: '\2699\FE0F\00A0';
}

[data-save-npc]::before,
[data-save-dialogue]::before,
[data-save-merchant]::before,
[data-save-item]::before {
  content: '\1F4BE\00A0';
}

[data-generate-npc]::before,
[data-generate-dialogue]::before,
[data-generate-merchant]::before,
[data-generate-item]::before,
[data-confirm-npc-package-options]::before {
  content: '\1F4E6\00A0';
}

[data-export-npc]::before,
[data-export-dialogue]::before,
[data-export-merchant]::before,
[data-export-item]::before,
#exportLibraryBtn::before {
  content: '\1F4E4\00A0';
}

label[for$='ImportInput']::before,
#importLibraryInput + *::before {
  content: '\1F4E5\00A0';
}

[data-output-copy]::before {
  content: '\1F4CB\00A0';
}

[data-output-download]::before {
  content: '\2B07\FE0F\00A0';
}

[data-output-package]::before,
[data-download-npc-package]::before {
  content: '\1F4E6\00A0';
}

[data-add-scene]::before,
[data-add-button]::before,
[data-add-skin]::before,
[data-add-group]::before {
  content: '\2795\00A0';
}

[data-remove-scene]::before,
[data-remove-button]::before,
[data-remove-skin]::before,
[data-remove-group]::before,
[data-delete-npc]::before,
[data-delete-dialogue]::before {
  content: '\1F5D1\FE0F\00A0';
}

/* Main glass panels */
.glass {
  background: var(--nmx-card-bg);
  border: 3px solid var(--nmx-wood-border);
  border-radius: 0.45rem !important;
  box-shadow: 0 14px 38px var(--nmx-shadow);
  backdrop-filter: none;
}

.text-secondary {
  color: var(--nmx-muted) !important;
}

/* Home "recent records" cards: one column per workflow, each holding that workflow's
   created and modified lists side by side, so every rule here is about keeping a long
   record name readable in very little width. The two-across layout is the row's own
   row-cols-xxl-4 / -lg-2 / -1 classes; the cards need the extra width because each one
   now carries two columns of names rather than one. */

/* The two lists in a card, separated by a rule so the second heading reads as a new
   list rather than as more of the first. `minmax(0, 1fr)` is what lets the ellipsis in
   .home-recent-link actually clip — an auto-sized grid column would stretch to the
   longest name instead. */
.home-recent-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.home-recent-section + .home-recent-section {
  padding-left: 0.75rem;
  border-left: 1px solid var(--nmx-card-border);
}

/* One column each is unreadable on a phone, where the card is already the full screen
   width; stack the pair back up and put the divider back on top. */
@media (max-width: 575.98px) {
  .home-recent-sections {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-recent-section + .home-recent-section {
    padding-left: 0;
    padding-top: 0.75rem;
    border-left: 0;
    border-top: 1px solid var(--nmx-card-border);
  }
}

.home-recent-heading {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--nmx-muted);
}

.home-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* A name too long for the column is clipped rather than wrapped to four lines —
   the full text is on the row's tooltip, and clipping keeps the eight cards the
   same height as each other. */
.home-recent-link {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: var(--nmx-text);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent-link:hover,
.home-recent-link:focus-visible {
  color: var(--nmx-lantern);
  text-decoration: underline;
}

.home-recent-stamp {
  font-size: 0.72rem;
  color: var(--nmx-faint);
}

.workflow-title {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--nmx-lantern);
  font-weight: 900;
}

/* Setup cards */
.setup-card {
  background: var(--nmx-sub-bg);
  border: 2px solid var(--nmx-card-border);
  border-radius: 0.28rem;
  padding: 1rem;
}

.setup-subcard {
  background: rgba(27, 19, 11, 0.9);
  border: 2px solid rgba(218, 173, 101, 0.22);
  border-radius: 0.24rem;
  padding: 0.75rem;
}

.setup-subcard + .setup-subcard {
  margin-top: 0.75rem;
}

.setup-section-title {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nmx-lantern);
  margin-bottom: 0.6rem;
  font-weight: 900;
}

.setup-subsection-title {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nmx-muted, #9aa0a6);
  margin-bottom: 0.35rem;
  font-weight: 700;
}

/* "More info" disclosures. Every control on a workflow form carries its explanation on
   the hover tooltip; anything longer than a few sentences — or that needs a list, a
   command or a comparison of two engines — goes in one of these instead of sitting on
   the page as permanent prose. Same shape as the home screen's "Chrome says the folder
   contains system files?" note, which is where the pattern comes from. */
.more-info > summary {
  cursor: pointer;
  color: var(--nmx-lantern);
  width: fit-content;
}

.more-info > summary:hover {
  text-decoration: underline;
}

/* Collapsible ("accordion") setup cards: the header toggles its own body. */
.setup-card--collapsible > .setup-card-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0;
  user-select: none;
}

.setup-card--collapsible > .setup-card-toggle::after {
  content: '\25BE';
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.15s ease;
  color: var(--nmx-lantern);
}

.setup-card--collapsible.is-collapsed > .setup-card-toggle::after {
  transform: rotate(-90deg);
}

.setup-card--collapsible > .setup-card-toggle:hover {
  color: var(--nmx-lantern-bright, #ffd479);
}

.setup-card--collapsible.is-collapsed > .setup-card-body {
  display: none;
}

.setup-card--collapsible:not(.is-collapsed) > .setup-card-body {
  margin-top: 0.75rem;
}

/* Sticky column fallback for non-fixed layouts */
.sticky-col {
  position: sticky;
  top: 5.25rem;
  max-height: calc(100vh - 6.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

/* Forms */
.form-control,
.form-select,
textarea.form-control {
  color: var(--nmx-text);
  background-color: #1b130b;
  border: 2px solid rgba(218, 173, 101, 0.28);
  border-radius: 0.2rem;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  color: var(--nmx-text);
  background-color: #1b130b;
  border-color: var(--nmx-lantern);
  box-shadow: 0 0 0 0.25rem rgba(240, 195, 106, 0.14);
}

.form-text {
  color: var(--nmx-faint);
}

.form-label {
  color: var(--nmx-muted);
  font-weight: 700;
}

/* Switches */
.form-check-input {
  background-color: #1b130b;
  border-color: rgba(218, 173, 101, 0.38);
}

.form-check-input:checked {
  background-color: var(--nmx-emerald);
  border-color: var(--nmx-emerald-bright);
}

/* Buttons */
.btn {
  border-radius: 0.2rem;
  font-weight: 800;
}

.btn-primary {
  color: #0d170f;
  background-color: var(--nmx-emerald);
  border-color: #1f7d4a;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
  color: #0d170f;
  background-color: var(--nmx-emerald-bright);
  border-color: var(--nmx-emerald-bright);
}

.btn-success {
  color: #24170d;
  background-color: var(--nmx-lantern);
  border-color: #a6762d;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
}

.btn-success:hover,
.btn-success:focus {
  color: #24170d;
  background-color: #ffd77a;
  border-color: #ffd77a;
}

.btn-outline-info,
.btn-outline-light,
.btn-outline-secondary {
  color: var(--nmx-lantern);
  border-color: var(--nmx-wood-border);
  background: rgba(0, 0, 0, 0.12);
}

.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-secondary:hover {
  color: #24170d;
  background: var(--nmx-lantern);
  border-color: var(--nmx-lantern);
}

.btn-outline-danger {
  color: #ffd9d4;
  border-color: rgba(189, 75, 61, 0.65);
  background: rgba(189, 75, 61, 0.16);
}

.btn-outline-danger:hover {
  color: #fff;
  background: var(--nmx-redstone);
  border-color: var(--nmx-redstone);
}

.btn-outline-warning {
  color: var(--nmx-lantern);
  border-color: rgba(240, 195, 106, 0.55);
}

.btn-outline-warning:hover {
  color: #24170d;
  background: var(--nmx-lantern);
  border-color: var(--nmx-lantern);
}

/* Badges */
.badge.text-bg-secondary {
  color: #24170d !important;
  background-color: var(--nmx-lantern) !important;
  font-weight: 900;
}

/* Alerts */
.alert-secondary {
  color: var(--nmx-muted);
  background-color: rgba(27, 19, 11, 0.84);
  border-color: rgba(218, 173, 101, 0.28);
}

.alert-info {
  color: #24170d;
  background-color: rgba(240, 195, 106, 0.85);
  border-color: var(--nmx-lantern);
}

.alert-success {
  color: #0d170f;
  background-color: rgba(73, 207, 130, 0.78);
  border-color: var(--nmx-emerald-bright);
}

/* Nav pills / tabs */
.nav-pills .nav-link {
  color: var(--nmx-muted);
  background: rgba(0, 0, 0, 0.16);
  border: 2px solid rgba(218, 173, 101, 0.2);
  border-radius: 0.24rem;
}

.nav-pills .nav-link.active {
  color: #24170d;
  background: var(--nmx-lantern);
  border-color: var(--nmx-lantern);
  font-weight: 900;
}

.nav-tabs {
  border-bottom-color: rgba(218, 173, 101, 0.28);
}

.nav-tabs .nav-link {
  color: var(--nmx-muted);
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(218, 173, 101, 0.22);
  border-radius: 0.24rem 0.24rem 0 0;
}

.nav-tabs .nav-link.active {
  color: #24170d;
  background: var(--nmx-lantern);
  border-color: var(--nmx-lantern);
  font-weight: 900;
}

/* Dropdowns */
.dropdown-menu {
  color: var(--nmx-text);
  background-color: #24180d;
  border: 2px solid var(--nmx-wood-border);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
}

.dropdown-item {
  color: var(--nmx-muted);
  border-radius: 0.16rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--nmx-text);
  background-color: rgba(240, 195, 106, 0.12);
}

.dropdown-divider {
  border-top-color: rgba(218, 173, 101, 0.22);
}

/* Tables */
.table {
  --bs-table-color: var(--nmx-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(218, 173, 101, 0.2);
  --bs-table-hover-bg: rgba(240, 195, 106, 0.08);
  --bs-table-hover-color: var(--nmx-text);
}

/* Output / code areas */
.codebox {
  min-height: 420px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.82rem;
  white-space: pre;
  color: #f8efd8;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), #160f08;
  background-size: 18px 18px;
  border: 2px solid rgba(218, 173, 101, 0.28);
  border-radius: 0.24rem;
}

.small-code,
.path-pill {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.82em;
}

.path-pill {
  background: rgba(0, 0, 0, 0.25);
  color: var(--nmx-lantern);
  border: 1px solid rgba(218, 173, 101, 0.25);
  border-radius: 0.18rem;
  padding: 0.15rem 0.35rem;
}

.textarea-json {
  min-height: 130px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8rem;
}

/* Commands tab (workflow output cards) */
.command-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.command-group + .command-group {
  margin-top: 1rem;
}

.command-group-title {
  font-weight: 600;
  color: var(--nmx-lantern);
  margin-bottom: 0.2rem;
}

.command-group-note {
  font-size: 0.82rem;
  color: rgba(248, 239, 216, 0.7);
  margin-bottom: 0.5rem;
}

.command-row + .command-row {
  margin-top: 0.5rem;
}

.command-row-label {
  font-size: 0.8rem;
  color: rgba(248, 239, 216, 0.82);
  margin-bottom: 0.2rem;
}

.command-row-line {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.command-code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.82rem;
  color: #f8efd8;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(218, 173, 101, 0.25);
  border-radius: 0.2rem;
  padding: 0.3rem 0.45rem;
}

.command-copy {
  flex: 0 0 auto;
  align-self: center;
}

/* Component editor */
.component-search-list {
  max-height: 50vh;
  overflow: auto;
}

.component-row {
  cursor: pointer;
}

.component-row:hover {
  background: rgba(240, 195, 106, 0.08);
}

.component-help-card {
  background: rgba(240, 195, 106, 0.08);
  border: 2px solid rgba(240, 195, 106, 0.24);
  border-radius: 0.28rem;
  padding: 0.65rem 0.75rem;
}

.component-help-card.compact {
  background: rgba(0, 0, 0, 0.14);
  border-color: rgba(218, 173, 101, 0.18);
  padding: 0.5rem 0.65rem;
}

.component-help-card summary {
  cursor: pointer;
  color: var(--nmx-lantern);
}

.component-help-label {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nmx-muted);
  font-weight: 900;
  margin-bottom: 0.08rem;
}

.component-field-help {
  background: rgba(0, 0, 0, 0.16);
  border-left: 4px solid var(--nmx-lantern);
  border-radius: 0.2rem;
  padding: 0.45rem 0.6rem;
}

.component-field-help + .component-field-help {
  margin-top: 0.45rem;
}

.component-row-active {
  border-color: rgba(13, 202, 240, 0.45);
}

.component-search-list .badge {
  max-width: 100%;
}

/* Skin previews */
.skin-preview {
  width: 72px;
  height: 72px;
  border-radius: 0.16rem;
  border: 3px solid var(--nmx-wood-border);
  background: #21160c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.skin-preview img {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

.skin-preview-empty {
  font-size: 0.7rem;
  color: var(--nmx-muted);
  text-align: center;
  padding: 0.25rem;
}

/* Library / output helpers */
.library-table {
  max-height: 52vh;
  overflow: auto;
}

.drag-handle {
  cursor: grab;
}

.output-panel .nav-link {
  font-size: 0.86rem;
}

/* Toasts */
.toast-container {
  z-index: 1080;
}

.toast {
  color: var(--nmx-text);
  background-color: #24180d;
  border: 2px solid var(--nmx-wood-border);
}

.toast-header {
  color: var(--nmx-text);
  background-color: #332416;
  border-bottom-color: rgba(218, 173, 101, 0.22);
}

/* Modals */
.modal-content {
  background: #24180d;
  border: 3px solid var(--nmx-wood-border);
  border-radius: 0.45rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.modal-header,
.modal-footer {
  border-color: rgba(218, 173, 101, 0.22);
}

.btn-close {
  filter: invert(1) sepia(1) saturate(0.5);
}

/* Existing layout helpers */
.setup-switch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
}

.setup-switch-grid .form-check {
  margin: 0;
  padding-left: 2.5rem;
}

.setup-advanced > summary {
  cursor: pointer;
}

.skin-slot-card {
  background: rgba(0, 0, 0, 0.16);
}

/* App-wide fixed workflow viewport
   - The browser/window scroll is disabled only while a workflow is visible.
   - The visible workflow gets the remaining viewport under the navbar.
   - Cards stay visible; card bodies scroll internally. */
html:has(#workflowScreen:not(.d-none)),
body:has(#workflowScreen:not(.d-none)) {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body:has(#workflowScreen:not(.d-none)) {
  display: flex;
  flex-direction: column;
}

body:has(#workflowScreen:not(.d-none)) > .navbar {
  flex: 0 0 auto;
}

body:has(#workflowScreen:not(.d-none)) > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

body:has(#workflowScreen:not(.d-none)) #statusBar {
  flex: 0 0 auto;
  margin: var(--nmx-workspace-pad) var(--nmx-workspace-pad) 0;
}

body:has(#workflowScreen:not(.d-none)) #workflowScreen {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  padding: var(--nmx-workspace-pad);
  box-sizing: border-box;
}

/* Generic workflow roots.
   These fill the padded workflow content box, so card borders/corners remain visible. */
#workflowScreen:not(.d-none) > .row,
#workflowScreen:not(.d-none) > .vstack,
#workflowScreen:not(.d-none) [data-npc-workflow-root] {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

/* Generic two-column workflow fallback used by existing non-NPC workflows.
   Bootstrap rows use negative side margins; keep them inside the padded viewport. */
#workflowScreen:not(.d-none) > .row {
  align-items: stretch;
  margin-left: 0;
  margin-right: 0;
}

#workflowScreen:not(.d-none) > .row > [class*='col-'] {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#workflowScreen:not(.d-none) > .row > [class*='col-'] > .glass {
  min-height: 0;
}

/* App-wide workflow card layout primitives */
#workflowScreen:not(.d-none) > .workflow-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.workflow-layout {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex !important;
  flex-direction: column;
  gap: var(--nmx-workspace-gap) !important;
}

.workflow-action-bar {
  flex: 0 0 auto;
}

.workflow-main {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;

  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--nmx-workspace-gap);

  margin: 0;
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

.workflow-panel {
  min-height: 0;
  height: 100%;
  display: flex;
  padding: 0;

  flex: 1 1 0;
  width: auto;
  max-width: none;
}

.workflow-panel-lg {
  flex: 1.6 1 0;
}

.workflow-panel-md {
  flex: 1 1 0;
}

.workflow-card-shell {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workflow-card-header {
  flex: 0 0 auto;
}

/* Centered NPC name on the "Create / modify NPC" header row. Absolutely centered
   so it stays put regardless of the flanking title/button widths, capped and
   truncated so a long name never overlaps the buttons, and click-through so it
   never blocks them. */
.npc-card-name {
  max-width: 45%;
  pointer-events: none;
}

.npc-card-name:empty {
  display: none;
}

.workflow-card-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  overscroll-behavior: contain;
}

.workflow-card-shell > .nav {
  flex: 0 0 auto;
}

.workflow-tab-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workflow-tab-content > .tab-pane {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.workflow-tab-content > .tab-pane.active {
  display: flex;
  flex-direction: column;
}

.workflow-tab-pane-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  overscroll-behavior: contain;
}

.workflow-output-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-right: 0;
}

.workflow-output-host .output-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.workflow-output-host .output-panel > .d-flex,
.workflow-output-host .output-panel > .nav {
  flex: 0 0 auto;
}

.workflow-output-host [data-output-body] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.workflow-output-host [data-output-body] .alert {
  flex: 0 0 auto;
}

.workflow-output-host .codebox {
  flex: 1 1 auto;
  min-height: 0;
  resize: none;
}

/* The item guided-form panes layer on .workflow-tab-content but scroll their
   own content (the shared panes hide overflow and let inner scroll areas
   manage it). Declared after the shared rules so these overrides win. */
.item-guided-tab-content > .tab-pane {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
  overscroll-behavior: contain;
}

.item-guided-tab-content > .tab-pane.active {
  display: block;
}

@media (max-width: 1199.98px) {
  .workflow-main {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--nmx-workspace-gap);
  }

  .workflow-panel,
  .workflow-panel-lg,
  .workflow-panel-md {
    flex: 1 1 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }
}

/* The NPC workflow uses the shared .workflow-layout / .workflow-main /
   .workflow-panel / .workflow-card-shell / .workflow-card-scroll /
   .workflow-tab-content primitives (above). Only the id-specific hosts below
   need their own rules so the component list and generated-output panes fill
   their tab. */
#npcComponentHost,
#npcOutputHost {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Component tab: the list is the scrolling area */
#npcComponentHost > .setup-card {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#npcComponentHost .component-search-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
}

/* Generated output tab */
#npcGeneratedOutputTabPane .output-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#npcGeneratedOutputTabPane .output-panel > .d-flex,
#npcGeneratedOutputTabPane .output-panel > .nav {
  flex: 0 0 auto;
}

#npcGeneratedOutputTabPane [data-output-body] {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#npcGeneratedOutputTabPane [data-output-body] .alert {
  flex: 0 0 auto;
}

#npcGeneratedOutputTabPane .codebox {
  flex: 1 1 auto;
  min-height: 0;
  resize: none;
}

/* Generic output viewer fallback for other workflows */
#workflowScreen:not(.d-none) .output-panel {
  min-height: 0;
}

#workflowScreen:not(.d-none) .output-panel .codebox {
  max-height: none;
}

/* Dialogue tree map
   The Scenes tab renders the dialogue as a left-to-right tree of equal-size
   scene cards. The scenes tab pane is a flex column (see
   .workflow-tab-content > .tab-pane.active), so the toolbar stays fixed and the
   tree scrolls in both directions. */
.dialogue-tree-toolbar {
  flex: 0 0 auto;
}

.dialogue-tree-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Keep a wide/tall tree contained inside its card: let the dialogue panels
   shrink to the width the row allots them (mirroring the min-height:0 that
   already lets the tree scroll vertically) so the tree overflows into the
   scroll container's scrollbars instead of widening the card and viewport. */
.dialogue-workflow-main .workflow-panel {
  min-width: 0;
}

.dialogue-tree {
  position: relative;
  width: max-content;
  min-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.dialogue-tree-columns {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3.25rem;
}

.dialogue-tree-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

.dialogue-tree-edges {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.dialogue-tree-edge {
  fill: none;
  stroke: rgba(218, 173, 101, 0.5);
  stroke-width: 2;
}

.dialogue-tree-arrow {
  fill: rgba(218, 173, 101, 0.7);
}

/* Equal-size scene cards */
.dialogue-node {
  position: relative;
  width: 224px;
  height: 148px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  padding: 0.7rem 0.75rem;
  color: var(--nmx-text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 45%), var(--nmx-sub-bg);
  border: 2px solid var(--nmx-card-border);
  border-radius: 0.28rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  appearance: none;
  transition:
    transform 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.dialogue-node:hover,
.dialogue-node:focus-visible {
  transform: translateY(-2px);
  border-color: var(--nmx-lantern);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.36);
  outline: none;
}

.dialogue-node.is-initial {
  border-color: var(--nmx-emerald-bright);
  box-shadow:
    0 0 0 1px rgba(73, 207, 130, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.28);
}

.dialogue-node-start {
  position: absolute;
  top: -0.6rem;
  left: 0.6rem;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 900;
  color: #0d170f;
  background: var(--nmx-emerald-bright);
  border-radius: 0.8rem;
  padding: 0.05rem 0.4rem;
}

.dialogue-node-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--nmx-lantern);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialogue-node-text {
  flex: 1 1 auto;
  min-height: 0;
  font-size: 0.8rem;
  line-height: 1.25;
  color: var(--nmx-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dialogue-node-empty {
  font-style: italic;
  color: var(--nmx-faint);
}

.dialogue-node-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
}

.dialogue-node-badge {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 0.8rem;
  border: 1px solid transparent;
}

.dialogue-node-badge.is-buttons {
  color: var(--nmx-text);
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(218, 173, 101, 0.3);
}

.dialogue-node-badge.is-command {
  color: #0d170f;
  background: var(--nmx-lantern);
}

.dialogue-node-badge.is-merchant {
  color: #0d170f;
  background: var(--nmx-emerald-bright);
}

/* Unlinked scenes live below the tree until a button targets them */
.dialogue-unlinked {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px dashed rgba(218, 173, 101, 0.28);
}

.dialogue-unlinked-title {
  margin-bottom: 0.3rem;
}

.dialogue-unlinked-hint {
  font-size: 0.78rem;
  color: var(--nmx-muted);
  margin-bottom: 0.9rem;
  max-width: 42rem;
}

.dialogue-unlinked-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.dialogue-unlinked .dialogue-node {
  border-style: dashed;
}

@media (max-width: 992px) {
  .sticky-col {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .setup-switch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .navbar [data-route]::before {
    display: inline-block;
    min-width: 1.4rem;
  }
}

/* Equipment paper doll */
.paperdoll-wrap {
  display: flex;
  justify-content: center;
}

.paperdoll {
  position: relative;
  width: 220px;
  height: 300px;
  border: 3px solid var(--nmx-wood-border);
  border-radius: 0.28rem;
  background: #21160c;
  flex: 0 0 auto;
}

.paperdoll-figure {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}

.paperdoll-figure span {
  position: absolute;
  background: var(--nmx-stone);
  border-radius: 8px;
}

.pd-head {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  left: 118px;
  top: 10px;
}
.pd-torso {
  width: 56px;
  height: 74px;
  left: 112px;
  top: 58px;
  border-radius: 12px;
}
.pd-arm {
  width: 14px;
  height: 60px;
  top: 62px;
}
.pd-arm-l {
  left: 96px;
}
.pd-arm-r {
  left: 170px;
}
.pd-leg {
  width: 18px;
  height: 72px;
  top: 130px;
}
.pd-leg-l {
  left: 118px;
}
.pd-leg-r {
  left: 142px;
}

.paperdoll-slot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--nmx-wood-border);
  border-radius: 0.2rem;
  background: rgba(27, 19, 11, 0.85);
  color: var(--nmx-muted);
  line-height: 1.05;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

.paperdoll-slot:hover {
  border-color: var(--nmx-lantern);
  color: var(--nmx-text);
}

.paperdoll-slot.is-filled {
  border-color: var(--nmx-emerald-bright);
  background: rgba(47, 168, 102, 0.18);
  color: var(--nmx-text);
}

.paperdoll-slot .pd-slot-name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.58rem;
  padding: 2px;
  color: var(--nmx-lantern);
}

/* Once an item is chosen its icon covers the slot, so hide the body-part label. */
.paperdoll-slot.has-icon .pd-slot-name {
  display: none;
}

/* The chosen item's icon stretches to fill the whole clickable slot. */
.pd-slot-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
}

.pd-slot-icon img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: pixelated;
}

.pd-slot-icon.item-icon--fallback {
  font-size: 0.7rem;
}

.paperdoll-slot--head {
  top: 6px;
  left: 6px;
  width: 64px;
  height: 56px;
}
.paperdoll-slot--chest {
  top: 68px;
  left: 6px;
  width: 64px;
  height: 56px;
}
.paperdoll-slot--legs {
  top: 130px;
  left: 6px;
  width: 64px;
  height: 56px;
}
.paperdoll-slot--feet {
  top: 192px;
  left: 6px;
  width: 64px;
  height: 56px;
}
.paperdoll-slot--weapon {
  top: 250px;
  left: 78px;
  width: 64px;
  height: 44px;
}
.paperdoll-slot--shield {
  top: 250px;
  left: 148px;
  width: 64px;
  height: 44px;
}

.equip-slot-card.is-disabled .equip-slot-fields {
  opacity: 0.55;
}

.loot-advanced summary {
  cursor: pointer;
  color: var(--nmx-muted);
}

/* Reusable item picker control */
.item-picker-control {
  width: 100%;
}

.item-picker-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  min-height: 2.1rem;
  border: 2px solid var(--nmx-wood-border);
  border-radius: 0.2rem;
  background: rgba(27, 19, 11, 0.85);
  color: var(--nmx-text);
  text-align: left;
  font-size: 0.85rem;
}

.item-picker-btn:hover {
  border-color: var(--nmx-lantern);
}

.item-picker-control.is-empty .item-picker-label {
  color: var(--nmx-muted);
}

.item-picker-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.15rem;
  background: #21160c;
  overflow: hidden;
}

.item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.item-icon--fallback {
  color: var(--nmx-lantern);
  font-weight: 800;
  font-size: 0.8rem;
  background: #2a1d11;
}

/* Item picker modal grid */
.item-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.5rem;
}

.item-picker-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.35rem;
  text-align: center;
  border: 2px solid var(--nmx-wood-border);
  border-radius: 0.2rem;
  background: rgba(27, 19, 11, 0.85);
  color: var(--nmx-text);
  cursor: pointer;
  overflow: hidden;
}

.item-picker-cell:hover {
  border-color: var(--nmx-lantern);
}

.item-picker-cell.is-current {
  border-color: var(--nmx-emerald-bright);
  background: rgba(47, 168, 102, 0.18);
}

.item-picker-cell .item-icon {
  width: 42px;
  height: 42px;
}

.item-picker-cell-label {
  font-size: 0.72rem;
  line-height: 1.05;
}

.item-picker-cell-id {
  font-size: 0.58rem;
  color: var(--nmx-muted);
  word-break: break-all;
}

.item-picker-custom {
  max-width: 340px;
}

/* Shared-skin picker (NPC skin slots) */
.skin-picker-control {
  width: 100%;
}

.skin-picker-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  min-height: 2.4rem;
  border: 2px solid var(--nmx-wood-border);
  border-radius: 0.2rem;
  background: rgba(27, 19, 11, 0.85);
  color: var(--nmx-text);
  text-align: left;
  font-size: 0.85rem;
}

.skin-picker-btn:hover {
  border-color: var(--nmx-lantern);
}

.skin-picker-control.is-empty .skin-picker-label {
  color: var(--nmx-muted);
}

.skin-picker-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thumbnails: the picker button, the picker grid, and the slot card all draw the
   same preview image, so they share one base class at three sizes. */
.skin-thumb,
.skin-picker-btn-thumb,
.skin-picker-thumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.15rem;
  background: #21160c;
}

.skin-thumb img,
.skin-picker-btn-thumb img,
.skin-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.skin-thumb--fallback {
  color: var(--nmx-lantern);
  font-weight: 800;
  font-size: 0.8rem;
  background: #2a1d11;
}

.skin-picker-btn-thumb {
  width: 30px;
  height: 30px;
}

.skin-picker-thumb {
  width: 96px;
  height: 96px;
}

.skin-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
}

.skin-picker-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.35rem;
  text-align: center;
  border: 2px solid var(--nmx-wood-border);
  border-radius: 0.2rem;
  background: rgba(27, 19, 11, 0.85);
  color: var(--nmx-text);
  cursor: pointer;
  overflow: hidden;
}

.skin-picker-cell:hover {
  border-color: var(--nmx-lantern);
}

.skin-picker-cell.is-current {
  border-color: var(--nmx-emerald-bright);
  background: rgba(47, 168, 102, 0.18);
}

.skin-picker-cell-label {
  font-size: 0.74rem;
  line-height: 1.1;
}

.skin-picker-cell-name {
  font-size: 0.6rem;
  color: var(--nmx-muted);
  word-break: break-all;
}