.reader-navigation-status[data-save-state] {
  display: flex;
  justify-content: flex-end;
}

/* Save retries alternate Saving/Offline without user input. Keep the Retry
   button's footprint so scroll anchoring cannot move the page or wake the
   scroll-driven menu. The hidden control stays invisible and unfocusable. */
.reader-navigation-status:is([data-save-state="saved"], [data-save-state="saving"]) .reader-navigation-retry[hidden] {
  display: inline-block !important;
  visibility: hidden;
  pointer-events: none;
}

.reader-navigation-status[data-save-state] .reader-navigation-message::before {
  content: "";
  display: inline-block;
  width: 0.58rem;
  height: 0.58rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.45rem currentColor;
}

.reader-navigation-status[data-save-state="saved"] {
  color: var(--fg);
}

.reader-navigation-status[data-save-state="saving"] {
  color: var(--accent);
}

.reader-navigation-status[data-save-state="offline"],
.reader-navigation-status[data-save-state="maintenance"] {
  color: #ffd15c;
}

.reader-navigation-status[data-save-state="conflict"],
.reader-navigation-status[data-save-state="storage_error"] {
  color: #ff7777;
}

.reader-conflict-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.reader-conflict-choice {
  min-height: 36px;
  padding: 0.35rem 0.65rem;
  border: 2px solid currentColor;
  background: var(--panel);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.reader-conflict-choice:disabled {
  cursor: wait;
  opacity: 0.55;
}

.reader-conflict-choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .reader-navigation-status[data-save-state] {
    align-items: flex-start;
    justify-content: flex-start;
  }
}