/* Shared native <dialog> shell — opt in on markup; compose with .brass-panel / .ornate-panel.
 * See docs/frontend-design-patterns.md — Game dialogs; catalog docs/frontend-renderers.md.
 *
 * Size to content. Do not clamp height or invent scroll regions on the shell —
 * UA dialog defaults (max-height + overflow:auto) are what create cramped scrollbars.
 */

.game-dialog {
  /* Room for ornate corner overhang outside the panel box. */
  padding: calc(var(--gs-u-h) * 0.55);
  border: none;
  background: transparent;
  color: var(--gs-text-ui);
  width: max-content;
  height: fit-content;
  max-width: none;
  max-height: none;
  overflow: visible;
}

.game-dialog::backdrop {
  background: var(--gs-scrim-heavy);
}

/* Preferred panel widths only — never a height clamp. */
.game-dialog--sm .game-dialog__panel {
  width: calc(var(--gs-u-w) * 36);
}

.game-dialog--lg .game-dialog__panel,
.game-dialog__panel--wide {
  width: calc(var(--gs-u-w) * 52);
}

/* Content stack inside the chrome panel (same node as brass/ornate when possible). */
.game-dialog__panel {
  display: grid;
  gap: calc(var(--gs-u-h) * 1.2);
  padding: calc(var(--gs-u-h) * 2.2) calc(var(--gs-u-w) * 2.2);
  width: calc(var(--gs-u-w) * 48);
  box-sizing: border-box;
  overflow: visible;
}

/* Short prompt dialogs (rename, confirm) — center label + field text. */
.game-dialog__panel--center {
  justify-items: center;
  text-align: center;
}

.game-dialog__panel--center .game-dialog__field {
  text-align: center;
}

.game-dialog__title {
  margin: 0;
  font-size: var(--gs-text-lg);
  font-weight: 700;
  color: var(--gs-text-bright);
}

.game-dialog__label {
  font-size: var(--gs-text-sm);
  color: var(--gs-text-secondary);
}

.game-dialog__field {
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--gs-u-h) * 0.7) calc(var(--gs-u-w) * 0.7);
  border: var(--gs-hairline) solid var(--gs-border-gold-bright-medium);
  border-radius: var(--gs-radius-md);
  background: var(--gs-panel-bg-dark);
  color: var(--gs-text-ui);
  font: inherit;
  font-size: var(--gs-text-md);
  line-height: 1.45;
}

textarea.game-dialog__field {
  min-height: calc(var(--gs-u-h) * 28);
  resize: vertical;
}

.game-dialog__error {
  margin: 0;
  font-size: var(--gs-text-sm);
  color: var(--gs-text-error);
}