/* =========================================================================
   ESSENCE GAMES — Component styles (v0.8.0)
   Requires a style + base: styles/<name>/style.css and styles/base.css
   (or, legacy, handoff/colors_and_type.css, which maps its tokens onto --eg-*).
   Floating panels (modal, toast, connection) paint --eg-surface over --eg-bg:
   a translucent surface (Glass) would otherwise let the scrim show through.
   Rules: docs/components.md. Dark first; no backdrop-blur; 80ms linear motion.
   ========================================================================= */

/* ---- 1. Action row -------------------------------------------------------
   Backward / negative action FIRST in markup (bottom-left); forward / confirm
   LAST (bottom-right). Under 400px: stacked full width, reversed, so the
   forward action is on top and the backward / destructive one is last and at
   the bottom. */
.eg-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  flex-wrap: wrap;
}
.eg-actions > :last-child:not(:first-child) {
  margin-left: auto;
}
.eg-actions--stacked {
  flex-direction: column-reverse;
}
.eg-actions--stacked > * {
  width: 100%;
  margin-left: 0 !important;
}
@media (max-width: 400px) {
  .eg-actions {
    flex-direction: column-reverse;
  }
  .eg-actions > * {
    width: 100%;
    margin-left: 0 !important;
  }
}
/* Forward actions that travel together on the right (Save + Rematch, Step away + Concede). */
.eg-actions__fwd {
  display: inline-flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Inside a modal the buttons share the row instead of wrapping one onto a second line (owner's tablet shot
   2026-09-13: "Back to menu" alone, Save Log + Rematch on the next line). Under 400 px the row stacks as usual:
   the forward pair on top, the back action last. */
.eg-modal .eg-actions > .eg-btn,
.eg-modal .eg-actions > .eg-actions__fwd {
  flex: 1 1 auto;
  min-width: 0;
}
.eg-modal .eg-actions > .eg-actions__fwd {
  display: flex;
  flex-wrap: nowrap;
}
.eg-modal .eg-actions__fwd > .eg-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* ---- 2. Modal ------------------------------------------------------------ */
.eg-scrim {
  position: fixed;
  inset: 0;
  background: var(--eg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  z-index: 50;
}
.eg-modal {
  background: linear-gradient(var(--eg-surface), var(--eg-surface)), var(--eg-bg);
  border: 1px solid var(--eg-border);
  border-radius: var(--r-lg);
  box-shadow: var(--eg-shadow);
  padding: var(--sp-10);
  width: 100%;
  max-width: 460px;
  max-height: 90svh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  outline: none;
}
.eg-modal:focus-visible {
  border-color: var(--eg-accent-2);
}
.eg-modal__title {
  font: var(--fw-strong) var(--fz-h3) / var(--lh-tight) var(--eg-font-display);
  color: var(--eg-text-strong);
  margin: 0;
  text-align: center;
}
.eg-modal__body {
  color: var(--eg-text);
}

/* ---- 3. Toasts ----------------------------------------------------------- */
.eg-toasts {
  position: fixed;
  top: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  z-index: 200;
  pointer-events: none;
  max-width: min(90vw, 26rem);
  width: max-content;
}
.eg-toast {
  background: linear-gradient(var(--eg-surface), var(--eg-surface)), var(--eg-bg);
  border: 1px solid var(--eg-border);
  border-radius: var(--r-md);
  padding: 0.6em 1em;
  text-align: center;
  color: var(--eg-text);
  box-shadow: var(--eg-shadow);
  font-size: var(--fz-body);
}
.eg-toast--success {
  border-color: var(--eg-success);
}
.eg-toast--error {
  border-color: var(--eg-danger);
  background: color-mix(in srgb, var(--eg-danger-fill) 22%, var(--eg-surface));
  color: var(--eg-danger);
}

/* ---- 4. Turn timer ------------------------------------------------------- */
.eg-timer {
  font-family: var(--eg-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--eg-text);
  font-size: var(--fz-timer-safe);
  line-height: 1;
}
.eg-timer--warn {
  color: var(--eg-warn);
  font-weight: var(--fw-strong);
  font-size: var(--fz-timer-warn);
}
.eg-timer--danger {
  color: var(--eg-danger);
  font-weight: var(--fw-strong);
  font-size: var(--fz-timer-danger);
}
.eg-timer--compact {
  font-size: var(--fz-body);
}
.eg-timer--compact.eg-timer--warn {
  font-size: var(--fz-btn-default);
}
.eg-timer--compact.eg-timer--danger {
  font-size: var(--fz-timer-safe);
}

/* ---- 5. Settings screen -------------------------------------------------- */
.eg-settings {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding-bottom: var(--sp-12);
}
.eg-settings__title {
  margin: 0;
  text-align: center;
}
.eg-settings__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eg-settings__heading {
  font: var(--fw-strong) var(--fz-h5) / var(--lh-snug) var(--eg-font-body);
  color: var(--eg-text-strong);
  margin: 0;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--eg-border);
}
.eg-settings__row {
  display: grid;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 44px;
}
.eg-settings__row--slider {
  grid-template-columns: 7.5em minmax(0, 1fr) 3.5em;
}
.eg-settings__row--slider input {
  min-width: 0;
  width: 100%;
  accent-color: var(--eg-accent);
}
.eg-settings__row--toggle {
  grid-template-columns: auto 1fr;
}
.eg-settings__row--toggle input {
  accent-color: var(--eg-accent);
  width: 20px;
  height: 20px;
}
.eg-settings__row--select,
.eg-settings__row--keybind {
  grid-template-columns: 1fr auto;
}
.eg-settings__value {
  text-align: right;
  color: var(--eg-text-muted);
  font-size: var(--fz-caption);
  font-variant-numeric: tabular-nums;
}
.eg-settings__value--mute {
  color: var(--eg-danger);
}
.eg-settings__detail {
  font-size: var(--fz-caption);
  margin: -2px 0 var(--sp-2);
}
.eg-settings__bind {
  font-family: var(--eg-font-mono);
  min-width: 120px;
}
.eg-settings__version {
  position: absolute;
  right: 0;
  bottom: 0;
}
@media (max-width: 400px) {
  .eg-settings__row--slider {
    grid-template-columns: 5.5em minmax(0, 1fr) 3.2em;
  }
}

/* ---- 6. Menu screen ------------------------------------------------------
   Hero (or title) on top; one column as wide as the hero; a pair shares a row
   at 45% each so a conditional button never changes the height of the menu. */
.eg-menu {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  width: 100%;
  min-height: 100%;
  padding: var(--sp-8);
}
/* 44px is this library's own button floor (see .eg-btn min-height below) and
   MOBILE_INTENT section 4. These were 40px, i.e. the design system shipped a
   corner control under its own published floor, which is why Brother rebuilt
   its gear by hand at 44 instead of using this class. */
.eg-menu__gear,
.eg-room__gear {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.eg-menu__gear {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 1;
}
.eg-menu__account {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fz-caption);
}
.eg-menu__hero {
  width: min(100%, 520px);
}
.eg-menu__hero > * {
  width: 100%;
  border-radius: 16px;
  display: block;
}
.eg-menu__title {
  font: var(--fw-strong) clamp(20px, 10vw, var(--fz-h1)) / var(--lh-tight) var(--eg-font-display);
  color: var(--eg-accent);
  margin: var(--sp-12) 0 0;
  text-align: center;
}
.eg-menu__banners {
  width: min(100%, 520px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eg-menu__column {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: min(100%, 520px);
}
.eg-menu__column > .eg-menu__btn {
  width: 100%;
}
.eg-menu__pair {
  display: grid;
  grid-template-columns: 45fr 45fr;
  justify-content: space-between;
  column-gap: 10%;
}
.eg-menu__pair .eg-menu__btn {
  min-width: 0;
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.72rem, 3.4vw, 1rem);
}
.eg-menu__footer {
  width: min(100%, 520px);
  text-align: center;
  color: var(--eg-text-muted);
  font-size: var(--fz-caption);
}
.eg-menu__version {
  margin: auto 0 0;
}

/* ---- 7. Lobby list ------------------------------------------------------- */
.eg-lobbies {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-8);
}
.eg-lobbies__title,
.eg-room__title {
  margin: 0;
  text-align: center;
  font: var(--fw-strong) var(--fz-h3) / var(--lh-tight) var(--eg-font-display);
  color: var(--eg-accent);
}
.eg-lobbies__code {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.eg-lobbies__code-label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 160px;
  color: var(--eg-text-muted);
  font-size: var(--fz-caption);
}
.eg-lobbies__code-input {
  text-transform: uppercase;
  font-family: var(--eg-font-mono);
  letter-spacing: 0.2em;
}
.eg-lobbies__empty {
  text-align: center;
  margin: var(--sp-6) 0;
}
.eg-lobbies__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eg-lobby-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  background: var(--eg-surface);
  border: 1px solid var(--eg-border);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
}
.eg-lobby-card--rejoin {
  border-color: var(--eg-accent);
}
.eg-lobby-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eg-lobby-card__title {
  color: var(--eg-text-strong);
}
.eg-lobby-card__meta,
.eg-lobby-card__badges {
  font-size: var(--fz-caption);
}
.eg-lobby-card__full {
  color: var(--eg-warn);
  font-size: var(--fz-caption);
}
.eg-error {
  color: var(--eg-danger);
  margin: 0;
}

/* ---- 8. Lobby room ------------------------------------------------------- */
.eg-room {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--sp-8);
  /* The ☰ menu (v0.7.0) sits in this box's corner. */
  position: relative;
}
/* Keep the centred title clear of the 44 px corner button on both sides. */
.eg-room--menu .eg-room__title {
  padding-inline: 52px;
}
.eg-room__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.eg-room__code strong {
  font-family: var(--eg-font-mono);
  font-size: 32px;
  letter-spacing: 0.2em;
  color: var(--eg-accent-2);
}
.eg-room__settings {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-right: 48px;
  min-height: 40px;
}
.eg-room__gear {
  position: absolute;
  top: 0;
  right: 0;
}
.eg-room__gear--open {
  border-color: var(--eg-accent-2);
  color: var(--eg-accent-2);
}
.eg-room__advanced {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--eg-border);
}
.eg-room__roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eg-room__row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 36px;
}
.eg-room__row--away .eg-room__name {
  color: var(--eg-text-muted);
}
.eg-room__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot, var(--eg-text-muted));
  flex: none;
}
.eg-room__dot--on {
  background: var(--dot, var(--eg-success));
}
.eg-room__name {
  color: var(--eg-text-strong);
}
.eg-room__note {
  font-size: var(--fz-caption);
  flex-basis: 100%;
  /* Last in the row so the kick button stays on the name line (Lumen found it wrapping under the note). */
  order: 1;
}
.eg-room__kick {
  margin-left: auto;
}
.eg-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: var(--fz-hint);
  background: var(--eg-surface-2);
  border: 1px solid var(--eg-border);
  color: var(--eg-text);
}
.eg-badge--good {
  background: color-mix(in srgb, var(--eg-success) 25%, transparent);
  border-color: var(--eg-success);
  color: var(--eg-text-strong);
}
.eg-room__addbot {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}
.eg-room__seats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.eg-room__hint {
  margin: 0;
  font-size: var(--fz-caption);
}

/* ---- 9. Connection state ------------------------------------------------- */
.eg-conn-overlay {
  position: fixed;
  inset: 0;
  background: var(--eg-overlay);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: var(--sp-8);
}
.eg-conn-panel {
  background: linear-gradient(var(--eg-surface), var(--eg-surface)), var(--eg-bg);
  border: 1px solid var(--eg-border);
  border-radius: var(--r-lg);
  padding: var(--sp-12);
  min-width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
}
.eg-conn__title {
  margin: 0;
  font: var(--fw-strong) var(--fz-h3) / var(--lh-tight) var(--eg-font-display);
  color: var(--eg-accent);
}
.eg-conn__text {
  margin: 0;
  color: var(--eg-text-strong);
}
.eg-conn__text--bad {
  color: var(--eg-danger);
}
.eg-conn__hint {
  margin: 0;
  font-size: var(--fz-caption);
}
.eg-conn__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-3);
}
.eg-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--eg-text-muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: eg-spin 0.8s linear infinite;
}
@keyframes eg-spin {
  to {
    transform: rotate(360deg);
  }
}
.eg-conn-pill {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--eg-surface), var(--eg-surface)), var(--eg-bg);
  border: 1px solid var(--eg-danger);
  box-shadow: var(--eg-shadow);
  font-size: var(--fz-caption);
  max-width: calc(100vw - 16px);
}

/* ---- 10. Leave choice / 11. Game over ------------------------------------ */
.eg-gameover {
  text-align: center;
  border-color: var(--eg-accent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--eg-accent) 25%, transparent);
  max-width: 520px;
}
.eg-gameover__title {
  margin: 0;
  font: var(--fw-strong) clamp(1.5rem, 8vw, var(--fz-h1)) / var(--lh-tight) var(--eg-font-display);
  color: var(--eg-accent);
  overflow-wrap: anywhere;
}
.eg-gameover__reason {
  margin: 0;
}

/* ── 12. Gear button ──────────────────────────────────────────────────────
   44px is the library floor (MOBILE_INTENT section 4) and not negotiable per
   instance: a corner control is the one a thumb reaches for. See DN-8. */
.eg-gear {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.eg-gear--corner {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 1;
}
.eg-gear--on {
  background: var(--eg-accent-fill);
  color: var(--eg-on-accent);
  border-color: var(--eg-accent-2);
}
.eg-gear:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ── 13. In-game menu ─────────────────────────────────────────────────── */
.eg-gamemenu__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: min(280px, 80vw);
}
.eg-gamemenu__row {
  width: 100%;
}

/* ── 14. Feedback form ────────────────────────────────────────────────── */
.eg-feedback {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.eg-feedback__title {
  margin: 0;
  font: var(--fw-strong) var(--fz-h2) / var(--lh-tight) var(--eg-font-display);
  color: var(--eg-accent);
}
.eg-feedback__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eg-feedback__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--eg-accent);
  font-size: 14px;
}
.eg-feedback__req {
  color: var(--eg-danger);
  margin-left: 2px;
}
.eg-feedback__readout {
  color: var(--eg-text);
  font-variant-numeric: tabular-nums;
}
.eg-feedback__detail {
  margin: 0;
  color: var(--eg-text-muted);
  font-size: 13px;
}
/* Segmented choices. Stacks under 400px: the Rust original did and the port
   lost it, which broke at the owner's Fold width. */
.eg-feedback__choices {
  display: flex;
  gap: var(--sp-2);
}
.eg-feedback__choice {
  flex: 1;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  color: var(--eg-text-strong);
  font: inherit;
  cursor: pointer;
}
.eg-feedback__choice--on {
  background: var(--eg-accent-fill);
  border: 1.5px solid var(--eg-accent-2);
  color: var(--eg-on-accent);
}
@media (max-width: 400px) {
  .eg-feedback__choices {
    flex-direction: column;
  }
}
/* Themed rather than left to the OS. The browser default renders a bright blue
   track that belongs to no design system, which read as unfinished next to the
   gold headings (owner 2026-09-20: "Feedback form format needs cleanup"). */
.eg-feedback__slider {
  width: 100%;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
}
.eg-feedback__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--eg-surface-2);
  border: 1px solid var(--eg-border);
}
.eg-feedback__slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--eg-surface-2);
  border: 1px solid var(--eg-border);
}
.eg-feedback__slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--eg-accent);
  border: 1px solid var(--eg-accent-2);
  /* Centre the thumb on the 6px track: (24 - 6) / 2, minus the track border. */
  margin-top: -10px;
}
.eg-feedback__slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 1px solid var(--eg-accent-2);
  border-radius: 50%;
  background: var(--eg-accent);
}
/* The picker is its own action, so it reads as a button rather than as a row
   hanging off a heading. Full width, and over the 44px floor. */
.eg-feedback__pick {
  width: 100%;
  min-height: 44px;
}
.eg-feedback__text {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
  color: var(--eg-text);
  font: inherit;
}
.eg-feedback__attachments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
/* Picked extras are a list with an undo, not checkboxes: choosing one in the
   host's picker was already the decision to attach it (engine DN-26). */
.eg-feedback__extras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eg-feedback__extra {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 44px;
}
.eg-feedback__attachment {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 44px;
  cursor: pointer;
}
/* The hit target is the full 44px floor; the drawn box is smaller, which is
   what MOBILE_INTENT section 4 asks for (a 48px target, a control that need
   not be). A 20px native checkbox would have been a control under the floor,
   the exact bug DN-8 fixed on the gear. */
.eg-feedback__attachment input {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  margin: 0;
  flex: none;
  display: grid;
  place-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.eg-feedback__attachment input::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--eg-border);
  background: var(--eg-surface-2);
}
.eg-feedback__attachment input:checked::before {
  background: var(--eg-accent-fill);
  border-color: var(--eg-accent-2);
  box-shadow: inset 0 0 0 3px var(--eg-surface-2);
}
.eg-feedback__attachment-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  gap: 2px;
}
.eg-feedback__attachment-label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  color: var(--eg-text);
}
.eg-feedback__size {
  color: var(--eg-text-muted);
  font-variant-numeric: tabular-nums;
}
/* No sticky action row here, deliberately. It was tried and reverted: the
   host modal already scrolls (max-height 90svh) so Submit is always
   reachable, and sticking the row put it over the fields scrolling beneath,
   which Brother's screens audit flagged as overlapping text at three
   viewports. MOBILE_INTENT's no-overlap rule outranks keeping the commit in
   view, and an opaque background hiding the collision does not make it not a
   collision. */
.eg-feedback__images {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eg-feedback__image {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
}
.eg-feedback__image img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--eg-border);
  flex: none;
}
.eg-feedback__image-name {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: var(--eg-text);
  overflow-wrap: anywhere;
}
.eg-feedback__done {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.eg-feedback__thanks {
  margin: 0;
  color: var(--eg-success);
  font-size: 22px;
}
.eg-feedback__muted {
  margin: 0;
  color: var(--eg-text-muted);
}
.eg-feedback__warn {
  margin: 0;
  color: var(--eg-warn);
}
.eg-feedback__error {
  margin: 0;
  color: var(--eg-danger);
}