/* Guest Feedback venue layout. Controls, tables, alerts and metrics are gk-* components and the
   gk-admin-native base; this file only places them, with spacing tokens. */
.gf-workspace {
  --page-header-mb: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  min-width: 0;
}

.gf-workspace [hidden] {
  display: none;
}

/* A section with nothing to show in this view takes no gap. */
.gf-section:not(:has(> :not([hidden], .gf-data:empty))) {
  display: none;
}

.gf-section {
  container: guest-feedback / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-content: start;
  min-width: 0;
}


.gf-section > h2,
.gf-section > gk-toolbar > h2,
.gf-group > h2 {
  margin: 0;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
}

.gf-group > h3,
.gf-part > h3 {
  margin: 0;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
}

.gf-note {
  margin: 0;
  color: var(--text-muted);
}

.gf-data {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4xl);
  min-width: 0;
}

.gf-data:empty {
  display: none;
}


.gf-part {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  min-width: 0;
}

.gf-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-lg);
  margin: 0;
}

.gf-form > gk-field {
  flex: 1 1 14rem;
}

.gf-form--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.gf-form--grid > gk-field {
  max-width: none;
}

.gf-form--grid > .gf-actions {
  grid-column: 1 / -1;
}

.gf-form--stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: var(--space-2xl);
}

/* Zero specificity, so a field's recipe width (admin-field-w-*) wins over this default. */
:where(.gf-form--stack > gk-field),
.gf-form--stack > .gf-destinations {
  width: 100%;
  max-width: none;
}

.gf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
}

.gf-actions > form {
  margin: 0;
}

.gf-actions > gk-field {
  flex: 1 1 20rem;
  min-width: 0;
}

.gf-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.gf-destinations {
  display: grid;
  gap: var(--space-lg);
}

.gf-destination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  align-items: end;
  gap: var(--space-lg);
}

.gf-result {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.gf-result:empty {
  display: none;
}

.gf-preview-text {
  margin: 0;
  padding: var(--space-2xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--primary-surface);
  font: inherit;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.gf-survey-preview {
  display: block;
  width: 100%;
  min-height: 38rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
}

@container guest-feedback (max-width: 720px) {
  .gf-form {
    align-items: stretch;
  }

  .gf-form > gk-field {
    max-width: none;
  }

  .gf-destination {
    grid-template-columns: minmax(0, 1fr);
  }

  .gf-actions > gk-button,
  .gf-form > gk-button {
    flex: 1 1 100%;
  }
}

/* A single choice does not need the full page width. */
:where(.gf-form--stack > gk-field:has(select)) {
  max-width: var(--control-width-lg);
}

/* Settings sections are ruled apart by their own recipe, so their wrapper takes no gap, and none when empty. */
.gf-settings {
  container: guest-feedback / inline-size;
  display: block;
  min-width: 0;
}

.gf-settings:not(:has(> :not([hidden]))) {
  display: none;
}

.gf-form--stack > .admin-settings-section__save {
  justify-self: stretch;
}

/* The adaptive layout top-aligns every cell, which leaves a list's 44px header text at the top edge. Recipe gap in
 * gk-data-table (list with adaptive): the header should stay centred. */
.gf-workspace gk-data-table[list][adaptive] th {
  vertical-align: middle;
}

/* The survey forms sit below the library list. */
#program-actions {
  margin-top: var(--space-3xl);
}

.gf-workspace gk-modal > :last-child {
  margin-bottom: var(--space-2xl);
}