/* docs/features/technical/dev-playtest-tools/ */

.playtools-app {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--gs-radius-md);
  border: var(--gs-hairline) solid var(--gs-border-gold-dim);
  background: linear-gradient(165deg, rgba(18, 12, 28, 0.96) 0%, rgba(8, 5, 14, 0.98) 100%);
  box-shadow: inset 0 var(--gs-hairline) 0 rgba(255, 220, 160, 0.06);
  --pt-gap-2xs: calc(var(--gs-u-h) * 0.35);
  --pt-gap-xs: calc(var(--gs-u-h) * 0.45);
  --pt-gap-sm: calc(var(--gs-u-h) * 0.55);
  --pt-gap-md: calc(var(--gs-u-h) * 0.65);
  --pt-gap-lg: calc(var(--gs-u-h) * 0.85);
  --pt-sidebar-w: min(calc(var(--gs-u-w) * 15.2), calc(var(--gs-u-w) * 30));
  --pt-nav-detail-min-w: calc(var(--gs-u-w) * 15.8);
}

.playtools-app__hud {
  flex-shrink: 0;
  padding: var(--pt-gap-xs) var(--pt-gap-md) var(--pt-gap-sm);
  border-bottom: var(--gs-hairline) solid var(--gs-border-gold-soft);
  background: rgba(12, 8, 20, 0.92);
}

.playtools-app__hud-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pt-gap-xs) var(--pt-gap-sm);
  min-width: 0;
}

.playtools-app__hud-sep {
  color: rgba(var(--gs-gold-rgb), 0.55);
  font-size: var(--gs-text-sm);
  font-weight: 400;
  user-select: none;
}

.playtools-app__hud-title {
  font-size: var(--gs-text-md);
  font-weight: 600;
  color: #f5ebd9;
}

.playtools-app__exit.town-nav-btn {
  font-size: var(--gs-text-xs);
  padding: calc(var(--gs-u-h) * 0.95) var(--pt-gap-md);
}

.playtools-app__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
}

.playtools-app__sidebar {
  flex: 0 0 var(--pt-sidebar-w);
  width: var(--pt-sidebar-w);
  min-width: 0;
  max-width: min(var(--pt-sidebar-w), 36%);
  max-height: 100%;
  border-right: var(--gs-hairline) solid var(--gs-border-gold-faint);
  background: rgba(10, 6, 16, 0.65);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.playtools-app__sidebar-groups {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(var(--gs-u-h) * 1.04) calc(var(--gs-u-h) * 0.74) var(--pt-gap-sm);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 1.04);
}

.playtools-app__nav-details {
  margin: 0;
  padding: 0;
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid transparent;
}

.playtools-app__nav-details[open] {
  border-color: rgba(90, 70, 110, 0.38);
  background: rgba(14, 10, 22, 0.55);
}

.playtools-app__nav-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--gs-u-h) * 0.74);
  padding: calc(var(--gs-u-h) * 1.13) calc(var(--gs-u-h) * 1.25);
  font-size: var(--gs-text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #e8d4b0;
  user-select: none;
}

.playtools-app__nav-summary::-webkit-details-marker {
  display: none;
}

.playtools-app__nav-summary,
.playtools-campaign-zone-summary {
  --gs-details-chevron-color: rgba(var(--gs-gold-rgb), 0.55);
}

.playtools-app__nav-detail-links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.18);
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-h) * 0.74) calc(var(--gs-u-h) * 1.25) var(--pt-gap-xs);
}

.playtools-app__nav-details--nested {
  margin-left: calc(var(--gs-u-h) * 0.45);
  border-left: var(--gs-hairline) solid rgba(90, 70, 110, 0.28);
}

.playtools-app__nav-summary--nested {
  font-size: var(--gs-text-sm);
  padding-left: calc(var(--gs-u-h) * 0.55);
}

.playtools-app__nav-details--nested .playtools-app__nav-detail-links {
  padding-left: calc(var(--gs-u-h) * 1.1);
}

.playtools-app__nav {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.24);
  padding: var(--pt-gap-xs) calc(var(--gs-u-h) * 1.04);
}

.playtools-app__nav--primary {
  border-bottom: var(--gs-hairline) solid rgba(90, 70, 110, 0.35);
  flex-shrink: 0;
}

.playtools-app__nav--secondary {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: var(--pt-gap-sm);
}

.playtools-app__nav-heading {
  margin: 0 0 calc(var(--gs-u-h) * 1.04);
  padding: 0 calc(var(--gs-u-h) * 1.04);
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(200, 180, 150, 0.65);
}

.playtools-app__nav-link {
  display: block;
  padding: calc(var(--gs-u-h) * 1.13) var(--pt-gap-xs);
  border-radius: var(--gs-radius-sm);
  font-size: var(--gs-text-sm);
  line-height: 1.25;
  color: #e8dcc8;
  text-decoration: none;
  border: var(--gs-hairline) solid transparent;
}

.playtools-app__nav-link:hover {
  background: var(--gs-bg-gold-tint);
  border-color: var(--gs-border-gold-faint);
  color: #fff6e6;
}

.playtools-app__nav-link--current {
  font-weight: 600;
  background: rgba(90, 50, 120, 0.38);
  border-color: var(--gs-border-gold-accent);
  color: #fff6e6;
}

.playtools-app__nav-link:focus-visible {
  outline: var(--gs-stroke) solid rgba(var(--gs-gold-warm-rgb), 0.65);
  outline-offset: calc(var(--gs-u-h) * 0.37);
}

.playtools-app__main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--pt-gap-md) var(--pt-gap-lg) var(--pt-gap-lg);
  scroll-behavior: smooth;
  background: rgba(6, 4, 10, 0.35);
}

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

/* Legacy panel/grid/card helpers — children live in __main */
.playtools-app__main .playtools__panel-inner {
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.playtools-app__main .playtools__grid {
  margin-top: 0;
}

.playtools-app__fn-anchor {
  scroll-margin-top: calc(var(--gs-u-h) * 1.78);
}

/* Shared form controls (playtools cards + embedded tools such as combat animation tester). */
.playtools-form {
  display: grid;
  gap: var(--pt-gap-xs);
}
.playtools-form label {
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
  display: grid;
  gap: calc(var(--gs-u-h) * 0.74);
}
.playtools-form input[type="range"] {
  width: 100%;
  max-width: 100%;
  margin: calc(var(--gs-u-h) * 0.44) 0 0;
}
.playtools-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.playtools-form select,
.playtools-form textarea {
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid var(--gs-border-gold-medium);
  background: rgba(8, 5, 14, 0.85);
  color: #f0e8dc;
  padding: calc(var(--gs-u-h) * 1.25) var(--pt-gap-sm);
  font: inherit;
}
.playtools-form textarea {
  min-height: calc(var(--gs-u-h) * 6);
  resize: vertical;
}

/* Dev playtools status flash — playtools admin surfaces only */
.playtools-flash {
  border-radius: var(--gs-radius-sm);
  margin: 0 0 var(--pt-gap-lg);
  padding: var(--pt-gap-sm) var(--pt-gap-md);
  border: var(--gs-hairline) solid var(--gs-border-gold-accent);
  background: var(--gs-bg-flash);
  color: var(--gs-text-flash);
  font-size: var(--gs-text-sm);
  line-height: 1.35;
}

.playtools-flash--error {
  border-color: var(--gs-border-error);
  background: var(--gs-bg-error);
  color: var(--gs-text-error);
}

.playtools-help {
  margin: 0 0 var(--pt-gap-sm);
  font-size: var(--gs-text-xs);
  color: #c8beb0;
  line-height: 1.4;
}

.playtools-help-muted {
  margin: 0 0 var(--pt-gap-sm);
  font-size: var(--gs-text-2xs);
  color: #b8a990;
  line-height: 1.4;
}

.playtools-range-label {
  display: block;
  margin: calc(var(--gs-u-h) * 0.35) 0;
}

.playtools-range-caption {
  margin-bottom: calc(var(--gs-u-h) * 0.35);
  font-size: var(--gs-text-sm);
}

.playtools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--gs-u-w) * 17.5)), 1fr));
  gap: calc(var(--pt-gap-md) + var(--gs-u-h) * 0.55);
  align-items: start;
  padding: calc(var(--gs-u-h) * 0.45);
}

.playtools-card {
  box-sizing: border-box;
  padding: calc(var(--pt-gap-md) + var(--gs-u-h) * 0.15);
  overflow: visible;
}

.playtools-card h3,
.playtools-card h4 {
  margin: 0 0 var(--pt-gap-sm);
  font-size: var(--gs-text-sm);
  font-weight: 600;
  color: #f0e8dc;
}

.playtools-card--materials {
  display: grid;
  gap: var(--pt-gap-sm);
}

.playtools-card--materials-editor,
.playtools-card--combat-anim,
.playtools-card--audio {
  grid-column: 1 / -1;
}

.playtools-items-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-md);
}

.playtools-material-list {
  max-height: calc(var(--gs-u-h) * 58);
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--gs-u-w) * 8), 1fr));
  gap: var(--pt-gap-sm);
  padding: var(--pt-gap-sm);
  align-content: start;
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(90, 70, 110, 0.35);
  background: rgba(8, 5, 14, 0.45);
}

.playtools-material-row {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: calc(var(--gs-u-h) * 0.35);
  justify-items: center;
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.28);
  border-radius: var(--gs-radius-sm);
  padding: var(--pt-gap-sm) var(--pt-gap-xs);
  background: rgba(20, 14, 32, 0.72);
}

.playtools-material-row img {
  width: calc(var(--gs-u-w) * 3.5);
  height: calc(var(--gs-u-w) * 3.5);
  border-radius: var(--gs-radius-xs);
  background: rgba(8, 6, 14, 0.72);
  object-fit: cover;
}

.playtools-material-row .soul-prism-icon-wrap {
  width: calc(var(--gs-u-w) * 3.5);
  height: calc(var(--gs-u-w) * 3.5);
}

.playtools-material-row .soul-prism-icon-wrap--large {
  height: calc(var(--gs-u-w) * 3.875);
}

.playtools-material-qty-readonly {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--gs-u-w) * 5.75);
  text-align: center;
  font-size: var(--gs-text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: calc(var(--gs-u-h) * 0.55) var(--pt-gap-xs);
  color: #c8bca8;
}

.playtools-material-title {
  margin: 0;
  font-size: var(--gs-text-2xs);
  line-height: 1.25;
  text-align: center;
  color: #eadcc2;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playtools-material-input {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--gs-u-w) * 5.75);
  text-align: center;
  font-size: var(--gs-text-xs);
  padding: calc(var(--gs-u-h) * 0.55) var(--pt-gap-xs);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid var(--gs-border-gold-medium);
  background: rgba(8, 5, 14, 0.85);
  color: #f0e8dc;
}

.playtools-material-actions {
  margin-top: var(--pt-gap-sm);
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--pt-gap-xs);
}

.playtools-currency-list {
  margin-top: var(--pt-gap-xs);
}

.playtools-currency-star-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gs-u-w) * 3.5);
  height: calc(var(--gs-u-w) * 3.5);
  border-radius: var(--gs-radius-xs);
  background: rgba(8, 6, 14, 0.72);
  font-size: var(--gs-text-xl);
  line-height: 1;
  color: #e8c547;
  text-shadow: 0 0 calc(var(--gs-u-w) * 0.5) rgba(232, 197, 71, 0.45);
}

.playtools-form .town-nav-btn {
  justify-self: start;
  margin-top: calc(var(--gs-u-h) * 0.25);
}

.playtools-form + .playtools-form {
  margin-top: var(--pt-gap-md);
  padding-top: var(--pt-gap-md);
  border-top: var(--gs-hairline) solid rgba(90, 70, 110, 0.35);
}

.playtools-campaign-grid-help {
  margin-top: var(--pt-gap-md);
}

.playtools-campaign-zones {
  margin-top: var(--pt-gap-sm);
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-xs);
}

.playtools-campaign-zone {
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(154, 130, 99, 0.4);
  background: rgba(12, 10, 18, 0.45);
  padding: var(--pt-gap-xs) var(--pt-gap-sm) var(--pt-gap-sm);
}

.playtools-campaign-zone-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pt-gap-xs);
  font-weight: 600;
  color: #e8dcc8;
  padding: var(--pt-gap-xs) var(--pt-gap-2xs);
  list-style: none;
}

.playtools-campaign-zone-summary::-webkit-details-marker {
  display: none;
}

.playtools-campaign-zone-summary::marker {
  content: "";
}

.playtools-campaign-stages {
  list-style: none;
  margin: var(--pt-gap-xs) 0 var(--pt-gap-sm);
  padding: 0;
}

.playtools-campaign-stage {
  margin: calc(var(--gs-u-h) * 0.2) 0;
}

.playtools-campaign-stage-label {
  display: flex;
  align-items: flex-start;
  gap: var(--pt-gap-xs);
  cursor: pointer;
  font-size: var(--gs-text-xs);
  color: #d8ccb8;
}

.playtools-campaign-stage-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pt-gap-2xs);
}

.playtools-campaign-stage-title {
  font-weight: 500;
}

.playtools-campaign-stage-id {
  font-size: var(--gs-text-2xs);
  padding: calc(var(--gs-u-h) * 0.1) var(--pt-gap-2xs);
  border-radius: var(--gs-radius-xs);
  background: rgba(30, 24, 40, 0.85);
  color: #c9bba8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.playtools-campaign-stage-suffix {
  font-size: var(--gs-text-2xs);
  color: #b8a990;
}

.playtools-campaign-zone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-xs);
  margin-bottom: var(--pt-gap-2xs);
}

.playtools-campaign-zone-action {
  font-size: var(--gs-text-2xs);
}

.playtools-last-run {
  margin: var(--pt-gap-sm) 0 0;
  font-size: var(--gs-text-xs);
  color: #c9bba8;
}

.playtools-unknown {
  color: #c9bba8;
  font-size: var(--gs-text-sm);
}

.playtools-arena-star-editor {
  display: grid;
  gap: var(--pt-gap-xs);
  margin-top: var(--pt-gap-xs);
}

.playtools-arena-star-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--gs-u-w) * 8), calc(var(--gs-u-h) * 10));
  align-items: center;
  gap: var(--pt-gap-sm);
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
}

.playtools-arena-star-row input {
  box-sizing: border-box;
  width: 100%;
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid var(--gs-border-gold-medium);
  background: rgba(8, 5, 14, 0.85);
  color: #f0e8dc;
  padding: calc(var(--gs-u-h) * 1.25) var(--pt-gap-sm);
  font: inherit;
}

.playtools-arena-star-anchor {
  margin: 0;
  font-size: var(--gs-text-xs);
  font-variant-numeric: tabular-nums;
  color: #a89880;
  text-align: right;
}

.playtools-arena-state {
  display: grid;
  gap: var(--pt-gap-2xs);
  margin: 0 0 var(--pt-gap-md);
  padding: var(--pt-gap-sm);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(90, 70, 110, 0.38);
  background: rgba(8, 5, 14, 0.55);
  font-size: var(--gs-text-xs);
  color: #d8ccb8;
}

.playtools-arena-state dt {
  font-weight: 600;
  color: #e8dcc8;
}

.playtools-arena-state dd {
  margin: 0 0 var(--pt-gap-xs);
}

/* Story editor panels */
.playtools-story__intro {
  margin: 0 0 var(--pt-gap-md);
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
  line-height: 1.45;
}

.playtools-story__reset {
  margin-bottom: var(--pt-gap-md);
  padding: var(--pt-gap-md);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.35);
  background: rgba(16, 10, 26, 0.55);
}

.story-quest-grid,
.story-lore-grid,
.story-enter-grid {
  overflow-x: auto;
  padding-bottom: var(--pt-gap-2xs);
}

.story-quest-grid {
  display: grid;
  grid-template-columns: minmax(calc(var(--gs-u-w) * 10), 1fr) calc(var(--gs-u-w) * 4.5) calc(var(--gs-u-w) * 5.5) minmax(calc(var(--gs-u-w) * 12.5), 1.1fr);
  gap: 0 var(--pt-gap-sm);
  align-items: center;
  font-size: var(--gs-text-xs);
  min-width: min(100%, calc(var(--gs-u-w) * 40));
}

.story-quest-grid__head,
.story-lore-grid__head,
.story-enter-grid__head {
  font-weight: 600;
  color: #f0e8dc;
  padding: var(--pt-gap-xs) 0;
  border-bottom: var(--gs-hairline) solid rgba(210, 165, 95, 0.38);
  margin-bottom: var(--pt-gap-2xs);
}

.story-quest-grid__row,
.story-lore-grid__row,
.story-enter-grid__name,
.story-enter-grid__fn {
  padding: calc(var(--gs-u-h) * 0.38) 0;
  border-bottom: var(--gs-hairline) solid rgba(90, 70, 110, 0.35);
  color: #ebe3d6;
}

.story-quest-grid__name,
.story-lore-grid__name,
.story-enter-grid__name {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.15);
}

.story-quest-grid__name strong,
.story-enter-grid__name strong {
  font-weight: 600;
}

.story-quest-grid__id,
.story-enter-grid__id {
  font-size: var(--gs-text-2xs);
  color: #a89578;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.story-quest-grid__mode {
  font-size: var(--gs-text-2xs);
  color: #c9ab82;
}

.story-quest-grid__indent {
  padding-left: calc(var(--sq-depth, 0) * calc(var(--gs-u-w) * 0.75));
}

.story-quest-grid__flags,
.story-lore-grid__flags {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.story-quest-grid__fn,
.story-lore-grid__fn,
.story-enter-grid__fn {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-2xs);
  justify-content: flex-end;
}

.story-quest-grid__fn button,
.story-lore-grid__fn button,
.story-enter-grid__fn button,
.playtools-story__lore-chapter-actions button {
  font: inherit;
  font-size: var(--gs-text-2xs);
  padding: calc(var(--gs-u-h) * 0.28) var(--pt-gap-xs);
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.42);
  background: rgba(22, 14, 34, 0.85);
  color: #f5ebd9;
  cursor: pointer;
}

.story-quest-grid__fn button:hover,
.story-lore-grid__fn button:hover,
.story-enter-grid__fn button:hover,
.playtools-story__lore-chapter-actions button:hover {
  border-color: rgba(255, 215, 140, 0.55);
}

.story-quest-grid__fn button.story-quest-grid__btn-delete,
.story-lore-grid__fn button.story-quest-grid__btn-delete,
.playtools-story__lore-chapter-actions button.story-quest-grid__btn-delete {
  border-color: rgba(210, 110, 95, 0.48);
}

.story-enter-grid {
  margin-top: var(--pt-gap-xs);
  display: grid;
  grid-template-columns: minmax(calc(var(--gs-u-w) * 11.25), 1fr) auto;
  gap: var(--pt-gap-xs) var(--pt-gap-md);
  align-items: center;
  font-size: var(--gs-text-xs);
  min-width: min(100%, calc(var(--gs-u-w) * 30));
}

.story-enter-grid__head {
  grid-column: 1 / span 2;
}

.playtools-story__lore-chapter {
  margin-bottom: var(--pt-gap-lg);
  padding: var(--pt-gap-md);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(90, 70, 110, 0.38);
  background: rgba(12, 8, 20, 0.45);
}

.playtools-story__lore-chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--pt-gap-sm) var(--pt-gap-md);
  margin-bottom: var(--pt-gap-sm);
}

.playtools-story__lore-chapter-head strong {
  display: block;
  font-weight: 600;
  color: #f0e8dc;
}

.playtools-story__lore-chapter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-2xs);
}

.story-lore-grid {
  display: grid;
  grid-template-columns: minmax(calc(var(--gs-u-w) * 8.75), 1fr) calc(var(--gs-u-w) * 4.5) minmax(calc(var(--gs-u-w) * 10), 0.9fr);
  gap: 0 var(--pt-gap-sm);
  align-items: center;
  font-size: var(--gs-text-xs);
  min-width: min(100%, calc(var(--gs-u-w) * 32.5));
}

/* Story editor — tree, toolbar, cards (DEV) */
.playtools-app--story-editor .playtools__panel-inner {
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-md);
}

.dev-story-flash {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
}

.dev-story-flash--ok {
  border-color: rgba(120, 190, 120, 0.45);
}

.playtools-story__reset-copy {
  margin: 0 0 var(--pt-gap-sm);
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
  line-height: 1.45;
}

.dev-story-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-sm);
  padding: var(--pt-gap-sm);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.28);
  background: rgba(12, 8, 20, 0.55);
}

.dev-story-toolbar__search-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-sm);
  align-items: flex-end;
  justify-content: space-between;
}

.dev-story-toolbar__search {
  flex: 1 1 calc(var(--gs-u-w) * 13.75);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.2);
}

.dev-story-toolbar__search-label {
  font-size: var(--gs-text-2xs);
  color: #c9ab82;
  font-weight: 600;
}

.dev-story-toolbar__input,
.dev-story-toolbar__select {
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--gs-u-h) * 0.35) calc(var(--gs-u-w) * 0.35);
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.35);
  background: rgba(8, 5, 14, 0.85);
  color: #f0e8dc;
  font: inherit;
  font-size: var(--gs-text-xs);
}

.dev-story-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-md);
  align-items: center;
}

.dev-story-toolbar__filter {
  display: flex;
  align-items: center;
  gap: var(--pt-gap-2xs);
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
}

.dev-story-toolbar__check {
  display: flex;
  align-items: center;
  gap: var(--pt-gap-2xs);
  font-size: var(--gs-text-xs);
  color: #d7c6a2;
  cursor: pointer;
}

.dev-story-toolbar__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-sm);
  font-size: var(--gs-text-2xs);
  color: #c9bba8;
}

.dev-story-stat--active {
  color: #9fd4a0;
}

.dev-story-stat--done {
  color: #a89578;
}

.dev-story-empty {
  margin: 0;
  padding: var(--pt-gap-md);
  text-align: center;
  color: #a89578;
  font-size: var(--gs-text-xs);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) dashed rgba(210, 165, 95, 0.25);
}

.dev-story-id {
  font-size: var(--gs-text-2xs);
  color: #a89578;
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dev-story-id-copy {
  border: none;
  background: transparent;
  color: #c9ab82;
  font-size: var(--gs-text-2xs);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.dev-story-status-pill {
  display: inline-flex;
  align-items: center;
  padding: calc(var(--gs-u-h) * 0.12) calc(var(--gs-u-h) * 0.45);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.dev-story-status-pill--none {
  background: rgba(90, 80, 70, 0.35);
  color: #b8aa98;
}

.dev-story-status-pill--active {
  background: rgba(70, 130, 90, 0.35);
  color: #b8f0c8;
}

.dev-story-status-pill--completed {
  background: rgba(100, 100, 110, 0.35);
  color: #c8c8d0;
}

.dev-story-seq-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gs-u-w) * 1.15);
  height: calc(var(--gs-u-h) * 1.15);
  margin-right: calc(var(--gs-u-w) * 0.15);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  border: var(--gs-hairline) solid rgba(120, 110, 95, 0.45);
  color: #a89578;
  background: rgba(20, 16, 28, 0.8);
  vertical-align: middle;
}

/* Dev quest tree — hierarchical, left-aligned rows, actions on the right */
.dev-q-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}

.dev-q-tree--nested {
  margin-top: 0;
  padding-left: var(--pt-gap-sm);
  border-left: calc(var(--gs-u-w) * 0.125) solid rgba(210, 165, 95, 0.22);
}

.dev-q-tree__item + .dev-q-tree__item {
  margin-top: var(--pt-gap-2xs);
}

.dev-q-branch__summary {
  cursor: pointer;
  list-style: none;
}

.dev-q-branch__summary::-webkit-details-marker {
  display: none;
}

.dev-q-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--pt-gap-md);
  width: 100%;
  padding: calc(var(--gs-u-h) * 0.38) var(--pt-gap-sm);
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(90, 70, 110, 0.4);
  background: rgba(14, 10, 22, 0.55);
  box-sizing: border-box;
}

.dev-q-line--active {
  border-color: rgba(100, 180, 120, 0.45);
}

.dev-q-line--completed {
  opacity: 0.85;
}

.dev-q-line--blocked {
  opacity: 0.72;
}

.dev-q-line__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pt-gap-2xs);
  min-width: 0;
  padding-left: calc(var(--sq-depth, 0) * calc(var(--gs-u-w) * 0.875));
}

.dev-q-line__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--gs-u-w) * 1.15);
  height: calc(var(--gs-u-h) * 1.15);
  border-radius: var(--gs-radius-md);
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  border: var(--gs-hairline) solid rgba(120, 110, 95, 0.45);
  color: #a89578;
  background: rgba(20, 16, 28, 0.8);
  flex-shrink: 0;
}

.dev-q-line__kind {
  flex-shrink: 0;
  font-size: var(--gs-text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c9ab82;
}

.dev-q-line__title {
  font-weight: 600;
  color: #f0e8dc;
  min-width: 0;
}

.dev-q-line__status {
  flex-shrink: 0;
  font-size: var(--gs-text-2xs);
  color: #a89578;
}

.dev-q-line--active .dev-q-line__status {
  color: #8fd4a8;
}

.dev-q-line--completed .dev-q-line__status {
  color: #b8b0a4;
}

.dev-q-line__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-2xs);
  justify-content: flex-end;
  flex-shrink: 0;
}

.dev-q-line__actions button {
  font: inherit;
  font-size: var(--gs-text-2xs);
  padding: calc(var(--gs-u-h) * 0.28) var(--pt-gap-xs);
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.42);
  background: rgba(22, 14, 34, 0.85);
  color: #f5ebd9;
  cursor: pointer;
  white-space: nowrap;
}

.dev-q-line__actions button:hover:not(:disabled) {
  border-color: rgba(255, 215, 140, 0.55);
}

.dev-q-line__actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dev-q-line__btn-delete {
  border-color: rgba(210, 110, 95, 0.48) !important;
}

.dev-ix-panel {
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-md);
  width: 100%;
  text-align: left;
}

.dev-ix-branch > .dev-q-tree--nested,
.dev-ix-branch > .dev-ix-beats {
  margin: 0 0 var(--pt-gap-2xs);
}

.dev-ix-quest {
  cursor: pointer;
  list-style: none;
}

.dev-ix-quest::-webkit-details-marker {
  display: none;
}

.dev-ix-quest__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pt-gap-2xs);
  min-width: 0;
  padding: calc(var(--gs-u-h) * 0.38) var(--pt-gap-sm);
  padding-left: calc(var(--pt-gap-sm) + var(--sq-depth, 0) * calc(var(--gs-u-w) * 0.875));
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(90, 70, 110, 0.4);
  background: rgba(14, 10, 22, 0.55);
}

.dev-ix-quest__beats {
  font-size: var(--gs-text-2xs);
  color: #a89578;
}

.dev-ix-quest__beats::before {
  content: "·";
  margin-right: calc(var(--gs-u-w) * 0.2);
}

.dev-ix-beats {
  list-style: none;
  margin: var(--pt-gap-2xs) 0 0;
  padding: 0 0 0 var(--pt-gap-md);
  border-left: calc(var(--gs-u-w) * 0.125) solid rgba(210, 165, 95, 0.18);
}

.dev-q-line--beat {
  margin-top: var(--pt-gap-2xs);
  padding: calc(var(--gs-u-h) * 0.32) var(--pt-gap-sm);
}

.dev-ix-beat__label {
  padding-left: 0 !important;
}

.dev-ix-beat__kind {
  font-weight: 600;
  color: #ebe3d6;
}

.dev-ix-ungrouped__head {
  margin: 0 0 var(--pt-gap-xs);
  font-size: var(--gs-text-xs);
  font-weight: 600;
  color: #c9ab82;
}

.dev-story-lore-chapter__actions,
.dev-story-lore-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-2xs);
  margin-bottom: var(--pt-gap-sm);
}

.dev-story-action {
  padding: calc(var(--gs-u-h) * 0.32) calc(var(--gs-u-w) * 0.45);
  border-radius: var(--gs-radius-xs);
  border: var(--gs-hairline) solid rgba(210, 165, 95, 0.35);
  background: rgba(18, 11, 26, 0.85);
  color: var(--gs-text-nav);
  font: inherit;
  font-size: var(--gs-text-2xs);
  font-weight: 600;
  cursor: pointer;
}

.dev-story-action:hover:not(:disabled) {
  border-color: var(--gs-border-gold-accent);
  color: var(--gs-text-nav-hover);
}

.dev-story-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dev-story-action--start {
  border-color: rgba(100, 160, 120, 0.45);
}

.dev-story-action--complete {
  border-color: rgba(120, 150, 200, 0.45);
}

.dev-story-action--enter {
  border-color: rgba(180, 140, 80, 0.5);
}

.dev-story-action--delete {
  border-color: rgba(180, 80, 80, 0.45);
  color: #f0b8b8;
}

.dev-story-interactions {
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-md);
}

.dev-story-interactions__group {
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(90, 70, 110, 0.4);
  background: rgba(14, 10, 22, 0.55);
  overflow: hidden;
}

.dev-story-interactions__group-head {
  padding: var(--pt-gap-sm);
  border-bottom: var(--gs-hairline) solid rgba(90, 70, 110, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-2xs);
  align-items: baseline;
}

.dev-story-interactions__group-head--muted {
  color: #a89578;
  font-size: var(--gs-text-xs);
}

.dev-story-interactions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dev-story-interactions__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--pt-gap-sm);
  border-bottom: var(--gs-hairline) solid rgba(90, 70, 110, 0.25);
}

.dev-story-interactions__row:last-child {
  border-bottom: none;
}

.dev-story-interactions__info {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.15);
  min-width: min(100%, calc(var(--gs-u-w) * 15));
  flex: 1 1 calc(var(--gs-u-w) * 15);
}

.dev-story-interactions__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-2xs);
  align-items: center;
}

.dev-story-lore {
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-sm);
}

.dev-story-lore__summary {
  margin: 0;
  font-size: var(--gs-text-xs);
  color: #c9bba8;
}

.dev-story-lore-chapter {
  border-radius: var(--gs-radius-sm);
  border: var(--gs-hairline) solid rgba(90, 70, 110, 0.4);
  background: rgba(14, 10, 22, 0.55);
}

.dev-story-lore-chapter__summary {
  cursor: pointer;
  list-style: none;
  padding: var(--pt-gap-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-sm);
  align-items: center;
  justify-content: space-between;
}

.dev-story-lore-chapter__summary::-webkit-details-marker {
  display: none;
}

.dev-story-lore-chapter__head {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gs-u-h) * 0.15);
}

.dev-story-lore-chapter__progress {
  display: flex;
  align-items: center;
  gap: var(--pt-gap-2xs);
  min-width: calc(var(--gs-u-w) * 8.75);
}

.dev-story-lore-chapter__meter {
  flex: 1 1 calc(var(--gs-u-w) * 5);
  height: calc(var(--gs-u-h) * 0.889);
  accent-color: #c9ab82;
}

.dev-story-lore-chapter__count {
  font-size: var(--gs-text-2xs);
  color: #c9bba8;
  font-variant-numeric: tabular-nums;
}

.dev-story-lore-chapter__body {
  padding: 0 var(--pt-gap-sm) var(--pt-gap-sm);
}

.dev-story-lore-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pt-gap-2xs);
}

.dev-story-lore-page {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-sm);
  align-items: center;
  justify-content: space-between;
  padding: var(--pt-gap-xs);
  border-radius: var(--gs-radius-xs);
  background: rgba(8, 5, 14, 0.45);
}

.dev-story-lore-page--unlocked {
  background: rgba(40, 60, 45, 0.35);
}

.dev-story-lore-page__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pt-gap-2xs);
  align-items: center;
  flex: 1 1 calc(var(--gs-u-w) * 12.5);
}