/* The save indicator sits above the form, right-aligned, on its own row. It
   used to be an inline pill inside the grey paragraph below the form — the one
   element on the page that changes as you type, placed where you look least.

   The row keeps its height whether or not the pill has a background, so the
   form does not shift down the first time a save succeeds. */
.save-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 1.75rem;
  margin-bottom: var(--space-2);
  padding: 0 var(--space-1);
}

.save-status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  color: var(--ink-soft);
}

.save-status.is-saving-ok {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.save-status.is-saving-error {
  color: var(--danger);
  background: var(--danger-soft);
}

/* On a phone, an empty row is too expensive to keep.

   The status says nothing until the first save — deliberately, since a status
   line reporting no status is furniture. But the row above still reserved
   1.75rem plus its margin for it, and with the header's own spacing that came
   to 56px of blank screen between the header and the first field. On a 640px
   phone that is nearly a tenth of the fold, spent on nothing, every visit.

   The trade: the reservation existed to stop the form jumping when
   "შენახულია" first appears, and collapsing the row brings that shift back —
   once, about 20px, on the first keystroke. That is the better side of the
   trade against 56px of permanent emptiness, but it is a trade, and this note
   is here so the next person knows which way it went rather than rediscovering
   it as a bug.

   Desktop keeps the reservation: there, the space costs nothing worth having. */
@media screen and (max-width: 600px) {
  .save-row {
    min-height: 0;
    margin-bottom: 0;
  }

  /* :empty rather than :has() — this needs to work on whatever phone a
     seafarer already owns, and :has() is a good deal newer than :empty. */
  .save-status:empty {
    display: none;
  }
}