/* ═══════════════════════════════════════════════════════════════════
   OWLMARK STUDIO — SAVE STATUS
   Companion stylesheet to owlmark-save-status.js.
   Quiet when all is well, unmistakable when it is not.
   ═══════════════════════════════════════════════════════════════════ */

.om-savestat{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  min-height:30px;padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(250,247,239,.16);
  background:rgba(250,247,239,.06);
  color:rgba(250,247,239,.78);
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.7rem;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.om-savestat[hidden]{display:none !important}
.om-ss-ic{display:flex;flex:0 0 13px}
.om-ss-ic svg{width:13px;height:13px}

.om-savestat.tone-ok{
  color:#9FD8AE;border-color:rgba(120,200,140,.3);background:rgba(90,180,120,.12);
}
.om-savestat.tone-warn{
  color:#EBCB7C;border-color:rgba(216,177,92,.36);background:rgba(201,154,61,.15);
}
.om-savestat.tone-bad{
  color:#F3B3AC;border-color:rgba(214,110,96,.42);background:rgba(190,70,55,.2);
}
.om-savestat.tone-busy .om-ss-ic svg{animation:om-ss-spin .9s linear infinite}
@keyframes om-ss-spin{to{transform:rotate(360deg)}}

body.lang-ar .om-savestat{font-family:'Cairo',system-ui,sans-serif;letter-spacing:0}

/* Narrow windows: the dot of colour still tells the story, and the full
   wording stays available as the tooltip and to a screen reader. */
@media (max-width: 1150px){
  .om-savestat .om-ss-tx{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .om-savestat{padding:5px 7px}
}
/* …except when it is bad news, which is always worth the space. */
@media (max-width: 1150px){
  .om-savestat.tone-bad .om-ss-tx,
  .om-savestat.tone-warn .om-ss-tx{
    position:static;width:auto;height:auto;overflow:visible;
    clip:auto;clip-path:none;
  }
  .om-savestat.tone-bad,.om-savestat.tone-warn{padding:5px 10px}
}

@media (prefers-reduced-motion: reduce){
  .om-savestat.tone-busy .om-ss-ic svg{animation:none}
  .om-savestat{transition:none}
}

@media print{
  .om-savestat{display:none !important}
}