/* Ажлын самбар. Neutral enough to sit inside either product's styling:
   both studios set their own colours, so this borrows theirs through
   currentColor and a translucent surface rather than declaring a palette that
   would look right in one of them and wrong in the other. */

.ajc { display: block; }
.ajc.ajc-empty { display: none; }
/* `.ajc { display: block }` out-specifies the user agent's `[hidden]` rule, so
   without this an empty panel stayed laid out — and `stJobs` is a fixed box with
   a background and a shadow, sitting over the corner of the editor. */
.ajc[hidden] { display: none !important; }

.ajc-title {
  font: 600 12px/1.4 inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0 0 8px;
}

.ajc-card {
  border: 1px solid rgba(127, 127, 127, .28);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(127, 127, 127, .06);
}
.ajc-card.ajc-failed { border-color: rgba(220, 70, 70, .55); }
.ajc-card.ajc-completed { border-color: rgba(60, 170, 110, .5); }
.ajc-card.ajc-cancelled { opacity: .78; }

.ajc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ajc-head b { font-size: 14px; }
.ajc-state { font-size: 12px; opacity: .75; white-space: nowrap; margin-left: auto; }

/* THE CLOSE CONTROL. A finished card the user cannot get rid of is a panel they
   have to wait out; this is the difference between a notification and an
   obstruction. Sized for a pointer (24px) rather than for the glyph. */
.ajc-x {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin: -4px -4px -4px 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: .55;
  font: 13px/1 inherit;
  cursor: pointer;
}
.ajc-x:hover, .ajc-x:focus-visible { opacity: 1; background: rgba(127, 127, 127, .16); }

.ajc-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .22);
  overflow: hidden;
  margin: 8px 0 6px;
}
.ajc-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  opacity: .8;
  transition: width .3s ease;
}

/* The honest state. No number is claimed, so nothing looks like a measurement:
   a stripe that moves says "working" and says nothing else. */
.ajc-indeterminate > i {
  background: repeating-linear-gradient(
    115deg, currentColor 0 12px, transparent 12px 24px);
  opacity: .38;
  animation: ajc-slide 1.1s linear infinite;
}
@keyframes ajc-slide { to { background-position: 24px 0; } }

@media (prefers-reduced-motion: reduce) {
  .ajc-indeterminate > i { animation: none; }
}

.ajc-note { font-size: 12.5px; opacity: .85; line-height: 1.45; word-break: break-word; }
.ajc-card.ajc-failed .ajc-note { opacity: 1; }

.ajc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ajc-time { font-size: 11.5px; opacity: .6; }
.ajc-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ajc-wait { font-size: 11.5px; opacity: .7; align-self: center; }

.ajc-btn {
  font: 500 12px/1 inherit;
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid rgba(127, 127, 127, .45);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.ajc-btn:hover { background: rgba(127, 127, 127, .14); }
.ajc-btn:disabled { opacity: .5; cursor: default; }
.ajc-btn.ajc-stop { border-color: rgba(220, 120, 70, .6); }