/* Save state - the "Saved 3:41 PM" readout on pages that save as you work.
   See app/static/js/components/savestate.js. A word and a static glyph, like
   every other status in the app: nothing spins, nothing pulses. */

.save-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 24px;
  font-size: var(--t-xs);
  color: var(--ink-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.save-state-icon { flex: 0 0 auto; }

.save-state[data-state="unsaved"] { color: var(--data-counter); }
.save-state[data-state="offline"] { color: var(--warning); font-weight: 600; }
.save-state[data-state="failed"],
.save-state[data-state="conflict"] { color: var(--error); font-weight: 600; }

.save-state-short { display: none; }

.save-state-action {
  min-height: 24px;
  padding: 0 var(--space-1);
  font-size: var(--t-xs);
  font-weight: 600;
}

@media (max-width: 540px) {
  /* A glyph and one word; the action word stays, as the button. The full
     text is only hidden from sight: the short word is aria-hidden, so the
     text is what a screen reader reads. */
  .save-state-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .save-state-short { display: inline; }
}